반응형
1. 박스 모델 속성
|
종류
|
설명
|
|
width
|
박스모델의 너비를 지정
|
|
height
|
박스모델의 높이 지정
|
|
box-sizing
|
박스 모델의 크기를 계산하는 기준을 지정
|
|
box-shadow
|
박스 모델에 그림자 효과 추가
|
2. 테두리 속성
|
속성
|
설명
|
|
border-style
|
상하좌우 4개방향의 테두리 스타일을 한꺼번에 지정
|
|
border-위치-style
|
'위치'자리에 top, right, bottom, left 특정위치의 테두리 스타일만 지정
|
|
border-width
|
4개방향의 테두리 두께를 한번에 지정
|
|
border-위치-width
|
위치 지정 두께 지정
|
|
border-color
|
테두리 색상지정
|
|
border-위치-color
|
테두리 위치 색상지정
|
|
border-radius
|
4개방향 꼭짓점을 둥글게
|
|
border-위치-radius
|
위치(top-left, top-right, bottom-right, bottom-left) 지정 꼭짓점 둥글게
|
3. 여백 속성
|
margin
|
4개방향 마진을 지정
|
|
margin-위치
|
위치 지정 마진 지정
|
|
padding
|
4개방향 패딩 지정
|
|
padding-위치
|
위치 패딩 지정
|
4. 레이아웃 속성
|
display
|
화면에서 요소를 배치 방법을 지정합니다. 자주 사용하는 속성으로 block, inline, inline-block, none
|
|
float
|
웹 요소를 왼쪽이나 오른쪽에 배치합니다. float를 적용한 요소는 clear 속성으로 해제 하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치됩니다.
|
5. 위치 지정 속성
|
left, right, top, bottom
|
기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정
|
|
position
|
웹 요소의 위치를 지정. 속성값으로 static, relative, absolute, fixed
|
반응형