CSS_Position

오늘은 포지션에 대해서 포스팅을 하겠습니다!

포지션이란 위치를 말하는거죠^^ㅎㅎ

이번에는 Static 과 Relative 에 대해 알아보겠습니다.

먼저 Static을 알아보도록 하겠습니다.

Static은 "고정된"이라는 의미를 가지고 있으며

HTML에서 기본으로 설정이 되어있는 값 입니다.

위에서 보시는바와 같이 static을 설정해 놓으면 저희가 원래 알고있던 결과 값이랑 동일하게 나타나게되죠?

이제 다시 코딩을 해보도록 하겠습니다.

 

소스가 이해 가시죠....?

Default 라는 컨텐츠가있는 div안에 Relative 라는 컨텐츠가있는 div를 넣었습니다!

아래 body태그의 내용은 위와 똑같고

id 값에 변화를 주었습니다!!

left:80px; 

top:100px; 를 추가했더니!

Default 컨텐츠가 들어있는 div를 기준으로 왼쪽으로 80px만큼, 위쪽에서 100px만큼 떨어진걸 확인 하실 수 있습니다!!

이렇게 별도의 위치(?)를 선정할때는 position 속성을 쓴다는것! 잊지마세요^^ㅎㅎ

다음 알려드릴 포지션은 Absolute 입니다.

relative 와는 다르게

Absolute는 HTML전체 페이지에서의 위치를 기준으로 하게 됩니다.

그래서 완전히 따로 논다고(?) 보실 수 있습니다.

보시는 바와 같이 absolute는 따로 모든것을 다 지정해 주어야 합니다!

다음은 마지막 포지션인 Fixed 입니다!!

fixed 는 스크롤과 독립적으로 고정시키는 것을 말하는데요!

음...위에나 아래에 무조건 고정(?)시키는 것이라고 보시면 됩니다!!

fixed를 쓰게 되면 스크롤에 독립적으로 스크롤을 계속 내려도 따라 내려오는거 보이시죠? 

이렇게 메뉴 같은거 설정할때 fixed를 쓰시면 될거같아요!!ㅎㅎ