[CSS] 레이아웃 정리(display, position)

Overview

예제 코드를 통해서 CSS의 속성 중 display 와 position 의 동작 방식을 정리한 포스트입니다.

display

CSS 의 display 속성은 태그를 inline 또는 block 타입으로 변경을 할수 있다.

예를 들어 아래와 같이 div 와 span 을 정의하였다고 할 때 div 는 기본적으로 block 타입 이고 span 은 inline 타입이다.

여기서 span 의 display 를 block 으로 선언하면 div 와 똑같이 한줄에 한 개 씩 표시가 된다.

그리고 div 를 inline-block 으로 변경하게 되면 한줄에 여러개의 블록이 표시가 된다.

추가적으로 div 를 inline 으로 변경하게 되면 아무것도 표시가 되지 않는데 그 이유는 inline 은 내부 컨텐츠를 꾸며주는 것이고 현재 div 에는 컨텐츠가 아무것도 없기 때문이다.

따라서 div 에 컨텐츠를 추가하면 span 처럼 화면에 표시가 되는 것을 볼수 있습니다.

position

position은 태그의 위치를 지정할 때 사용하는 속성이다.

static

예를 들어 아래와 같이 태그들이 존재할 때 container 의 위치를 left, top 를 사용해서 변경을 하려고 한다.

하지만 container 의 위치는 변경이 되지 않는데 그 이유는 positon 의 디폴트 값은 static 이며 static 의 의미는 position을 따로 지정하지 않는다 이다.

relative

따라서 position 을 static 에서 relative 로 변경을 하게 되면 노란색 container 의 위치가 오른 쪽에서 20px, 아래 쪽으로 20px 이동이 됨을 볼수 있다.

정리하자면 relative 는 원래 위치해야하는 포지션 기준으로 태그를 이동한다.

absolute

추가적으로 box 의 position 을 absolute 로 변경을 하게되면 아래와 같이 포지션이 container 기준으로 오른 쪽에서 20px, 아래 쪽으로 20px 이동이 됨을 볼수 있다.

정리하자면 absolute 는 현재 태그를 담겨있는 상자를 기준으로 태그를 이동한다.

fixed

box 의 position 을 fixed 로 변경하면 아래와 같이 창을 기준으로 오른 쪽에서 20px, 아래 쪽으로 20px 이동이 됨을 볼수 있다.

fixed 는 태그를 window 를 기준으로 이동을 시킨다.

sticky

box 의 position 을 sticky 로 변경하면 아래와 같이 스크롤을 할 때 사라지지 않고 상단에 계속 붙어있는 것을 볼수 있다.

Reference

youtube, 드림코딩 by 엘리