1. 먼저 만들어보기

저번 시간의 결과물은 이렇다.

아래 사진은 이번에 만들게 될 홈페이지 레이아웃 사진이다.

확실히 어려워 보일 수도 있을 것이다.

정 못하겠다면 맨 위의 사진과 같이 Header, Container, Footer 부분의 틀만 잡아도 상관 없다.

아래는 가로, 세로 길이값 및 색상값이다. 순서는 맨 위에서부터 시작이다.

Container 부분의 큰 파란색 박스와 두 개의 하늘색 박스는 각각 Container block2, Container block3이라 하겠다.

Container 부분의 Margin 값은 생략한 것이 몇 부분 존재한다. 방향을 알맞게 잡아 알아서 조절하도록 하자.

	Width	Height	Color	Margin
Header block1	100%	35px	lightblue	-
Header block2	100%	88px	lightyellow	-
Header block3	100%	44px	lightsalmon	-
Container	750px	-	-	top, bottom 30px
Container block1	100%	100px	lightgray	-
Container block2	100%	520px	lightskyblue	-
Container block3	720px	220px	lightcyan	15px
Container block2-1	450px	200px	lightcoral	10px
Container block2-2	240px	200px	lightcoral	10px
Container block3-1	180px	200px	lightcoral	10px
Container block3-2	260px	200px	lightcoral	10px
Container block3-3	240px	200px	lightcoral	10px
Footer	100%	70px	lightsalmon	-

혹시 Margin 값을 설정했는데도 여백이 보이지 않는다면? 아래의 코드를 넣어보자.

overflow: auto;

overflow 속성이란 컨테이너보다 내용이 더 클때(내용을 감싸고 있는 영역보다 커졌을 때) 내용을 잘라낼지,

스크롤을 보여줄지, 범위를 넘어가게 해서 보여줄건지 결정하는 것이다.