[TIL-2 / CSS] 레이아웃의 모든 것

haejun-kim·2020년 7월 20일

HTML & CSS

목록 보기

2/3

페이지 레이아웃을 구성할 때 알아야하는 CSS 속성인 position, display, float에 대해서 알아보자.

Position

지금까지는 HTML과 CSS에 코드를 작성한 순서대로 웹 페이지에 출력되었다. 이제 Position 속성을 사용하여 HTML 파일상에서는 가장 아래있는 코드를 웹 페이지에선 가장 먼저 출력이 가능할 수 있도록 하는 부분을 공부해보자.

static

static이라 따로 설정해주지 않아도 기본적으로 설정되어 있는 값이다.
일단 모든 태그들은 처음에 position: static 상태다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓이는 위치를 의미한다. 거의 사용하지 않는다.

absolute

position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다.
어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 된다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.

일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 된다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

<p>에 노락색으로 배경을 칠했다.
원래 p태그는 block-element이기 때문에 가로크기가 부모 너비만큼 전부 차지해야 하는데,
마치 inline-element처럼 내용의 크기만큼만 너비가 생겼다. 이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다.

right: 0; 의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻이라 부모의 우측에 딱 붙어서 출력됐다.
bottom: 0;도 마찬가지다.

relative

position: relative; 자체로는 특별한 의미가 없다. 딱히 어느 위치로 이동하지는 않는다.

위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.

top, right, bottom, left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티다.

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

div.relative.top-20은 위로 20px 이동하고, 왼쪽에서 30px만큼 떨어졌다.

마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 된다.

fixed

말 그대로 고정됐다는 뜻. absolute는 relative를 가진 부모가 필요했는데 fixed는 필요가 없다.
fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.

body {
  background-color: #eee;
  height: 800px;
  padding-top: 48px;
}

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  background-color: rgba(45, 45, 45, 0.95);
}

img {
  position: absolute;
  left: 50%;
  margin-left: -10px;
}

header 태그에 position: fixed; 속성을 입력해줬다. 그리고 left, top, right로부터 떨어진 거리를 0으로 설정함으로써 브라우저의 상단에 딱 붙어있도록 하였다.

위의 코드를 실행시켜보면 스크롤은 움직여도 상단의 navigation bar 역할을 하는 부분은 브라우저의 상단에 고정되어있는 것을 확인할 수 있다.

display - inline, block, inline-block

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다.

inline

display속성이 inline으로 설정 된 엘리먼트는 전후 줄바꿈 없이 한줄에 다른 엘리먼트들과 나란히 배치된다.

대표적인 inline엘리먼트로는 <span>, <a>, <em>, <img>태그 등을 들 수 있다.
위의 그림으로 이해해보면 content5와 content6은 inline속성의 태그이기때문에 개행되지않고 한줄에 이어서 출력되었다. 이게 inline 속성이다.
inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것이다.
왜냐하면 해당 태그가 마크업하고 있는 content의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다.
또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있다.
상단의 그림에서 content1~4가 대표적인 예이다. 한줄로 나란히 정렬되지 않고 모두 개행되어 정렬되는것을 확인할 수 있다.

예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.
block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

inline-block

display속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.

대표적인 inline-block 엘리먼트로 <button>이나 <select> 태그 등을 들 수 있다.
하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.

최상단의 그림을 보면 content9는 block속성을 지닌 태그임에도 불구하고 개행되지 않고 inline속성처럼 한줄로 배치된것을 확인할 수 있다.

inline-block 엘리먼트는 명시적으로 해당 엘리먼트의 스타일을 display: inline-block로 지정해줘야한다.
inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.

float

position속성과 함께 요소의 위치를 결정하기 위한 속성

float은 css에서 정렬을 위해 사용되는 속성이다.
예를들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치할때도 사용할 수 있다.

float 속성값

float은 다음과 같은 속성을 갖는다.

none - 띄우지 않음(default)
left - 왼쪽에 띄움
right - 오른쪽에 띄움
initial - 기본값으로 설정
inherit - 부모 요소로부터 상속

주의: 절대위치니요소는 float속성을 무시한다.

float 사용예시

위의 사진을 보면서 float을 이해해보자.
#row1 #first, #row1 #second 는 float속성이 left로 설정되어 있어 결괏값을 보면 왼쪽으로 정렬되어있다. 이어서, row2 #first, #row2 #second는 float속성이 right로 설정되어 있어 오른쪽으로 정렬되어 있는 것을 확인할 수 있다.