CSS3 - CSS 스타일 - position(포지션)속성의 상대 위치 설정 (relative positioning) (26)

CSS3 - CSS 스타일 - position(포지션)속성의 상대 위치 설정 (relative positioning) (26)

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

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

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

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

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

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

먼저 position(포지션)속성의 상대 위치 설정 (relative positioning) 이란 정상적인 위치에서

상대적으로 요소가 배치되는 방법을 말한다.

이번 포스팅에서 상대 위치 설정은 이 전 포스팅에서 사용 하였던 코드를 그대로 사용하며

css에서 두번째 선택자 .two에 "position: relative;", "left: 50px;" 을 추가 하여 변화가 되는지 알아 보도록 하자.

1. 먼저 이 전 포스팅에서와 같이 html문서의 body 부분에 위 와 같이 

p태그(요소), div태그(요소)에 class(클레스)를 부여하며 똑같이 작성 한다.

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

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

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

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

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

3. 여기까지 위 html 부분과 css부분을 동일하게 작성 하고 

웹 브라우저로 출력 했을때 위 와 같이 나와야 정상 적으로 만들어진 것이다.

4. 이 다음은 위에서 작성한 css에서 선택된 .two에 위와 같이 "position: relative;", "left: 50px" 

속성과 속성 값을 추가 하고 다시 웹 브라우저로 출력해 본다.

 

5. 출력을 하고나면 위와 같이 두번째 블럭이 왼쪽에서 50px 이동이 된다.

즉 "position: relative;", "left: 50px" 속성을 추가함으로 정상적인 위치에서

왼쪽으로 50px 이동된 다는 뜻이다.

 여기까지 상대 위치 설정에 대해서 알아 보았다. 

 상대위치에서 주의해야할 사항이 있는 이러한 점은 태그(요소)의 정상적인 위치에 대항 상대적이라  는 점이라고 한다. 또 위 실습에서 녹색 블록은 원래의 정상적인 위치에서 왼쪽으로 50px 이동된 것  인데 상대 위치로 설정된 태그(요소)는 다른 태그(요소) 위에 겹쳐지거나 이동 될 수도 있다. 

 단 태그(요소)를 위해 할당되어진 공간은 사라지지 않는다. 

이상 position(포지션)속성의 상대 위치 설정 (relative positioning) (26)에

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