이미지만 바라보며 작업하던 디자이너가 풀스택 수업을 들으며 정리하고 구분해보는 html/css 코너. 영상 강의를 학습을 하면서, 일반적으로 기본 레이아웃을 지정하는 소스들이 있지 않을까? 라는 생각이 들었다. 그래서 여기저기 자료를 찾아보다가 chatGPT에 물어봐서 내가 원하는 정리를 요구했다.
직접 알아보고 작성하려니 시간이 많이 걸리는데, 하루에 주어진 시간은 부족하니 도움을 요청할 수 밖에. 다행히 최근에 chatGPT가 5로 업그레이드 되어 말을 조금더 잘 알아 듣고, 내용도 알차게 알려준다.
html의 기본 구조
html의 기본구조는 html-haed-boby 로 끝이난다. 여기에 body 안에 어떤 구조를 짤지는 각자 디자인을 하는 것 같다. 나는 body 안에 어떻게 기본구조가 자여져 코드를 생성해야하는지가 무척 궁금했다. 두번 정도 영상 학습을 보긴 했지만, 클론 코딩을 제대로 해보지 않았는지 손에도 머리에도 익지 않아서 별도로 정리를 하는게 필요하다고 느꼈다.
위 이미지에 따르면 바디 안에서는 header – main – aside – footer 가 기본이다.
- header 에는 로고, 네비, 검색창 등이 들어간다.
- main 에는 섹션이나 아티클이 들어가고, 기타 주요 컨덴츠도 넣을 수 있다.
– 섹션(section) 또는 아티클(article) 안에는 제목(H2~H6), 본문 텍스트(p, span 등), 이미지(img), 동영상() 등 - aside 에는 광고배너, 인기글, 최근글 등의 목록 & 사이드메뉴, 기타 참고 링크 등
- footer 에는 저작권 정보(P태그로), 연락처/ 회사정보 (address 태그), 소셜 링크 (ul>li>a 순으로), 사이트 맵이 들어간다.
위 이미지 그대로 들어갈 수 있다. 여기서 궁금증이 하나더 생겼다.
main이 가장 중요하다. 사이트의 컨덴츠들이 이 안에 정리되기 때문이다. main안에서 섹션과 아티클은 어떻게 구분해서 사용하지?? 어떤 경우에 섹션과 아티클을 적절히 사용할지의 구분이 필요하다. 섹션과 아티클의 구분은 아래와 같다.
. 섹션과 아티클의 핵심 차이
| 구분 | <section> | <article> |
|---|---|---|
| 의도 | 콘텐츠를 주제별로 묶는 그룹 | 콘텐츠 하나만으로도 독립적으로 배포/사용 가능한 글 |
| 독립성 | 독립성이 낮음 (주제별 구분, 맥락 필요) | 독립성이 높음 (이것만 떼어도 의미가 전달됨) |
| 대표 사례 | 챕터, 카테고리 구역, 서비스 소개 구역 | 블로그 글, 뉴스 기사, 포럼 글, 제품 리뷰 |
| 제목 사용 | 보통 <h2>~<h6> 제목 포함 | 보통 <h1>~<h6> 제목 포함 |
| 재사용 가능성 | 재사용보단 구조화 목적 | 다른 페이지나 플랫폼에 그대로 게시 가능 |
예시를 아래에서 구분해보자
<section>
<main>
<section>
<h2>회사 소개</h2>
<p>우리 회사는 2010년에 설립되어...</p>
</section>
<section>
<h2>서비스 안내</h2>
<p>다양한 웹 개발 서비스를 제공합니다...</p>
</section>
</main>
<ARTICLE>
<main>
<article>
<h2>여름철 건강관리 팁</h2>
<p>올 여름은 무더위가 예상됩니다...</p>
</article>
<article>
<h2>겨울철 난방비 절약법</h2>
<p>효율적인 난방기구 사용법은...</p>
</article>
</main>
위와 같이 섹션은 각각의 주제별 구역을 구분하는 것이고, 아티클은 각각의 독립적 컨덴츠를 다룬다. 예를 들면 섹션은 about us 페이지 내에서 회사 소개글, 연혁, 서비스 등을 하나의 페이지에서 컨덴츠의 주제별로 구분하여 다룰때 사용할 수 있다.
반면 아티클의 경우 페이지에서 각각의 컨덴츠의 목록 미리보기 등에 해당한다. 전혀다른 주제를 다룰 수도 있다. 독립적으로 다른 컨덴츠를 다루며, 아티클 하나를 따로 별도의 컨덴츠로 볼 수 도 있도록 구분한 것이다. 뉴스의 기사나 블로글의 포스팅 글 하나가 아티클에 해당한다.
쉽게 기억하자.
내용을 떼어다가 다른데 붙여도 의미가 완전하다 = article.
붙이면 의미가 완전하지 못하다 = section.
책의 챕터 = section.
잡지의 한편의 글 = article.
그럼 html의 기본 구조를 짜볼까.
<div class="layout">
<header class="site-header">
<h1>사이트 로고/타이틀</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
</nav>
<form role="search">
<input type="search" placeholder="검색어 입력" />
</form>
</header>
<main class="site-main">
<section>
<h2>섹션 제목</h2>
<p>메인 콘텐츠 영역입니다.</p>
<article>
<h3>아티클 제목</h3>
<p>독립 배포 가능한 글/카드/포스트</p>
</article>
</section>
</main>
<aside class="site-aside">
<h2>사이드</h2>
<ul>
<li><a href="#">관련 글 1</a></li>
<li><a href="#">관련 글 2</a></li>
</ul>
</aside>
<footer class="site-footer">
<p>© 2025 My Site</p>
<address>contact@mysite.com</address>
</footer>
</div>