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;
}

boxmodel1.JPG

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

boxmodel3.JPG

그러므로 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;
}

boxmodel2.JPG

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

3. position property

relative

  • 포지셔닝 하는 것에 따라 기존 위치에서 다르게 위치가 조정됩니다.
  .relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative.JPG

fixed

  • 화면에 고정된 위치에 놓고 싶을 때 사용합니다.
  • 쇼핑몰의 카테고리 배너 / 애플 홈페이지 헤더 부분의 가로 리스트가 fixed에 해당합니다.

absolute

  • 부모 엘리먼트가 없는 경우 문서 본문을 기준으로 삼습니다.
  • 부모 엘리먼트가 relative 포지션을 가지고 있는 경우만 사용하는 것이 편합니다.
  .relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

absolute.JPG

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를 사용하게 되면

float.JPG

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

clear

  • float를 사용해 떠있는 이미지를 감싸는 레이아웃을 피하기 위해서 사용합니다.
  • 왼쪽(left), 오른쪽(right), 양쪽(both)에 있는 float한 요소를 비웁니다.
  .box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

clear.JPG

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

5. clearfix

overflow

clearfix1.JPG

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

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

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

이 중 auto만 보자면,

  .clearfix {
  overflow: auto;
  }

clearfix2.JPG

이렇게 문제가 해결되는 것을 볼 수 있습니다.