CSS 기본 3

08장 정리

박스 모델 속성

종류	설명
width	박스 모델의 너비를 지정합니다.
height	박스 모델의 높이를 지정합니다.
box-sizing	박스 모델의 크기를 계산하는 기준을 지정합니다.
box-shadow	박스 모델에 그림자 효과를 추가합니다.

테두리 속성

속성	설명
border-style	상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정합니다.
border-위치-style	'위치'자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 스타일만 지정합니다.
border-width	상하좌우 4개 방향의 테두리 두께를 한꺼번에 지정합니다.
border-위치-width	'위치'자리에 top, right, bottom, left 중에서 선택해서
border-color	상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정합니다.
border-위치-color	'위치'자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 생상만 지정합니다.
border-radius	상하좌우 4개 방향의 꼭짓저을 한꺼번에 둥글게 만듭니다.
border-위치-radius	'위치'자리에 top-left, top-right, bottom-rigth, bottom-left 등을 선택해서 특정 꼭짓점만 둥글게 처리합니다.

여백 속성

종류	설명
margin	상하좌우 4개 방향의 마진을 한꺼번에 지정합니다.
margin-위치	'위치'자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 마진만 지정합니다.
padding	상하좌우 4개 방향의 패딩을 한꺼번에 지정합니다.
padding-위치	'위치'자리에 top, right, bottom, left 중에서 선택해서 틁정 위치의 패딩만 지정합니다.

레이아웃 속성

종류	설명
display	화면에서 요소 배치 방법을 지정합니다. 자주 사용하는 주요 속성으로 block, inline, inline-block, none 등이 있습니다.
float	웹 요소를 왼쪽이나 오른쪽으로 배치합니다. float를 적용한 요소는 clear 속성으로 해제 하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치됩니다.

위치 지정 속성

종류	설명
left, right, top, bottom	기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정합니다.
position	웹 요소의 위치를 지정합니다. 속성값으로 static, relative, absolute, fixed가 있습니다.