css 13. position / display

웹페이지상에서 레이아웃을 구성할 때 사용되는

position과 display 개념에 대해 정리해보고자 한다.

position

 

position은 복잡한 레이아웃을 만들기 위해서는 사용되는 속성이다.

포지션 속성을 사용하여 요소를 원하는 위치에 지정할 수  있다.

1. relative

relative는 별도의 속성을 지정하지 않는 이상 static과 동일하게 동작한다.

top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다.

다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것이다.

 

2. absolute

absolute는 가장 다루기 까다로운 위치 지정 값이다.

 

뷰포트에 상대적으로 위치가 지정되는 게 아니라, 

가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을

제외하면 fixed와 비슷하게 동작하는 속성이다.

 

절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면

문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.

"위치가 지정된" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킨다.

 

3. fixed

고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데,

이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다.

relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.

 

*static은 기본값이다.

display

 

display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 속성이다.

대부분의 태그는 display속성값으로 보통 block이나 inline을 가지고 있다.

1. inline

인라인 엘리먼트는 줄바꿈이 일어나지 않는다.

ex. span, a 등

 

2. inline-block

inline-block 속성은 inline , block 둘의 속성을 가진다.

 

인라인레벨처럼 줄바꿈이 이루어지지 않고, width와 height를 지정 할 수 있다.

만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

 

3. block

블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어나는 속성값이다.

ex. div, p, form, header, footer, section 등

 

블록 레벨 엘리먼트의 width를 설정하면

컨테이너의 좌우 가장자리로 늘어나지 않게 할 수 있다.

 

좌우 마진을 auto로 설정한다면,

해당 엘리먼트를 컨테이너 안에서 가로 중앙에 오게 할 수 있다.

 

#main {
  width: 600px;
  margin: 0 auto; 
}

 

 

4. none

엘리먼트를 보이고 감추는 데 흔히 사용되는 속성이다.

 

참고자료

 

mdn

 

https://ko.learnlayout.com/position.html

CSS - 사이트 소개