박스 모델

...생략...
    <style>
      h1, a {
        border: 5px solid red;
      }
    </style>
...생략...

 

<h1>태그와 <a>태그의 테두리를 그리면 이것들의 부피감을 알 수 있게 된다.

 

HTML에 있는 여러 태그들은 태그의 성격과 일반적인 쓰임에 따라 화면 전체를 쓰는 것이 편한 것과 자신의 크기만큼의 부피를 갖는 게 편한 것이 있기 때문에 화면 전체를 쓰는 태그가 있고, 자기 크기만큼 쓰는 태그들이 있다.

그래서 화면 전체를 쓰는 태그들을 블록 레벨 엘리먼트(block level element)라고 하고, 자기 자신의 콘텐츠 크기만큼 쓰는 태그들을 인라인 엘리먼트(inline element)라고 한다. 

용어는 중요하지 않으나 어떤 태그들이 얼마나 부피를 사용하는지만 알고 있으면 된다.

 

display: inine;
display: block;

---

 

...생략...
    <style>
      h1, a {
        border: 5px solid red;
        padding: 20px;
      }
    </style>
...생략...

 

콘텐츠와 테두리 사이에 padding 을 통해 여백을 추가해보자 

 

 

    <h1>CSS</h1>
    <h1>CSS</h1>

이때, 새로운 <h1>태그를 추가할 시,

테두리와 테두리 사이의 간격이 생기는데, 이 간격은 margin 때문이다.

 

...생략...
    <style>
      h1, a {
        border: 5px solid red;
        padding: 20px;
        margin: 0;
      }
    </style>
...생략...

 

이렇게 margin을 0으로 설정할 시, 두 테두리 사이의 간격이 없어진다.

지금 사용하고 있는 <h1>태그는 박스 모델상 display:block; 이 생략돼 있는 상태이며 화면 전체를 쓰고 있다.

 

...생략...
    <style>
      h1, a {
        border: 5px solid red;
        padding: 20px;
        margin: 0;
        width: 100px;
      }
    </style>
...생략...

 

이를 바꾸기 위해 width 값으로 100px를 지정하면 100px만큼 태그의 크기가 변경된다.

 

박스 모델이 헷갈린다면 

예) 'css box model'이라고 검색하는 것을 추천한다.

 

css box model

---

HTML의 태그들은 그 태그의 기본적인 성격에 따라 화면 전체를 쓰기도 하고 자기 크기만큼을 쓰기도 한다. 

화면 전체를 쓰는 것을 블록 레벨 엘리먼트, 자기 자신의 크기만 갖는 것을 인라인 엘리먼트라 한다.

그리고 콘텐츠의 크기를 지정할 때 폭은 width, 높이는 height로 지정하는 것과

콘텐츠와 테두리 사이의 간격은 padding, 테두리와 테두리 사이의 간격을 지정할 때는 margin 속성을 이용한다.

 

즉, 박스 모델은 HTML 태그 하나하나를 일종의 박스로 취급해서 부피감을 결정하는 것이고, 

부피감을 결정한다는 것은 디자인에서 핵심적인 요소인 것이다. 

 

박스 모델을 활용한 예시를 보자.

...생략...
  h1{
        font-size: 45px;
        text-align: center;
        border-bottom: 1px solid gray;
        margin: 0px;
        padding: 20px;
      }
      ol{
        border-right: 1px solid gray;
        width: 100px;
        margin: 0;
        padding: 20px;
      }
      body{
        margin:0;
      }
...생략...

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.