Container 내부 코드 작성
저번 시간까지 Container 가운데 정렬과 두 개의 Content div 를 만들었다.
이 페이지에서는 각 Content div 안에 박스를 만들 것이다.
~/Web-Practice/index.html
class명이 content1 인 div 안에는 3개의 박스를 만들 것이고,
content2 인 div 안에는 2개의 박스를 만들 것이다.
일단 index.html 파일에 div를 추가해보자.
~/Web-Practice/style.css
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
왼쪽 부분 블럭을 설정할때와 동일하다.
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?