블록 모델 소개

1.1 블록 모델 기본

블록 모델은 웹 페이지에서 요소들이 어떻게 배치되고 상호작용하는지를 이해하기 위한 기본입니다. 이는 HTML 요소의 구조와 크기, 그리고 어떻게 여백, 경계, 외부 여백으로 둘러싸여 있는지를 정의합니다.

블록 모델 기본

CSS 블록 모델은 HTML 요소의 블록 구성을 설명합니다. 각 요소는 네 가지 주요 구성 요소로 이루어져 있습니다:

• 내용 (content).
• 패딩 (padding).
• 경계 (border).
• 외부 여백 (margin).

이 구성 요소들은 요소가 어떻게 표시될지와 페이지의 다른 요소들과 어떻게 상호작용할지를 결정합니다.

내용 (Content)

내용 (content)은 텍스트, 이미지 또는 다른 중첩된 요소들이 있는 요소의 기본 부분입니다. 내용의 크기는 width와 height 속성을 통해 명시적으로 지정할 수 있거나 요소의 내용에 의해 결정될 수 있습니다.

사용 예시

이 예시에서 요소 .content의 내용에는 "이것은 요소의 내용입니다."라는 텍스트가 포함되어 있습니다:

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        이것은 요소의 내용입니다.
      </div>
    
  

1.2 블록 모델 시각화

블록 모델의 각 요소는 다음 부분으로 구성된 직사각형 블록으로 나타낼 수 있습니다:

• 콘텐츠 (Content): 요소의 내부 콘텐츠, 예를 들어 텍스트나 이미지
• 패딩 (Padding): 콘텐츠와 요소 경계 사이의 공간
• 경계 (Border): 내부 여백과 콘텐츠를 둘러싸는 선
• 마진 (Margin): 요소 경계와 인접 요소 사이의 공간

블록 모델 시각화:

    
      .element {
        width: 200px;           /* 콘텐츠의 너비 */
        padding: 10px;          /* 내부 여백 */
        border: 2px solid red;  /* 경계 */
        margin: 20px;           /* 외부 여백 */
      }
    
  

1.3 경계 (Border)

경계 (border)는 요소의 내용과 내부 여백을 둘러쌉니다. 경계는 다양한 스타일, 두께, 색상을 가질 수 있습니다. 경계는 페이지에서 요소를 시각적으로 강조하는 데 사용될 수 있습니다.

사용 예시

이 예시에서는 요소 .border에 5픽셀 두께의 검은색 점선 경계가 적용되어 있으며, 이는 내용과 내부 여백을 둘러싸고 있습니다.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        이것은 경계가 있는 요소입니다.
      </div>