Container 내부 코드 작성
저번 시간까지 Container 가운데 정렬과 두 개의 Content div 를 만들었다.
이 페이지에서는 각 Content div 안에 박스를 만들 것이다.
~/Web-Practice/index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Web-Practice</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
Header
</div>
<div class="container">
<div class="content1">
<div class="block1-1"></div>
<div class="block1-2"></div>
<div class="block1-3"></div>
</div>
<div class="content2">
<div class="block2-1"></div>
<div class="block2-2"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
class명이 content1 인 div 안에는 3개의 박스를 만들 것이고,
content2 인 div 안에는 2개의 박스를 만들 것이다.
일단 index.html 파일에 div를 추가해보자.
~/Web-Practice/style.css
...
.block1-1 {
width: 100%;
height: 300px;
margin-bottom: 30px;
background-color: lightblue;
}
.block1-2 {
width: 100%;
height: 200px;
margin-bottom: 30px;
background-color: lightblue;
}
.block1-3 {
width: 100%;
height: 250px;
background-color: lightblue;
}
CSS 파일에 코드를 추가하기 전에 이전 페이지에서 확인용으로 설정해놨던 content1, 2의
height 값과 background-color 값을 지우자.
위의 코드는 위에서부터 3개의 박스에 각각 스타일을 입힌 것이다.
이 블럭은 옆으로 나열할 것이 아니기 때문에 부모 div인 content1에 flex 값을 줄 필요는 없다.
일단 content1의 width 값은 750px이다.
3개의 블럭 모두 content1의 width 값을 따라야 하므로 width값을 100%로 지정한다.
그리고 위에서부터 차례대로 height 값을 300px, 200px, 250px로 지정한다.
여기서 블럭 간격을 설정하기 위해 class명이 block1-1, block1-2인 것에 margin-bottom: 30px를 넣어준다.
파일을 저장하고 실행시켜보면 3개의 블럭이 아래로 나열되어 있는 것을 볼 수 있을 것이다.
이러면 왼쪽 부분은 완성한 것이다. 이제 오른쪽 부분을 만들어 보자.
~/Web-Practice/style.css
...
.block2-1 {
width: 100%;
height: 150px;
margin-bottom: 30px;
background-color: lightblue;
}
.block2-2 {
width: 100%;
height: 630px;
background-color: lightblue;
}
왼쪽 부분 블럭을 설정할때와 동일하다.
2개의 블럭 모두 content2의 width 값을 따라야 하므로 width값을 100%로 지정한다.
그리고 위에서부터 height 값을 150px, 630px로 지정한다.
여기서 블럭 간격을 설정하기 위해 class명이 block2-1인 것에 margin-bottom: 30px를 넣어준다.
파일을 저장하고 실행시켜보면 2개의 블럭이 아래로 나열되어 있는 것을 볼 수 있을 것이다.
마지막으로 content1, content2의 height값이 같은지 확인해보자.
다르다면 속성값을 다르게 준 것이다.
이로써 Container 부분의 레이아웃 구성이 끝났다.
다음 페이지에서는 Footer 부분의 레이아웃을 구성해보자.
Last updated
Was this helpful?