TIP
지금부터 Intro, farm, forest 같은 큰 부분은 ‘공간’, 사자나 잠자리처럼 이미지가 들어가는 작은 부분은 ‘영역’, introWrap과 같이 성격을 갖고 있는 부분은 ‘서랍장'이라는 용어로 표현하겠습니다.
➊ 웹 사이트의 시작을 알리는 부분이므로 <header id="intro"> 태그를 사용하여 큰 공간을 만듭니다.
➋ <div class="introWrap">과 <div class="cloudWrap">으로 작은 서랍장을 두 개 만듭니다. <div class="introWrap"> 서랍장 안에는 로고와 동물 이미지, <div class="cloudWrap"> 서랍장 안에는 구름과 잠자리 이미지를 적용할 수 있도록 <div> 태그를 사용합니다. <div class="introWrap">과 <div class="cloudWrap">은 각 이미지를 담는 서랍장 역할을 담당합니다.
앞에서 말했듯이 웹 사이트를 만들 때는 서랍장을 어떻게 만들 것인지가 매우 중요합니다. 이 부분은 상단 배치 작업을 마친 후에 자세히 설명하겠습니다.