[CSS] 요소 위치 정하기

HTML으로 문서를 작성하고, 해당 문서의 위치 및 스타일은 CSS로 작성한다.

그렇다면, 요소의 크기는 무엇으로 결정하는가?

width, height 속성으로 요소의 너비와 높이를 설정한다.

기준 위치는 무엇으로 결정하는가?

바로 position 속성으로 결정한다.

CSS의 position 속성은 요소의 위치를 설정 방법을 나타낸다.

즉 '절대적인 위치' 설정이냐 아니면 '상대적인 위치' 설정이냐를 나타낸다.

즉, position속성을 설정하지 않으면, ( top, bottom, left, right) 속성을 아무리 설정해도 소용이 없다.

 

CSS에는 기본적으로 4가지의 위치 설정 방법이 존재한다.

1️⃣  정적 위치 설정(static positioning): 정상적인 흐름에 따른 배치

2️⃣. 상대 위치 설정(relative positioning): 정상적인 위치가 기준점이 된다.

3️⃣  절대 위치 설정(absolute positioning): 컨테이너의 원점이 기준점이 된다.

4️⃣  고정 위치 설정(fixed positioning): 윈도우의 원점이 기준점이 된다.

 

1️⃣  정적 위치 설정

👉  정적 위치 설정(static positioning)이란 페이지의 정상적인 흐름에 따라 요소의 위치가 결정 되는 방법이다.

즉, 블록 요소는 박스처럼 상하로 쌓이게 되고 인라인 요소는 한 줄에 차례대로 배치된다.

정적 위치 설정을 사용하면 요소의 위치는 top, bottom, left, right 속성의 영향을 받지 않는다.

 

 

2️⃣. 상대 위치 설정

👉  상대 위치 설정(relative positioning)은 정상적인 위치에서 상대적으로 요소가 배치되는 방법이다.

상대 위치에서 주의할 점은 요소의 정상적인 위치에 대하여 상대적이라는 점이다.

아래의 그림에서 노란색 블록은 원래의 정상적인 위치에서 오른쪽으로 100픽셀만큼 이동된 것이다.

상대 위치로 설정된 요소는 다른 요소 위에 겹쳐지거나 이동 될 수 있다.

상대위치설정 - CSS 코드

상대적으로 오른쪽으로 간 것을 확인 할 수 있다.

3️⃣  절대 위치 설정

👉   절대 위치(absolute positioning)는 전체 페이지를 기준으로 배치 하는 방법이다.

즉, 페이지의 시작 위치에서 top ,left , bottom, right 만큼 떨어진 위치에 배치된다.

앞의 코드에서 id="two"인 블록을 absolute로 지정하고 top, left 속성에 30픽셀을 지정하여 본다.

id="two"인 블록은 페이지의 시작 위치부터 (30,30)만큼 떨어진 위치에 block #2가 배치된다.

 

절대위치설정 - CSS 코드

절대 위치 설정 결과값

절대 위치로 설정 된 요소는 문서의 정상적인 흐름에서 제거되고 페이지 안의 고정된 위치에 표시된다.

또 top, left, bottom, right속성은 모두 오프셋(offset)으로 생각해야 한다.

즉, right 2px은 오른쪽으로 2px만큼 이동하라는 의미가 아니고 페이지의 오른쪽 경계선에서 2px만큼 떨어진 위치라는 의미이다.

 

만약 컨테이너가 있었다면, 컨테이너에 상대적으로 배치된다.

즉, 컨테이너의 시작 위치로부터 top, left, bottom, right만큼 떨어진 위치에 배치된다.

일반적으로 컨테이너는 relative으로 선언 되어야 한다.

static으로 선언되면 안된다.

 

 

컨테이너 안에 div 태그를 하면, 윈도우 창 기준이 아니라 컨테이너의 시작 기준으로 절대적 위치가 된다.

 

결과 이미지

4️⃣  고정 위치 설정

고정 위치(fixed positioning)란 브라우저 윈도우에 상대적으로 요소의 위치를 잡는 것이다.

윈도우가 스크롤 되낟고 하여도 화면에서 요소는 움직이지 않는다.