08-1 CSS와 박스 모델

CSS 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법임.

이 박스 모델이 모여 웹 문서를 이루는 것임. 

박스 모델에는 마진과 패딩, 테두리 등 박스가 여러 겹 들어 있음.

이 개념은 CSS에서 자주 사용하므로 잘 기억해 두어야 함!!!

 

>>>블록 레벨 요소와 인라인 레벨 요소

블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것(해당 요소의 너비가 100%)

ex) <h1>, <div>, <p> 태그

 

인라인 레벨 요소 : 한 줄을 차지하지 않음. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.

ex) <span>, <img>, <strong> 등

 

>>> 박스 모델의 기본 구성

박스 형태의 요소를 박스 모델 요소라고 함.

웹 문서 안에서 여러 요소를 원하는 위치에 배치하려면 CSS 박스 모델을 잘 알고 있어야 함.

박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩, 박스의 테두리, 그리고 여러 박스 모델 사이의 여백인 마진등의 요소로 구성

 

>>> 콘텐츠 영역의 크기를 지정하는 width, height 속성

 

>>> 박스 모델의 크기를 계산하는 box-sizing 속성

width  속성과 height 속성은 박스 모델에서 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킴

그래서 웹 문서에 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야함

정리하자면 웹 문서 레이아웃을 만들 때는 CSS에서 박스 모델을 사용하는데, 요소의 크기를 쉽게 계산하려면

box-sizing 속성을 border-box로 지정해 놓는 것이 좋음

 

>>> 박스 모델에 그림자 효과를 주는 box-shadow 속성

CSS에서는 box-shadow 속성을 사용하면 포토샵 같은 프로그램을 따로 사용하지 않고도 그림자 효과를 줄 수 있음.

[기본형] box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset