박스(Box)모델 - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • 박스(Box)모델
    11 Box 모델
    박스(Box)모델

    HTML의 모든 요소(Element)는 상자(Box)의 형태를 갖습니다. 그러면 HTML 요소에 대해 한 번 생각해볼까요? HTML 요소는 태그와 컨텐츠로 이루어져 있습니다. 우리는 이 중 컨텐츠에 대해 살펴보려 합니다.

    위 코드를 브라우저에서 출력해보면 당연히 태그 없이 컨텐츠만 출력됩니다.

    강의를 시작할 때 얘기한 'HTML의 모든 요소가 상자 형태를 가진다'는 말은 바로 브라우저에 출력되는 이 컨텐츠가 사각형 박스 형태로 출력된다는 것을 의미합니다.

    그렇다면 박스는 왜 사각형 형태로 사용될까요? 이런 형태를 통해 아래와 같이 컨텐츠를 테트리스처럼 조밀하게 배치할 수 있고, 이 박스의 크기를 계산하여 쉽게 브라우저로 출력할 수 있다는 장점 때문입니다. 브라우저에 컨텐츠를 올바르게 배치하기 위해서는 박스 모델에 대한 이해가 반드시 필요합니다.

    그러면 지금부터 박스 모델의 구성에 대해 좀 더 자세히 살펴보겠습니다.

    위 그림은 가장 평범하고 일반적인 박스 모델의 배치입니다. 위에서 실행해보았던 구름EDU와 같은 태그 내부에 위치해 실제 표시되는 내용을 Content(내용)라고 합니다.

    보이진 않지만 이러한 컨텐츠를 감싸고 있는 다른 요소들이 있습니다. 이러한 박스 형태 전체를 가리켜 박스 모델(Box Model)이라고 부릅니다.

    박스 모델은 내용(Content)패딩(Padding)경계선(Border)마진(Margin)으로 이루어져 있습니다.

    먼저 내용(Content)는 이미지나 텍스트와 같이 우리가 코드 상에서 태그 사이에 담은 내용, 즉 실제로 담고 있는 부분입니다. 다음으로 경계선(Border)은 말 그대로 컨텐츠를 감싸고 있는 테두리입니다.
    마진과 패딩은 둘 다 여백을 뜻하지만 경계선(Border)를 기준으로 역할이 다릅니다. 패딩(Padding)은 컨텐츠와 경계선 사이의 여백이지만 마진(Margin)은 경계선 밖의 여백입니다.

    다음 강의부터 박스 모델과 관련된 CSS 속성들에 대해 차례대로 배워봅시다.

    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)