CSS3 - CSS 스타일 - 태그(요소) 위치 지정하기 (24)

CSS3 - CSS 스타일 -  태그(요소) 위치 지정하기 (24)

오늘은 CSS3의 스물 네번째 내용으로 태그(요소) 위치 지정하기에 대해서 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 -  태그(요소) 위치 지정하기란?

먼저 css에서 태그(요소) 위치 지정하기란 말 그대로 태그의 위치를 스타일로 이동시키거나 정의 하는 내용으로 속성으로는 top(위), bottom(아래), left(왼쪽), right(오른쪽) 속성으로 사용이 되며

사용하는 방법은 아래와 같다.

<css에서 div 태그(요소) 선택뒤 top(위), left(왼쪽) 지정>

위 처럼 태그(요소)를 css에서 선택한 뒤 사용이 가능하며 굳이 태그가 아니더라도 앞서 배운 id, class를 선택해 사용해도 똑같이 적용된다.

 

다시 한번 말하자면 top, bottom, left, right 모두 컨테이너 경계선에서 오프셋(offset, 편차, 차이)이라는 점이며 즉 위와 같이 left:100px 이라고 한다면 왼쪽 경계선에서 처음 기준에서 100px 만큼 떨어진 곳으로 이동 하게 된다.

css 스타일 -  position 속성이란?

이 다음 으로는 위 에서 말한 처음 기준 위치에 관련된 내용인데 이러한 

기준 위치는 position 속성으로 결정 됩다.

하지만 css에서 position 속성은 다소 이해하기 어렵다 하는 사람들이 많기에

이번 포스팅에서는 어떠한 속성 값이 있는지 살짝 알아 보고 이 다음 포스팅 부터

position 속성의 값을 하나하나 파보도록 하겠다.

css에서는 기본적으로 position 속성으로 4가지의 위치 설정 방법이

있으며 이 내용은 아래와 같다.

1. 정적 위치 설정 (static positioning)

정적 위치 설정은 정상적인 흐름에 따른 배치를 말한다.

 

2. 상대 위치 설정 (relative positioning)

상대 위치 설정은 정상적인 위치가 기준점이 되는 것을 말한다.

3. 절대 위치 설정 (absolute positioning)

절대 위치 설정은 컨테이너의 원점이 기준점이 된다.

4. 고정 위치 설정 (fixed positioning)

고정 위치 설정은 윈도우의 원점이 기준점이 된는 것을 말한다.

 여기까지 position 속성의 속성 값에 대해서 간략하게 설명을 해보았다. 

확실히 위 말로는 이해가 가지 않을 것이 분명하기 때문에 아까도 이야기 했지만 

이 다음 포스팅 부터는 position의 속성 값인, static, relative, absolute, fixed 순으로  

하나하나 세세하게 알아 보도록 하겠다. 

이상 CSS3 - CSS 스타일 - 태그(요소) 위치 지정하기 (24)에

관련된 포스팅을 마치도록 하겠습니다.