박스모델(box model)

디자인에서 핵심적인 요소인 박스 모델

- HTML 태그 하나하나를 박스로 취급해서 부피감을 결정하는 것이다.

 

 

여기서 h1태그인 CSS와 a태그 css를 비교해보자.

h1태그는 줄바꿈이 이루어졌지만 a태그는 줄바꿈이 되지 않고 다른 내용과 바로 이어지게 된다.

제목은 화면 전체를 차지하는게 눈에 띄고 링크는 다른 라인과 이어져야 편리하기 때문에 기본 설정이 이렇게 되어있다.

 

 

그렇다면 실제로 해당 태그들이 어떤 부피감을 가지고 있는지 알아보자.

각 태그에 테두리를 표시해 부피감을 나타내보자.

테두리의 두께 border-width

테두리 색 border-color

테두리 실선 border-style:solid

 

 

다음과 같이 h1태그와 a1이 가지는 컨텐츠를 얼만큼 크기로 쓰는지 눈으로 확인할 수 있다.

쓰임새에 따라 부피감이 달라지게 되는데 화면 전체를 쓰는 것들을 block level element, 자기 자신만큼 쓰는 것을 inline element라고 부른다.

 

 

 

 

그리고 위와 같이 display는 기본 설정이기 때문에 직접

display:inline / display:block 이란 설정을 통해 원하는 것으로 바꿀 수 있다.

 

 

 

그런데 하나하나 작성하다보면 많은 중복이 발생하게 되는데 이러한 중복을 제거하기 위해

","라는 선택자와 border 뒤에 설정 내용을 생략해 확연히 컴팩트하게 작성할 수 있다.

 

  

CSS라는 h1태그를 하나 더 작성해 테두리간의 간격을 없애고 컨테츠와 테두리 사이에 간격을 넣은 모습이다. 이것은 margin과 padding이라는 항목으로 설정해 박스모델을 변경한 모습이다.

 

 

 

 

* 또한 개발자 도구로서 해당 페이지의 검사 탭으로 들어가게 되면

다음과 같이 margin / border / padding 등

어떤 css스타일의 영향을 받는지 보여주는 기능이다.

이것을 통해 css와 html이 복잡해지더라도 일목요연하게 내용을 파악할 수 있다.

 

 

 

 

CSS 박스 모델

- block level element : 화면 전체를 쓰는 것

- inline element : 자기 자신 만큼 갖는 것

- 컨텐츠 크기를 지정할 때 폭 : width / 높이 : height

- 컨텐츠와 바깥쪽 테두리 간격 : padding

- 테두리와 테두리 사이 : margin