TIL no.2 - CSS 레이아웃

박준규·2019년 9월 30일

CSS CSS Layout TIL

CSS 레이아웃

1. display property

block

한줄을 전부 차지하는 엘리먼트.
대표적으로 <div>, <p>가 있으며, HTML5에서는 <header>, <footer>, <section> 등이 추가 되었습니다.

inline

컨텐츠의 크기 만큼만 차지하는 엘리먼트.
대표적으로 <span>이 있습니다.

none

평소엔 보이지 않다가 특정 조건을 만족한 경우 보이기 위해 일부러 감추둬야하는 컨텐츠의 경우, none을 사용합니다.

2. box model

box-sizing

width를 설정한 뒤, padding과 margin을 설정하면 예상한 width대로 출력되지 않
습니다.

.simple {
width: 500px;
margin: 20px auto;
}

.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}

이는 box-sizing 프로퍼티에 기본값인 content-box가 적용되었기 때문입니다.
width, height가 content 영역을 대상으로 삼고 있습니다.

그러므로 content, padding, border가 포함된 영역인 border-box를
box-sizing 프로퍼티 값으로 설정해주는 것으로 문제를 해결할 수 있습니다.

box-sizing: border-box;

을 사용해보겠습니다.

.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

border 까지의 영역을 대상으로 삼기때문에 훨씬 깔끔한 레이아웃을 완성할 수 있습니다.

3. position property

relative

포지셔닝 하는 것에 따라 기존 위치에서 다르게 위치가 조정됩니다.

.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}

fixed

화면에 고정된 위치에 놓고 싶을 때 사용합니다.

쇼핑몰의 카테고리 배너 / 애플 홈페이지 헤더 부분의 가로 리스트가 fixed에 해당합니다.

absolute

부모 엘리먼트가 없는 경우 문서 본문을 기준으로 삼습니다.

부모 엘리먼트가 relative 포지션을 가지고 있는 경우만 사용하는 것이 편합니다.

.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}

4. float와 clear

float

이미지 주위를 텍스트로 감싸기 위한 property

떠있는 이미지로 받아들이면 편합니다.

<div class="box">...</div>
<section>...</section>

HTML에서 이와 같이 box 다음 section이 있는 경우를 살펴보겠습니다.

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}

이처럼 box에 float를 사용하게 되면

이처럼 떠있는 형태의 레이아웃을 만들 수 있습니다.

clear

float를 사용해 떠있는 이미지를 감싸는 레이아웃을 피하기 위해서 사용합니다.

왼쪽(left), 오른쪽(right), 양쪽(both)에 있는 float한 요소를 비웁니다.

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}

.after-box 왼쪽(left)에 float 요소를 비우는 모습을 볼 수 있습니다.

5. clearfix

overflow

이와 같은 문제가 일어날 수 있습니다.
이때, overflow를 사용하면 쉽게 해결할 수 있습니다.

overflow: visible | hidden | scroll | auto | initial | inherit

visible: 박스를 넘어가도 보여준다.
hidden: 박스 사이즈를 넘는 부분은 보이지 않습니다.
scroll: 이미지 사이즈에 상관없이 스크롤바가 생깁니다.
auto: 이미지 사이즈에 따라 스크롤바 유무가 결정됩니다.
initial: 기본값으로 설정합니다.
inherit: 부모 요소의 속성을 상속합니다.

이 중 auto만 보자면,