[SW코딩] 핵심 HTML/CSS 기초 - 01. 구조를 잡을 때 사용하는 태그

03 구조를 잡을 때 사용하는 태그

 

- 목차 : 로고, 카테고리 등을 담고 있다.

- 본문 : 페이지에 대한 메인 정보를 담고 있다.

- 부록 : 사업자 등록번호, 언어, 이메일, 연락처 등을 담고 있다.

 

• 웹사이트 목차 부분을 담당하는 <header>, <nav> 태그

<header>			<!-- 상단 영역 -->
	<img src="logo.png" alt="logo">
	<nav>			<!-- 메뉴 영역 -->
    	<ul>
            <li>홈</li>  
            <li>카테고리</li>
            <li>설정</li>
    	</ul>
    </nav>
</header>

- <header> 태그 : 웹사이트의 머리글 (목차)를 담는 공간

- <nav> 태그 : 메뉴 버튼을 담는 공간, <ul>, <li>, <a>와 함께 사용

 

• 목차부분 실행결과

• 홈
• 태그
• 방명록

 

• 본문 부분을 담당하는 <main>, <article> 태그

<main role="main">		<!-- 본문 영역 -->
    <article>			<!-- 정보 영역 -->
	    
    </article>
</main>

- <main> 태그 : 본문의 주요 내용을 담는 태그, IE에서 사용하려면  role="main" 속성을 필수 입력해야한다.

- <article> 태그 : 문서의 주요 이미지, 텍스트 등의 정보를 담고 구역을 설정하는 태그, <h> 태그로 구역을 설정한다.

 

• 본문부분 실행결과

전체글

[SW코딩] 핵심 HTML/CSS 기초 - 01. HTML 기본 태그

 

• 하단부분을 담당하는 <footer> 태그

<footer>
   <div>
     <p>주소 : 인천광역시 부평구 부평동 123</p>
     <p>이메일 : parkes811@naver.com </p>
   </div>
   <div>
     <p>사업자등록번호 : 000-00-00000 | 대표 : 박은서</p>
     <p>통신판매업신고번호 : 제0000-부평-0000호</p>
   </div>
</footer>

- <footer> 태그 : 가장 하단에 들어가는 정보를 표기할 때 사용된다.

- <div> 태그 : 임의의 공간을 만들 때 사용된다. Division의 약어 

 

• 하단 부분 실행결과

 

주소 : 인천광역시 부평구 부평동 123

이메일 : parkes811@naver.com

사업자등록번호 : 000-00-00000 | 대표 : 박은서

통신판매업신고번호 : 제0000-부평-0000호