[CSS] 박스 모델 속성

박스모델 : HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지에 대한 것 

               : 모든 HTML 요소가 사각형의 박스로 둘러쌓여 있다는 개념 -> 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지의 본질!!

 

4가지 요소로 구성 

 

1) margin : 요소의 외부 여백

2) border : 요소의 테두리(경계선)

3) padding : 요소의 내부 여백 

4) content : 요소의 내용 

 

** margin 영역 ** 

외부여백 담당

top, right, bottom, left순으로 속성값을 결정함. 각각의 값을 설정할 수 있고, margin 속성값을 공백으로 구분해 4개를 적으면 위의 순서대로 적용됨. 

 

margin 겹침 현상 : 인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것. 

 

border 영역 : margin과 유사하지만, 여러 속성값이 복합적으로 사용됨. 

border-width : 테두리 굵기

border-style : 테두리 모양 

속성값	설명
none	테두리 그리지X
hidden	테두리를 화면에서 감춤
solid	테두리를 실선으로 그림
double	테두리를 이중 실선으로 그림
dotted	테두리를 점선으로 그림
dashed	테두리를 dotted보다 긴 점선으로 그림
groove	테두리가 파인 것처럼 그림
ridge	텓리가 튀어나온 것처럼 그림
inset	테두리를 요소가 파인 것처럼 그림
outset	테두리를 요소가 튀어나온 것처럼 그림

border 속성은 border-width, border-style, color로 지정된다. 

 

**padding 영역

요소의 내부 여백을 담당한다. 

 

** content (시작태그와 종료태그 사이에 작성되는 내용) 

width와 height 속성이 사용됨 (직접 영향) 

width:100%는 이미지 크기가 부모요소를 넘지 않도록 하는 것. (display : block과 함께 쓰임!?) 

box-sizing  속성 : 요소의 너비와 높이를 계산 안 해도 되게 해줌 

content-box : width, height 속성의 적용 범위를 content 영역으로 제한 

border-box : width, height 속성의 적용범위를 border영역으로 제한 

 

 

** 박스 모델의 성격과 display 속성 

1) 블록 성격 

2) 인라인 성격 

3) 인라인 블록 성격 

4) display 속성 : block, inline, inline-block // 속성을 바꾸고 싶을 때 사용하면 됨.