박스 모델의 방향top : 윗 부분right : 오른쪽bottom : 아랫 부분left : 왼쪽테두리 스타일을 지정하는 속성border-style 속성기본값은 noneborder-style 속성값none테두리가 없음 / 기본값hidden테두리를 감춤 / 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않음solid테두리를 실선으로 표시함dotted테두리를 점선으로 표시함dashed테두리를 짧은 직선으로 표시함double테두리를 이중선으로 표시함 / 두 선 사이의 간격이 border-width 값이 됨groove테두리를 창에 조각한 것처럼 표시함 / 홈이 파인 듯 입체 느낌inset표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀..

박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라짐블록 레벨 요소블록 레벨 요소태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것한 줄을 차지한다 = 해당 요소의 너비가 100%∴ 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음대표적인 태그로 , , 등이 있음-(예시) : 예제 예시 1 예시 2 예시 3 예시 4예시 5 -(결과) :인라인 레벨 요소인라인 레벨 요소한 줄을 차지하지 않음콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음∴ 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있음대표적인 태그로 , , 등이 있음-(예시) : 예제 예시 1 예시 2 예시 3 예시 4 예시 5 -(결과) :박스 모델박스 모델스타일 시트..

표 제목의 위치를 정해 주는 속성 caption-side 속성 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 사용하면 표 아래쪽으로 옮길 수 있음 기본형 : caption-side: top | bottom ┌ top : 캡션을 표 윗부분에 표시함 / 기본값 └ bottom : 캡션을 표 아랫부분에 표시함 표에 테두리를 그려 주는 속성 border 속성 표 바깥 테두리와 셀 테두리를 각각 지정함 -(예시) : 예제 예제 예시 1 예시 2 예시 3 예시 4 A B C D 가 나 다 라 -(결과) : 셀 사이의 여백을 지정하는 속성 border-spacing 속성 셀과 셀 사이의 여백을 조절할 수 있음 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1..

불릿 모양과 번호 스타일을 지정하는 속성 list-style-type 속성 순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있음 순서 있는 목록에서는 번호 스타일을 지정할 수 있음 list-style-type의 속성값 : ┌ disc : 채운 원 모양 ( ● ) ├ circle : 빈 원 모양 ( ○ ) ├ square : 채운 사각형 모양 ( ■ ) ├ decimal : 1부터 시작하는 10진수 ( 1, 2, 3, ... ) ├ decimal-leading-zero : 앞에 0이 붙는 10진수 ( 01, 02, 03, ... ) ├ lower-roman : 로마 숫자 소문자 ( ⅰ, ⅱ, ⅲ, ... ) ├ upper-roman : 로마 숫자 대문자 ( Ⅰ, Ⅱ, Ⅲ, ... ) ├ lo..

글자색을 지정하는 속성 color 속성 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때 사용 사용할 수 있는 속성값은 16진수, rgb(rgba), hsl(hsla), 색상 이름 기본형 : color: 색상을 표현하는 방법 : 16진수로 표현하는 방법 ┌ #333333처럼 # 기호 다음에 6자리의 16진수로 표현함 ├ 앞에서부터 두 자리씩 묶어 #RRGGBB로 표시함 ├ 00 : 해당 색상이 하나도 섞이지 않음 / ff : 해당 색상이 가득 섞임 ├ #000000 : 검은색 / #ffffff : 흰색 └ 만약 색상값이 #0000ff 처럼 두 자리씩 중복될 경우 #00f 로 줄여서 표기 가능 rgb로 표현하는 방법 ┌ 0 : 하나도 섞이지 않음 / 255 : 가득 섞임 └ 0 ~ 255 사이의 값으로 색상..

웹 폰트 사용자 시스템에 없는 글꼴도 사용 가능하게 함 사용자 시스템에 없는 글꼴이더라도 웹 문서를 만들 때 사용한 글꼴을 내려받은 후 표시함 기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드 해야 함 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운됨 컴퓨터에서 사용하는 글꼴은 트루타입으로 파일 확장자는 *.ttf 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기에 적절하지 않음 웹에 적절한 글꼴에는 EOT(embedded open type), WOFF(web open font format), WOFF2 가 있음 기본형 : @font-face { font-family: ; src: [, , ...]; } ..