HTML 구조 잡기

1) 헤더 (Yellow)

<div class = “header”>
	<img class = “logo”> //로고
	<div class = “nav”> //메뉴
		<a>메뉴 1</a>
		<a>메뉴 2</a>
		<a>메뉴 3</a>
	</div>
</div>

2) 슬라이더 (Green)

<div class = “slider”> <!--슬라이더-->
	<div><img></div>
	<div><img></div>
	<div><img></div>
</div>

3) 카드 (Orange)

<div class=“cardBox”> <!--카드-->
	<div class=“card”>
		<div><img></div>
		<p></p>
	</div>
	<div class=“card”>
		<div><img></div>
		<p></p>
	</div>
	<div class=“card”>
		<div><img></div>
		<p></p>
	</div>
</div>

4) 사진 (SkyBlue)

<div class=“gallery”> <!--갤러리-->
	<div><img></div>
	<div><img></div>
	<div><img></div>
	<div><img></div>
	<div><img></div>
	<div><img></div>
<!-- div 태그로 이미지를 묶는 이유는  -->
<!-- 이미지의 비율을 안깨지고 유지하면서  -->
<!-- 사이즈를 조정하기 위해서 -->
</div>