content - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • content
    learn
    Practice
    learn
    11 Box 모델
    content

    지금부터 본격적으로 박스 모델의 구성 요소에 대해 파헤쳐봅시다. 설명을 위해 삽입한 gif 파일이 잘 보이지 않는다면 아래 그림의 노란색 원 위치에 커서를 두고 오른쪽으로 드래그하시기 바랍니다.

    우리가 보통 요소의 크기를 정의할 때 width나 height를 많이 사용합니다. 이런 너비와 크기는 box model 중 content의 크기에 해당합니다. 아래와 같이 #inner에 height과 width를 추가하여 개발자 도구를 통해 컨텐츠의 크기를 확인해 봅시다.

    개발자 도구에서 inspect 도구를 통해 #inner을 찍어보면, 아래와 같이 컨텐츠의 크기, 즉 height와 width가 앞서 지정했던 200X100으로 설정되어 있음을 확인할 수 있습니다.

    이처럼 우리가 일반적으로 알고 있는 widthheight는 이 컨텐츠 박스의 크기를 조정합니다. 추가로 컨텐츠 영역의 크기가 지정되어 있는 상태에서 컨텐츠의 크기를 늘리면 내용이 컨텐츠 박스를 벗어나게 됩니다.

    만약 이 넘쳐난 div 아래 다른 요소가 하나 더 추가되면 넘친 내용이 자동으로 개행된다 생각할 수 있지만 그렇지 않습니다. 이번에는 아래와 동일한 내용을 가진 div를 하나 더 생성하고 실행해봅시다.

    코드를 작성한 뒤 개발자 도구를 보면 지정된 200 X 100의 사이즈를 가지는 컨텐츠 박스 두 개가 위 아래로 배치되어 있음을 확인할 수 있습니다. 

    컨텐츠 박스의 내용이 컨텐츠 박스에 지정된 200 X 100보다 크더라도, 컨텐츠 박스를 기준으로 배치가 됩니다(마진, 패딩 등이 없는 경우).

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    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)