민혁이의 IT스토리

[혼자 공부해서 개발까지 ] Part4 - Layout과 구조태그 개념 이해하기 본문

혼자 공부해서 개발까지/HTML

[혼자 공부해서 개발까지 ] Part4 - Layout과 구조태그 개념 이해하기

FE_Minhyuk 2025. 2. 8. 12:00

벌써 [혼자 공부해서 개발까지] - HTML 파트에 마지막을 달려가고 있는데요. 오늘은 웹페이지를 만들기 위해서 가장 기본적이면서 중요한 웹페이지 구조를 잡는 방법과 이때 필요한 구조태그에 대해서 알아보려고 합니다.그럼 바로 시작 할까요?

 

 

 

 

목차

  • 구조태그
  • 웹페이지의 구조 Layout

 

 

구조태그란?

구조태그란, HTML 문서에서 페이지의 구조나 섹션을 정의하는 역할을 하는 태그들입니다. 이 태그들은 문서의 레이아웃을 정의하고, 내용의 의미를 명확하게 전달할 수 있도록 도와줍니다. 구조태그도 시맨틱 구조태그와 비시맨틱 구조태그로 나눌 수 있는데요. 비시맨틱 주고태그는 <p>,<span> 등으로 part1에서 공부했던 내용이기 때문에 오늘은 시맨틱 구조태그를 집중적으로 다뤄보겠습니다.

 

시맨틱 태그

콘텐츠의 의미를 명확하게 전달하며, 페이지의 특정 부분이 어떤 역할을 하는지 알기 쉽게 나태냅니다. 또한  문서의 의미를 구체적으로 표현하기 때문에 검색 엔진이 페이지를 더 잘 이해하고, 화면 판독기와 같은 보조 기술들이 페이지를 더 쉽게 해석할 수 있도록 합니다.

 

시맨틱 태그의 종류

  • <header>: 페이지 또는 섹션의 상단 부분을 정의합니다. 보통 로고, 내비게이션 메뉴, 제목 등이 포함됩니다.
  • <footer>: 페이지나 섹션의 하단 부분을 정의합니다. 보통 저작권 정보, 연락처, 사이트맵, 외부 링크 등을 포함합니다.

  • <article>: 독립적인 콘텐츠를 나타내는 태그로, 예를 들어 블로그 글, 뉴스 기사, 댓글 등을 표시할 때 사용합니다.

  • <section>: 문서 내에서 주제를 구분하는 구획을 정의합니다. 각 섹션은 제목을 가질 수 있습니다.

  • <nav>: 내비게이션 링크를 그룹화할 때 사용됩니다. 웹사이트의 주요 메뉴나 링크를 포함합니다.

  • <aside>: 본문에서 부차적인 콘텐츠를 나타냅니다. 예를 들어, 사이드바나 광고 등이 있을 수 있습니다.

  • <main>: 페이지의 주요 콘텐츠를 정의합니다. 페이지에서 한 번만 사용해야 하며, 다른 페이지 콘텐츠와 구별되는 중요한 내용을 담습니다.

 

예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 각 시맨틱 태그에 배경 색상만 추가 */
    header { background-color: #4CAF50; } /* green */
    footer { background-color: #f44336; } /* red */
    article { background-color: #2196F3; } /* blue */
    section { background-color: #ff9800; } /* orange */
    nav { background-color: #9c27b0; } /* purple */
    aside { background-color: #00bcd4; } /* cyan */
    main { background-color: #673ab7; } /* deep purple */
    figure { background-color: #ff5722; } /* deep orange */
  </style>
  <title>시맨틱 태그 예시</title>
</head>
<body>
  <header>헤더</header>
  <footer>푸터</footer>
  <article>아티클</article>
  <section>섹션</section>
  <nav>내비게이션</nav>
  <aside>사이드바</aside>
  <main>메인 콘텐츠</main>
</body>
</html>

 

 

실행 화면

 

아직 스타일(css)를 배우지 안아서 시맨틱 태그로 구조를 잡는건 어렵지만 이런 태그들로 웹페이지에 틀을 만든다고 알아두시면 좋을 것 같습니다! 

 

 

웹페이지의 구조 Layout

 

레이아웃의 기본 개념

웹 페이지의 레이아웃은 다음과 같은 주요 요소들로 구성될 수 있습니다:

  • 헤더(Header): 페이지 상단을 의미하며 사이트의 로고, 메뉴, 검색 바 등이 넣습니다.
  • 메인 콘텐츠(Main Content): 페이지의 중심이 되는 주요 콘텐츠가 배치됩니다. 
  • 사이드바(Sidebar): 말 그대로 페이지의 왼쪽 또는 오른쪽에 배치되는 부가적인 콘텐츠를 뜻하며  광고, 링크, 인기 글, 카테고리 등을 포함할 수 있습니다.
  • 푸터(Footer): 페이지 하단에 위치하며, 저작권 정보, 연락처, 사이트 맵 등과 같은 부가적인 정보가 포함됩니다.

각각에 영역에 맞는 태그를 골라서 사용하는 것 개발자에 역할이죠😙

 

 

 

허접하기만 시맨틱 태그들과 css 활용하면 이런 웹사이트에 틀을 만들 수 있습니다

 

 

마무리

드디어 HTML 기초가 모두 끝났습니다!! 이제 다음 시간 부터는 스타일(CSS)를 배워보겠습니다. HTML이 건물을 짓는 작업이라고 하면 css는 인테리어라고 생각하면 편한데요. 스타일을 어떻게 넣는냐에 따라서 내가 만든 웹사이트가 어떻게 보일지를 결정하니 중요한 작업이겠죠?  CSS부터는 다루는 내용이 많아서 주 2회 업로드 예정이니 많이 찾아봐주세요! 감사합니😊 

'혼자 공부해서 개발까지 > HTML' 카테고리의 다른 글

[혼자 공부해서 개발까지] part3 - HTML 입력과 버튼 태그의 기초  (4) 2025.02.01
[혼자 공부해서 개발까지]part2 - 웹을 이루는 작은 조각, HTML 태그  (1) 2025.01.25
[혼자 공부해서 개발까지 ] Part1- 웹 개발의 첫걸음, HTML이란?  (3) 2025.01.18
'혼자 공부해서 개발까지/HTML' Related Articles more