CSS3 - CSS 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning) (25)

CSS3 - CSS 스타일 -  position(포지션)속성의 정적 위치 설정 (static positioning) (25)

오늘은 CSS3의 스물 다섯번째 내용으로는 position(포지션)속성의 정적 위치 설정 (static positioning)에 대해서 알아 보도록 하겠습니다.

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

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

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

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

css 스타일 -  position(포지션)속성의 정적 위치 설정 (static positioning)이란?

먼저 position(포지션)속성의 정적 위치 설정 (static positioning) 이란

페이지의 정상적인 흐름에 따라 태그(요소)의 위치가 결정 되는 방법을 말한다.

솔직히 위와 같이 이렇게 설명하면 처음 보는 사람들은 이게 뭔말인지 하고

고개부터 절래절래 거릴 것이다. 

위에 내용을 좀더 구체적으로 표현 한다면 예를 들어 블록 (태그)요소가 박스처럼 

상(위), 하(아래)로 쌓이게 되고 인라인 (태그)요소는 한 줄에 차례대로 배치가 된다.

이때 위 정적 위치 설정을 사용하게 된다면 태그(요소)의 위치는

top(위), bottom(아래), left(왼쪽), right(오른쪽) 속성의 영향을 전혀 받지 않게 된다는

말이며 아래 간단한 예제 작성을 통해 좀더 알아보도록 하자.

1. 먼저 html문서의 body 부분에 위 와 같이 p태그(요소), div태그(요소)에

class(클레스)를 부여하며 작성 한다.

2. 두번째 위 첫번째 내용이 완성 되었다면 head 부분의 style 태그(요소)안에

위 와 같이 태그(요소)에 부여된 클레스를 선택 한 뒤 css를 작성한다.

- 여기서 두번째 부분에만 position 속성의 static 값이 들어간다.

- 추가로 각 클레스 one, two, three 의 background(배경색)은 임의로 아무거나 설정한다.

- 단 width(너비, 폭), height(높이)는 전체 동일하게 300px, 60px을 준다 (차이는 없지만)

3. 위 html 부분과 css부분을 동일하게 작성 하고 웹 브라우저로 출력 했을때 위 와 같이 나와야

정상 적으로 만들어진 것이다. 

화면상 두번째 클레스 부분에 position : static 라는 속성을 추가 했는데 특이한 점이 없다. 

4. 자 그럼 다시 css로 돌아와 두번쨰 클레스의 position : static 속성을 위와 같이 지우고

다시 웹 브라우저로 다시 출력을 해보도록 하겠다.

5. 다시 웹 브라우저로 출력을 해보았다.

css에서 position : static 속성을 넣거나 지우거나 해도 똑같다.

그 이유는 position을 static 속성 값으로 선언하게 되면 문서의 정상적인 흐름에

따라서 배치가 되는데 이러한 부분은 static 속성 값으로 선언하지 않은 것 과 같기

때문이다.

 여기까지 position 속성의 정적 위치 설정에 관련된 내용에 대해서 알아 보았다. 

 확실히 이렇게 보여주더라도 개념을 이해하기란 쉽지 않을 것이다. 

 하지만  계속 써보고 이것저것 해본다면 어느 순간 손에 익지 않을까 싶다. 

 이 다음 포스팅 부터는 상대 위치 설정에 관련된 내용에 대해서 알아 보도록 하겠다. 

이상 position(포지션)속성의 정적 위치 설정 (static positioning) (25)에

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