[CSS] 레이아웃 제작 (1)
빨간 박스 (900, 200)
파란 박스 (300, 200)
레이아웃을 제작하기 이전에 가장 먼저 해야할 일은 CSS에서 노멀라이징 작업이다.
어떤 작업을 시작하던지 가장 먼저 해야할 일이다.
노멀라이징 작업
/* 노멀라이징 */
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
/* 라이브러리 */
.cell {
float: left;
}
.row ::after {
clear: both;
display: block;
content: "";
}
먼저 빨간색 박스와 파란색 박스를 만들어보자.
잘못된 방법
얼핏 보기에 위와 같이 원하는 형태로 박스를 배치한 것처럼 보이나
창의 크기를 늘리면 화면이 아래와 같이 나온다.
위와 같이 하는 방법은 잘못된 방법이다.
해결 방법: box(div)를 감쌀 수 있는 큰 box(div)를 먼저 만들어야 한다.
!!! 빨간 박스와 파란 박스를 감싸고 있는 박스를 만들어주고 빨간, 파란 박스를 한번에 움직여줄 수 있도록 해야 한다. !!!
div태그를 생성한다. ( 클래스 이름을 wrap이라고 설정한다.)
wrap의 너비는 빨간, 파란 박스가 모두 들어갈 수 있는 크기로 설정한다.
. wrap에서 background-color는 지정을 안해도 되지만 위치를 확인하기 위해서 작성해본 것이다.
이제 박스가 생긴 것을 확인할 수 있다.
이제 박스를 가운데로 옮겨보자.
margin: 0 auto; (위 아래는 여백을 두지 않고, 좌우 여백은 서로 동일하게)
항상 가운데에 올 수 있는 박스를 만든 것이다.
만든 박스 안에 빨간, 파란 박스를 넣어보자.
그런데 파란색 박스가 빨간 박스 옆으로 오지 않았다.
그 이유는 div는 기본적으로 한 줄 전체의 영역을 차지하기 때문이다.
파란 박스를 빨간 박스 옆으로 배치하기 위해서는 float: left;를 빨간, 파란 박스에게 무조건 둘 다 지정해주어야 한다.
(float: left; 는 본인의 자리가 모자라면 밑으로 떨어지는 성질을 가지고 있다.)
빨간, 파란 박스에 개별적으로 float: left를 지정해주기 보다는 노멀라이징할 때 작성했던, 라이브러리에 넣은 cell이라는 클래스를
지정해주는 것이 더 편하다.
!!! 자식에 cell을 지정해주었으면 부모 요소에 row 클래스를 무조건 지정해주어야 한다. (외우기)!!!
이제 회색 박스를 만들어보자.
바깥에 있는 요소를 가운데로 지정해주면 안에 있는 요소들도 가운데로 배치된다.
위 스크린샷은 400 x 200의 같은 크기와 색깔의 박스들이 3개가 연속으로 생겨 하나처럼 보이는 상태이다.
이제 옆으로 붙게 만들어야 한다. - float: left; (cell이라는 클래스 추가)
부모: wrap2 (형제들을 감싸고 있는 것)
형제: gray-box
!!! 자식에 cell을 지정해주었으면 부모에 row라는 클래스를 무 조 건 지정해주어야 한다. !!!
이제 회색 박스에 흰색깔 border를 넣어준다. (마치 여백인 것처럼 보인다)
아래와 같이 코드를 작성하였더니 하나의 박스가 떨어져 보인다.
border와 padding은 본인의 덩치를 키워서 테두리를 만들고(border) 여백을 만드는(padding) 성질을 가지고 있다.
→ 본인의 덩치를 키우지 않게 하라면 box-sizing: border-box;를 추가한다.
box-sizing: border-box; (본인의 영역 안에서 border와 padding 알아서 처리한다는 의미)
이제 초록색 박스를 만들어보자.
일단 초록색 박스들을 담을 큰 박스부터 만든다.
이제 margin을 이용하여 초록색 박스에 여백을 준다.
margin-right 속성을 주면 아래와 같이 화면이 깨진다. (공간이 모자라면 밑으로 떨어지는 float: left;의 성질 때문)
그럼 이 문제를 어떻게 해결해야 할까? 너비를 줄여줄 수 있는 방법말곤 없다.
너비를 줄여보자.
위 스크린샷을 자세히 보면 마지막 초록색 박스도 여백이 들어가져 크기가 애매해진 것을 확인할 수 있다.
우선 여백을 몇으로 지정할지 정해야 한다. 위에서 10px씩 여백을 준다고 가정하자.
1200px - 30px(여백 총 3개) / 4 = 하나의 너비 값
(1200 - 30) / 4 = 292.5px
그래도 다시 박스가 밑으로 떨어진 것을 확인할 수 있다.
박스 하나의 너비 292.5px + 10px = 302.5px
302.5px * 4 = 1210px
10px이 넘쳐서 자리가 모자라므로 밑으로 떨어진 것이다.
해결 방법: 마지막 요소는 여백을 지정하지 않는다. - margin-right: 0 px;
최종 수정 코드
html
<div class="wrap row">
<div class="red-box cell"></div>
<div class="blue-box cell"></div>
</div>
<div class="wrap2 row">
<div class="gray-box cell"></div>
<div class="gray-box cell"></div>
<div class="gray-box cell"></div>
</div>
<div class="wrap3 row">
<div class="green-box cell"></div>
<div class="green-box cell"></div>
<div class="green-box cell"></div>
<div class="green-box cell"></div>
</div>css
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
.cell {
float: left;
}
.row ::after {
clear: both;
display: block;
content: "";
}
/* 스타일 */
.wrap {
width: 1200px;
height: 200px;
background-color: #ddd;
margin: 10px auto;
}
.wrap > .red-box {
width: 900px;
height: 200px;
background-color: red;
}
.wrap > .blue-box {
width: 300px;
height: 200px;
background-color: blue;
}
.wrap2 {
width: 1200px;
height: 200px;
/* background-color: #ddd; */
margin: 10px auto;
}
.wrap2 > .gray-box {
width: 393.3px;
height: 200px;
background-color: gray;
margin-right: 10px;
}
.wrap2 > .gray-box:nth-child(3) {
margin-right: 0;
}
.wrap3 {
width: 1200px;
height: 200px;
/* background-color: #ddd; */
margin: 10px auto;
}
.wrap3 > .green-box {
width: 292.5px;
height: 200px;
background-color: green;
margin-right: 10px;
}
.wrap3 > .green-box:nth-child(4) {
margin-right: 0;
}