[CSS] 21. Positioning ( 포지셔닝, 위치 )

이번 포스팅에서는 CSS를 이용한 위치 설정에 대해서 알아보도록 하겠습니다.

 

우선 CSS에서 제공하는 위치 관련 속성은 position이 있습니다.

 

그리고 위치는 크게 절대위치와 상대위치가 있습니다.

 

그럼 하나씩 알아보도록 할까요? 

Relative Positioning:

상대 위치 설정에서 사용되는 하위 속성으로는 top, bottom, left와 right가 있습니다.  

top과 left의 속성값이 마이너스 (- ) 숫자를 사용함으로서 bottom과 right를 표현할 수 있습니다. 

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.

 

다음 예제를 보시죠.

<div style="position:relative;left:80px;top:2px; background-color:yellow;"> This div has relative positioning. </div>

This will produce following result:

This div has relative positioning.

 

Absolute Positioning:

절대 포지셔닝은 특정 위치에 항상 위치할 수 있도록 고정시키는 것이죠.

상대 포지셔닝처럼 top, left, bottom, right 모두 사용가능합니다. 사용방법도 동일하죠.

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.

 

다음 예제를 보시죠.

<div style="position:absolute;left:80px;top:20px; background-color:yellow;"> This div has absolute positioning. </div>

 

결과는 직접 테스트해보시고 보도록 하세요. ^_^ 

Fixed Positioning:

고정 포지셔닝은 자칫 잘못 이해하면 절대 포지셔닝과 동일하다고 생각하실 수 있는데 이 고정 포지셔닝은 상대 + 절대 포지셔닝이라고 생각하시면 됩니다. 고정 포지셔닝은 눈으로 보여지는 화면의 특정 위치에 고정시키는 것입니다. 스크롤링이 있더라도 무조건 화면의 특정위치에 보이도록 하는 속성이죠.

역시 상대, 절대 포지셔닝처럼 top, left, bottom, right 속성을 사용할 수 있으며 사용방법도 동일합니다. 

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.

 

다음 예제를 보시죠. 

<div style="position:fixed;left:80px;top:20px; background-color:yellow;"> This div has fixed positioning. </div>

 

결과는 직접 테스트해보시고 보도록 하세요. ^_^

 

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_positioning.htm