TIL019 | 레이아웃 정리

김태규·2021년 8월 21일

1. 레이아웃이란

웹페이지에서 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제이다. CSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 여러가지 태그가 존재하고, 이를 이용해서 요소들을 하나의 논리적인 그룹으로 묶을 수 있다. 태그에 class나 id를 부여하여 CSS로 각각의 스타일을 적용할 수 있다.

(이미지 출처 : https://poiemaweb.com/css3-layout)
위의 예시처럼 레이아웃에는 여러가지 방법이 있지만, 공식이나 정답이 있는 것은 아니다.

2. Position 속성

html에 코드를 작성하면 코드가 위에서부터 순서대로 읽히기 때문에 페이지에도 컨텐츠가 코드의 순서대로 나오는 것을 알 수 있다. CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다.
Position 속성에는 4가지 있다.

position: static;
position: relative;
position: absolute;
position: fixed;

position: static
모든 HTML 요소의 position 속성의 기본 설정값(default값)은 static이다.

요소를 html 순서에 맞게 배치해주기 때문에 적용해도 아무런 변화가 없다.

position: relative
position: relative을 적용시킨 후, 위치를 이동시켜주는 top, right, bottom, left 프로퍼티로 원래의 위치를 기준으로 요소를 이동할 수 있다.

div1이 원래 위치 기준으로 위에서부터 100px 떨어지고, 왼쪽에서 50px 떨어진 것을 알 수 있다.

position: absolute
position: absolute 는 이름과 같이 요소를 절대적인 위치에 둘 수 있다. 기준이 되는 특정 부모에 대해 절대적으로 움직이게 된다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative 를 부여한다.
만약 기준이 될 부모가 없다면 body를 기준으로 삼게 된다.

기준이 될 부모태그가 없기 때문에 body를 기준으로 div1이 움직인 것을 확인할 수 있고, 크기가 줄어든 것도 알 수 있다.
원래 div태그는 block-element이기 때문에 가로크기가 부모 너비만큼 전부 차지해야 하는데, 마치 inline-element처럼 내용의 크기만큼만 너비가 생겼다.
이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다.

position: fixed
position: fixed 는 스크롤을 내리거나 올려도 요소의 위치를 브라우저의 원하는 위치에 고정시키고 싶을 때 사용한다. 또한 position: absolute 처럼 내용의 크기만큼만 가로크기가 된다.

스크롤을 내려도 div1은 현재 화면상 보이는 현재 위치에 고정된다.

3. Inline, Block, Inline-Block

inline
inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다. span, input, button, a, img 태그 등이 이에 해당한다.

inline 요소는 width, height, margin, padding 값을 지정할 수가 없다.

block
block 요소는 요소끼리 한 줄에, 옆에 위치할 수 없다. h1~h6, p, div, ol, ul, table 태그 등이 이에 해당한다.

block 요소는 width, height, margin, padding 값을 지정할 수 있다.

inline-block
inline-block 요소는 inline 의 특징과 block 의 특징을 동시에 가지고 있다.
기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. 하지만 inline 요소에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.