[HTML 기본] HTML 구조 잡기(1)

HTML 구조 잡기(1)

HTML 구조 잡기(1)

 

1. 가로줄로 쪼개기.

HTML의 레이아웃을 잡기 위해서 가로로 한줄한줄 나눠가면서 레이아웃을 쪼개야 합니다.

 

그다음 각각의 줄에 <div> 태그를 부여해보겠습니다.

 

2. div 채우기.

총 4줄이 생겼는데요.

이번 편은 위에서 첫째 줄 까지만 뜯어보는 걸로 해봅시다.

 

첫 번째 div는 문서 내에서 header의 역할을 하고 있어서 <div class="header"> </div>이렇게 header class를 부여해 보았습니다.

이 안에는 로고 이미지와 nav가 들어갑니다. <div class="header"> 여기 </div>에 넣어 줘야 합니다.

header class안에 있으니까요.

 

로고는 <img class="logo"> 태그를 사용해 보았습니다.

nav는 이 안에 2개의 요소가 들어갈 거기 때문에 div 태그로 묶었습니다. <div class="nav"></div>

즉, <div class="nav">

<a> 메뉴 1 </a>

<a> 메뉴 2 </a>

</div>

정리를 해보면, ((header=logo, nav)=nav=메뉴)

첫 번째 header를 완성해보았는데요.

어떤가요? 쉽지요?ㅋㅋㅋ다음 편엔 두 번째 div를 채워나가 봅시다.