TIL 41 (2020.09.15) CSS layout

목차

1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block 에 대해서
3. float에 대해서

1. position 속성: relative, absolute, fixed

css의 position 속성은 박스의 위치를 설정해 레이아웃을 배치하는 것에 사용된다.

position 속성은 총 4개의 속성값을 지닌다. static, relative, absolute, fixed.

이 중 static은 기본값으로 위치정보를 지니고 있지 않은 값이기 때문에 제외하고,
relative, absolute, fixed에 대해 정리하고자 한다.

relative 속성값

relative 속성값은 그 자체로는 어떤 위치정보도 가지지 못한다.

따라서 top, right, bottom, left 속성과 함께 쓰일 때, 원래 위치에서 이동할 수 있다.
(top, right, bottom, left 속성은 position 속성이 있을 때만 적용되는 점을 기억하자.)

absolute 속성값

absolute 속성값은 가장 가까운 부모 태그의 위치에 따라 상대적으로 위치를 지정한다.

따라서 만약 부모 태그의 position 값이 지정되지 않았거나 position: static;가 지정된 상태라면,
absolute 속성값을 가진 태그는 '문서 본문'을 기준으로 상대적인 위치에 배치된다.

또한, absolute 값을 가진 태그는 div, p 태그와 같이 block level element라도 inline element 처럼 내용의 크기만큼만 너비를 가진다.
(block level element는 한 줄 전체를 차지하고, inline element는 내용만큼만 차지한다. 이 부분은 2번 목차에서 자세히 언급할 예정이다.)

fixed 속성값

fixed 속성값은 viewport에 상대적으로 위치가 지정되기 때문에, 페이지가 스크롤 되어도 늘 같은 곳에 위치한다. (뷰포트는 전체 문서의 보이는 부분을 뜻한다.)

대표적인 예로 쇼핑몰 사이트 상단에는 쇼핑몰 이름과 메뉴 등이 있는 긴 박스가 있다. 그 박스는 스크롤을 내려도 항상 그 자리에 있다.
그 박스가 바로 fixed된 navigation bar이다.

(다만, 아직 모바일 브라우저에서는 fixed element의 지원이 불안정하다. 디버깅을 여러 번 해서 최대한 안정되게 구현되도록 해보자.)

2. inline, inline-block, block 에 대해서

앞서 absolute 속성값에서 간단히 언급한 것과 같이, inline과 block은 서로 다른 성질을 갖고 있다.

inline

inline 요소는 내용의 크기만큼만 너비가 결정된다.
따라서 어떤 글 사이에 inline element가 있을 경우, 그 글 사이에 inline 내용이 출력된다.

대표적인 태그로 span, a가 있다.

block

blcok 요소는 새로운 줄에서 시작하고, 좌우로 무한히 늘어난다.

대표적인 태그로 div, p, form이 있으며, HTML5에서 추가된 header footer section도 block element이다.

inline-block

inline 성질을 가진 요소를 block 성질을 가지도록,
혹은 block 성질을 가진 요소를 inline 성질을 가지도록 설정할 수 있다.

• inline 성질로 변경하는 속성은 display와 float이다.
  display: inline-block; 이런 css 속성을 입력하면 block element라도 inline element처럼 작동한다.

• block 성질로 변경하는 속성은 display이다.
  display: block; 이런 css 속성을 입력하면 inline element라도 block element처럼 작동한다.

주의할 점이 하나 있다.

inline-block 요소는 vertical-align 속성의 영향을 받는다.
vertical-align 속성은 inline element를 수직 정렬을 지정하는 속성으로서, 대게 vertical-align 속성은 top으로 설정한다.

또한, inline-block을 사용할 때는 각 칼럼의 너비를 설정해줘야 한다.
만약 HTML에서 각 inline-block 요소 사이에 빈칸이 있으면, 요소 간에 틈이 출력된다.

3. float에 대해서

float 속성에 대해 설명하기 전, 레이아웃에 대해 간단히 알아보자.

정보를 배치하는 레이아웃을 짜는 것은 정보의 가독성에 직접적으로 관여하기 때문에 굉장히 중요하다.

이전에 자주 사용되던 table을 통해 레이아웃을 짜는 방법은 '반응형 웹 구현이 어렵고' '코드가 복잡해서'
지금은 잘 사용되지 않는다.

대신 block level elements와 css를 통해 레이아웃을 구성하는 방법이 현재 자주 사용되고 있다.

바로 이 레이아웃을 구성할 때, float 속성이 핵심적으로, 자주 사용된다.

float의 특성과 속성값

float 속성은 어떤 element가 텍스트나 inline element에 둘러쌓여 존재하도록 한다.
뉴스의 레이아웃 배치처럼 이미지 주위를 텍스트로 감싸기 위해 만들어졌다.

float 속성은 left, right, none 중 하나를 값으로 가질 수 있다.
(none은 기본값이다.)

또한, float 성질을 가진 태그는 부모 태그에 맞춰 크기가 조절되기 때문에 width: n% 처럼 크기를 조정할 수 있다.

float: left;을 가진 element는 다른 element 내의 왼쪽에 위치한다. (왼쪽 부분에 떠있는 것처럼 보인다.)

float: right;을 가진 element는 다른 element 내의 오른쪽에 위치한다. (오른쪽 부분에 떠있는 것처럼 보인다.)

이 속성을 이용하면, 박스 안에 박스가 있는 모양새나 nav bar 등을 간편하게 만들 수 있다.

만약 float 속성을 가진 element와 다른 element가 더이상 겹치지 않게 하고싶으면, clear 속성을 부여한다.
clear: none/rigth/left/both clear 속성이 지정된 element부터는 float가 적용되지 않는다.

float 속성의 단점 및 해결방법

단점 1: float 요소는 부모 태그가 float 요소의 높이를 인지할 수 없다는 단점이 있다.

해결 1: 따라서 부모태그에 overflow: hidden;을 지정하거나, 부모태그도 float 시키는 방법으로 단점을 상쇄한다. (float은 block 성질을 없애기도 한다. 그런 경우 width: 100%;을 추가해 해결한다.)

단점 2: 작은 박스를 여러 개 배치할 때 float:left/right로 지정한 후 float 성질을 끝내고 싶으면,
그 다음 태그에 clear 속성을 줘야하기 때문에 코드가 간결하지 않다.

해결 2: 박스 여러 개를 배치할 때 display: inline-block;를 사용한다.

float로 nav bar 만들기

방법 1

nav {
  float: left;
  width: 200px;
}

방법 2

nav {
  float: left;
  width: 25%;
}

(이 방법은 창의 너비가 좁을 때, 가독성이 떨어질 수 있다. )

방법 3

• media query

반응형 디자인을 설정하는 도구로서, 브라우저 및 디바이스에 반응하는 사이트를 구현해준다.

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }

@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}