[CSS] display와 position 이해하기

1. display

display 는 block이냐 inline이냐를 결정짓는 태그

* block이란

이렇게 옆에 자리가 충분히 있음에도 불구하고

아래로 배치하는 속성

 

* inline이란

옆으로 배치되는 속성

 

 

기본적으로 상자를 만드는데 <div>와 <span>이 있다.

<div>는 block으로 만들어지고 <span>은 컨텐츠를 기준으로 만들어진다.

<div>와 <span>을 같은 조건으로 만들었을 때

<span>은 보이지 않는다.

 

 

<span> 은 안에 내용이 있어야 보여진다.

 

 

 

그래서 <div>는 내용이 없어도 width, height를 정한 만큼 생성되지만 <span>은 width와 height를 무시하고 컨텐츠 크기만큼 그려진다.

그리고 <div>는 아래로 한개씩 만들어지고(block), <span>은 옆으로 쭉 만들어진다.(inline)

 

 

이때, 

<div> → <span> 또는 <span> → <div>로 변경하려면 display를 사용한다.

 

 

 ① display: block;

: block이고 아래로 쭉 만들어짐 (div)

 

 

② display: inline-block

: block인데 옆으로 쭉 만들어짐

 

 

③ display: inline;

: 컨텐츠 크기에 맞춰서 옆으로 쭉(span)

(span처럼 변경되니 안에 내용이 있어야만 보여짐)

 

 

 

2. position

position 기본은 static이라서 top, left 변화를 주어도 변경되지 않음

 

변경하고 싶을때 relative, absolute를 사용

 

 

① position: relative;

: 원래 본인의 자리에서 움직임

 

 

② position: absolute;

: 가장 가까운 바깥 박스를 기준으로 움직임 - position이 static이 아닌 부모를 기준으로 찾아감

(여기서는 노란색 .container 박스 기준)

 

 

③ position: fixed;

: 완전히 벗어나서 웹페이지 기준으로 움직임

 

④ position: sticky;

: 원래 자리에 있다가 스크롤했을 때 넘어가지 않고 계속 붙어있음

(지금 스크롤 내린상태)

 

 

 

 

 

참고 : 드림코딩 유튜브