영역 태그 | Notion

HTML의 영역 태그는 그룹화가 필요한 UI 요소들을 알맞게 그룹화하여 스타일 등을 제어할 수 있도록 해준다. 대표적으로 div 태그를 사용할 수 있다.

Untitled

위 사진의 웹에서는 라면을 소개하는 영역과 샌드위치를 소개하는 영역이 있다. 만약 지금까지 배운 HTML 태그만 사용한다면 아래처럼 작성할 수 있다.

<html>
	<body>
    <h1>나의 요리책</h1>

    <h2>라면 조리법</h2>
    <p>사용할 라면: 참깨라면</p>
    <p>물을 받아서 냄비에 끓이고 스프와 면을 넣고 계속 끓이면 완성!</p>

    <h2>샌드위치 조리법</h2>
    <p>
      빵을 두개로 나누어서 한쪽은 햄, 한쪽은 채소를 넣고 소스를 바르면 완성!
    </p>
  </body>
</html>

그러나 위의 코드는 코드상에서 영역을 알아보는데 가독성이 좋지 않고, 코드상에서 라면과 샌드위치의 영역이 분명하게 나눠져있지 않다.

만약 한 페이지에 보여주는 콘텐츠들이 각각 독립적이거나 분류가 다른 경우에는 그룹화를 통해서 콘텐츠 영역을 나누는것이 좋다.

<html>
	<body>
    <h1>나의 요리책</h1>

    <div>
      <h2>라면 조리법</h2>
      <p>사용할 라면: 참깨라면</p>
      <p>물을 받아서 냄비에 끓이고 스프와 면을 넣고 계속 끓이면 완성!</p>
    </div>

    <div>
      <h2>샌드위치 조리법</h2>
      <p>
        빵을 두개로 나누어서 한쪽은 햄, 한쪽은 채소를 넣고 소스를 바르면 완성!
      </p>
    </div>
  </body>
</html>