HTML 블록 모델

9.1 블록 요소

HTML 블록 모델은 문서 내 HTML 요소의 구조와 표시를 설명하는 개념이야. 이걸 이해하면 개발자가 요소들이 서로 어떻게 상호작용하고 페이지에 어떻게 배치되는지를 알 수 있어. 블록 모델을 잘 이해하면 구조적이고 시각적으로 멋진 웹 페이지를 만들 수 있어.

HTML 블록 모델은 두 가지 주요 요소로 구성돼: 블록과 인라인. 이 요소들은 웹 페이지 레이아웃에 핵심적인 역할을 해.

블록 요소

블록 요소 예제:

    
      <div>
        <h1>제목</h1>
        <p>이것은 div 블록 요소 안의 텍스트 단락이야.</p>
      </div>
    
  

9.2 인라인 요소

인라인 요소 (inline-level elements)는 자신의 콘텐츠에 필요한 너비만 차지하고 새 줄에서 시작하지 않아. 인라인 요소는 다른 인라인 요소나 텍스트만 포함할 수 있어. 인라인 요소 예제:

인라인 요소 예제:

    
      <span>이것은 <strong>굵은</strong> 텍스트와 <em>이탤릭체</em>가 포함된 단락이야.</span>
    
  

9.3 블록 모델의 구성 요소

블록 모델의 각 요소는 다음과 같은 부분으로 구성된 사각형 블록으로 표현될 수 있어:

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

블록 모델의 시각화:

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

블록 모델을 사용한 HTML 예제:

이 예제에서 "box" 클래스가 있는 <div> 요소는 너비가 200px이고, 내부 여백이 10px, 경계가 2px, 외부 여백이 20px이야. 이 속성들은 요소가 페이지에서 어떻게 표시되고 다른 요소들과 어떻게 상호작용하는지를 결정해.

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        이건 블록 모델 예제야.
      </div>