[CSS] 7. 박스 모델(Box Model)







1. 박스 모델


CSS에서 HTML의 모든 요소는 'Box'로 간주되어 웹 페이지 위에 그려지게 된다.


CSS의 Box Model이란 요소를 감싸는 상자라고 생각할 수 있으며 각 박스마다 Margin(여백), Border(경계), Padding(패딩), Content(내용)으로 구성된다.



1) Content - 텍스트와 이미지가 나타나는 박스의 내용물


2) Padding - 내용 주위의 영역 (경계선 안쪽 영역)


3) Border - Content와 Padding을 감싸는 경계


4) Margin - 경계선 바깥쪽의 영역







2. 경계선(Border)



1) 경계선 스타일


경계선의 스타일은 border-style 속성을 사용해 설정한다.





2) 경계선 폭 


border-width 속성으로 경계선의 폭을 설정할 수 있다.


단위는 특정 크기(px, pt, cm, em 등)나 thin, medium 또는 thick 중 하나를 사용한다.


이 속성은 단일로 사용했을 때는 작동하지 않고, border-style 속성이 설정돼있어야 작동한다.




3) 경계선 색상


border-color 속성으로 테두리의 색상을 설정한다.


색상은 색상명을 통해 설정하거나 rgb(r,g,b), #rrggbb와 같은 형식으로도 설정할 수 있다.


이 속성도 border-style 속성이 설정돼있어야 사용할 수 있는 속성이다.



4) 경계선 속기 속성


border 속성으로 경계선의 스타일을 한 줄로 축약할 수가 있다.


border-width, border-style(필수), border-color 순서로 작성한다.




5) 둥근 경계선


border-radius 속성은 둥근 경계선을 만든다.








3. 마진(Margin)



테두리 바깥의 공간을 설정할 때는 margin 속성을 사용한다.


다음과 같은 값으로 여백을 설정해줄 수 있다.


auto - 브라우저가 자동으로 계산, 요소를 가운데에 놓고 싶을 때 사용

length - px, pt, cm등의 단위로 여백을 지정, 기본적으로는 0px으로 설정됨

% - 요소 너비의 %만큼 지정

inherit - 부모 요소로부터 상속

* 음수 값도 포함될 수 있다.


margin-top, margin-right, margin-bottom, margin-left와 같이 각 면마다 여백을 다르게 줄 수 있다.


margin-top: 50px;

margin-right: 100px;

margin-bottom: : 150px;

margin-left: 200px;


혹은 margin 속기 속성을 사용에 한 번에 여백을 줄 수도 있다.


margin: 50px 100px 150px 200px;


결과는 아래와 같이 나온다.



여기서 첫 번째 박스와 두 번째 박스 사이의 간격이 이론적으로는 첫 번째 박스 margin-bottom의 30px과 두 번째 박스 margin의 위쪽 여백을 설정하고 있는 50px이 합쳐져 80px의 여백이 생겨야 정상이다.


하지만 여백이 50px만 생기는 이유는 요소의 위, 아래 여백이 두 여백 중 더 큰 하나의 여백으로 축소되기 때문에 위와 같은 경우에서는 30px보다 큰 50px의 여백만 적용이 되고 있는 모습이다.







4. 패딩(Padding)



테두리 안의 공간을 설정할 때는 padding 속성을 사용한다. margin 속성과 사용법은 비슷하다.


다음과 같은 값으로 여백을 설정해줄 수 있다.


length - px, pt, cm등의 단위로 여백을 지정, 기본적으로는 0px으로 설정됨

% - 요소 너비의 %만큼 지정

inherit - 부모 요소로부터 상속

* 음수 값은 허용되지 않는다.


padding-top, padding-right, padding-bottom, padding-left로 각 면의 여백을 다르게 주거나 padding 속기 속성으로 한번에 여백을 줄 수도 있다.



그런데 여기서 생각해 봐야 할게, 다음과 같이 요소에 width 속성을 설정하는 경우이다.



두 박스 모두 폭을 300px로 설정하였고, 아래의 박스만 padding을 30px로 설정해 주었다.


그 결과 위의 박스는 제대로 300px로 나왔는데 아래의 박스는 300px보다 (30*2)px만큼 넓어진 360px이 되어 화면에 나왔다.


만약 이럴 경우에 아래의 박스의 폭도 300px로 나오게 하고 싶다면, box-sizing: border-box; 라는 스타일을 추가해주면 300px의 폭을 유지할 수 있게 된다.







5. 박스 크기 계산



요소의 올바른 높이와 너비를 설정하기 위해 Padding과 Border, Margin의 크기도 함께 고려해야 한다.


예를 들어 다음과 같이 요소의 속성을 지정해 주었다면 요소 전체의 크기는 370px이 된다.



추가로 브라우저에서 F12를 누르면 오른쪽 화면에서 다음과 같은 박스 모델이 나와있어 참고할 수가 있다.








더보기

댓글,

violet quartz