[정리] 2 | 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리

[정리] 2 | 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리

박스 모델 속성

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

테두리 속성

종류	설명
border-style	상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정
border-위치-style	top, rigth, bottom, left 중에서 선택해서 특정 위치의 테두리 스타일만 지정
border-width	상하좌우 4개 방향의 테두리 두께를 한꺼번에 지정
border-위치-width	top, rigth, bottom, left 중에서 선택해서 특정 위치의 테두리 두께만 지정
border-color	상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정
border-위치-color	top, rigth, bottom, left 중에서 선택해서 특정 위치의 테두리 색상만 지정
border-radius	상하좌우 4개 방향의 꼭짓점을 한꺼번에 지정
border-위치-radius	top, rigth, bottom, left 중에서 선택해서 특정 위치의 꼭짓점만 지정

여백 속성

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

레이아웃 속성

종류	설명
display	화면에서 요소를 배치할 방법을 지정 (block, inline, inline-block, none)
float	웹 요소를 왼쪽이나 오른쪽으로 배치, 꼭 clear 속성으로 해제해야 한다.

위치 지정 속성

종류	설명
left, right, top, bottom	기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정
position	웹 요소의 위치를 지정 (static, relative, absolute, fixed)

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)