HTML&&CSS

콘텐츠 모델, 시멘틱 마크업, 블록 레벨, 인라인 레벨

꽃달린감나무 2022. 5. 20. 01:39
728x90

콘텐츠 모델

  • HTML5 버전에서 HTML요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들을 그룹화 시켜놓은 것

참고 : https://www.boostcourse.org/cs120/lecture/92892?isDesc=false

    • Flow
      • 문서에서 사용되는 대부분의 요소
      • 문서 내에 자연스러운 흐름에 의해 배치되는 요소들
      • 일부 Metadata 태그들만을 제외하고 대부분의 태그들이 Flow에서 속함
    • Sectioning
      • 문서의 구조와 관련된 요소들이 들어감
      • heading, footer 범위를 결정하는 요소, 아웃라인이 있음
      • <article>, <aside>, <nav>, <section>.... 등
    • Heading
      • 섹션의 헤더를 정의하는 요소
      • <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
    • Rharasing
      • 문서의 텍스트이며 문단 내부레벨로 마크업 하는 요소
      • <a>, <audio>, <b>, <br>, <i>, <img>, <button>...등
    • Interaetive
      • 사용자와 상호작용하는 요소
      • Form 요소 관련 태그들 (<input>, <button>, <form>...등)
    • Metadata
      • 콘텐츠의 style(표현), script(동작)을 설정하거나 다른 문서와의 관계 등의 정보를 포함한 요소
      • head 태그내에 들어감
      • <link>,<style>,<meta>,<title>...등

 

 

 

시멘틱 마크업

  • 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻함
  • 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻함

시멘틱 마크업 하는 법 

  • 정해진 약속을 잘 지키기
  • 마크업 할 때는 의미에 맞는 태그, 요소를 사용
  • 문서를 표현할 때는 구조화를 잘 해주기
  • 이를 통해, 개발하는 개발자와 브라우저 코드를 잘 이해할 수 있음
<b>굵은</b> vs <strong>중요한</strong><br>
<i>기울어진</i> vs <em>강조하는</em><br>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins><br>
<s>중간선이 있는</s> vs <del>삭제된</del>

 

 

굵은 vs 중요한 기울어진 vs 강조하는 밑줄친 vs 새롭게 추가된 중간선이 있는 vs 삭제된

 

  • 우리 눈에 보기엔 별 차이가 없지만, 브라우저, 스크린 리더기가 보기에는 <b> 단순히 굵은 글씨를, <strong> 중요한 글씨를 표현하는 것 입니다. 아래에도 똑같이 <i>,<u>,<s> 는 단지 단순한 스타일적인 표현일 뿐, <em>,<ins>,<del>과 같은 의미는 절대 아닙니다. 따라서 단지 스타일 적인 요소만 사용하고 싶다면, <i>,<s>,<b>를 사용하면되지만 우리 눈에 같은 것으로 보인다고 중요한 내용, 강조되는 내용, 삭제된 내용을 나타낼 때는 <i>,<s>,<b>를 사용하면 안됩니다.

 

block-level

  • 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소
  • 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생김
  • 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함 가능
  • div, h1~h6, p, ul, li, table ... 등

inline-level

  • 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소.
  • 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있음
  • 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없음
  • 즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없음
  • span, i, img, em, strong, a ...등

예외 ) HTML5 버전에서 생겨난 한가지 예외 경우가 있는데 <a>는 인라인 레벨 요소지만

자손으로 블록 레벨 요소를 가질 수 있음

 

참고 :  https://data-flair.training/blogs/html-block-and-inline-elements/

 

728x90