CSS3 - CSS 스타일 - position(포지션)속성의 절대 위치 설정 (absolute positioning) (27)

CSS3 - CSS 스타일 - position(포지션)속성의 절대 위치 설정 (absolute positioning) (27)

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

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

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

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

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

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

먼저 position(포지션)속성의 절대 위치 설정 (absolute positioning) 이란 전체 페이지를 기준으로

배치하는 방법을 말하는 속성인데 이러한 말은 즉 좀더 자세히 말하면 페이지의 시작 위치인 top(위), left(왼쪽), bottom(아래), right(오른쪽) 만큼 떨어진 위치에 배치된는 방법을 말한다.

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

css에서 두번째 선택자 .two에 "position: absolute;", "top: 50px;", "left: 50px;" 을 추가 하여 

어떠한 변화가 일어나는지 알아 보도록 하자.

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

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

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

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

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

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

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

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

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

4. 이 다음은 위에서 작성한 css에서 선택된 .two에 위와 같이 "position: absolute;", "top: 50px;", "left: 50px" 속성과 속성 값을 추가 하고 다시 웹 브라우저로 출력해 본다.

5. 출력을 하고나면 위와 같이 두번째 블럭이 페이지 시작 위치부터 위 50px, 왼쪽 50px 만큼

떨어진 위치에 배치가 된다.

즉 절대 위치로 설정된 태그(요소)는 문서의 정상적인 흐름에서 제거되고 페이지 안의 고정된 위치에 표시가 되며 이러한 top, left, bottom, right 같은 방향 속성은 모두 오프셋(offset)으로 생각해야 한다.

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

 절대위치에서 주의해야할 사항은 top : 50px 위에서 50px 만큼 left : 50px 은 왼쪽에서 50px 만큼 

 이동하라는 의미가 아니며 정확히 말해 "페이지의 위쪽 경계선에서 50px만큼 떨어진 위치"를 의미  하는 것이다. 

 

이상 position(포지션)속성의 절대 위치 설정 (absolute positioning) (27)에

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