CSS3 - CSS 스타일 - position(포지션)속성의 고정 위치 설정 (fixed positioning) (28)

CSS3 - CSS 스타일 - position(포지션)속성의 고정 위치 설정 (fixed positioning) (28)

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

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

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

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

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

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

먼저 position(포지션)속성의 고정 위치 설정 (fixed positioning) 이란 웹 브라우저 윈도우에서 상재거으로 태그(요소)의 위치를 잡는 것을 말하며 이러한 예로 윈도우 화면에서 스크롤을 한다고 해도 해당 태그(요소)는 화면에서 고정되어 움직이지 않는 것을 이야기 한다.

이번 포스팅에서 고정 위치 설정은 이 전의 포스팅에서 사용 하였던 코드와 조금 다르게 작업을 하여 고정 위치 설정이란 무엇인지 제대로 파악 하도록 하겠다.

1. 먼전 p태그(요소)로 위와 같이 첫번째 블럭에서 열다섯번째 블럭을 작성한다.

추가로 두번쨰 블럭에 p태그(요소)에 class = "two" 를 별도로 준다.

2. 두번째 css로 넘어와 위와 같이 p태그(요소)에 배경 속성과 가로(폭), 세로(높이)속성을 준다.

그 다음 두번째 블럭에 입력한 class = "two"를 선택하여 position:fixed; (고정 속성), background (배경색 속성), top(방향 위 속성), right(방향 오른쪽 속성)을 입력하고 웹 브라우저로 출력해본다.

3. 세번째 위 첫번째 html 부분과, 두번째 2css 부분을 똑같이 작성하여 웹 브라우저에 출력을 하였다면 위와 같은 화면이 나올 것이다. 

위 웹 브라우저에 실행 결과에서 보면 두번째 블록 만이 별도로 오른쪽으로 붙어 있으며 position 속성의 fixed (고정 속성 값) 때문에 스코롤 하고는 상관없이 항상 고정된 위치에 표시되는 것을 알 수 있다.

- 추가적으로 위 두번째 블럭에는 css에 별도로 width 폭(가로), height 높이(세로)를 입력 하지 않았는데도 위 p태그와 똑같은 크기를 하고 있다. 이 는 지금 사용하고 있는 소스 프로그램의 방식이 인터프리터 방식이기 때문이다.

인터프리터 소스 프로그램 방식은 다른 컴파일러 방식의 소스 프로그램과 달리 한단계씩 실행하는 방식인데 즉 소스 제일 위에서 아래로 한단계씩 쫘악 출력 한다는 이야기 이다.

그렇기 때문에 현재 위 웹 브라우저에 출력된 이미지에 있는 첫번째 블럭에서 15번째 블럭까지는 모두 같은 p태그(요소)이며 두번째 블럭에 class = "two" 를 넣어 css에서 별도로 선택 하였다 하더라도 css에서 p태그 선택자에 입력한 width와 , height 속성이 그 아래 .two 선택자에 없다면 그 속성을 그대로 상속 받는다. 

하지만 .two 에 별도로 width와, height 속성을 넣어 다른 크기로 준다면 아래와 같이 두번째 블럭만 크기가 변할 것이다.

4. 네번째 .two 속성에 width속성, height속성을 입력 후 값은 위 p태그 선택자의 width속성과 height속성 값의 2배를 준다.

5. 다섯번째 두번째 블럭만이 크기가 변했다. 

두번째 블럭이 스크롤하고도 상관없이 항상 고정되는건 동일하다.

 여기까지 고정 위치 설정에 대해서 간략하게 한번 알아 보았다. 

 추가로 고정 위치 태그(요소)는 다른 태그(요소)와 중첩이 될 수 있으며 다른 태그(요소)는 고정 위치 

태그(요소)가 없는 것처럼 배치가 된다. 

 또 절대 위치그리고 고정 위치는 어떠한 차이점이 있는데 이는 절대위치는 컨테이너에서 고정된 위 

 치에 배치되지만 고정 위치는 현재 윈도우에서 고정된 위치에 배치 된다는 차이점이 있다. 

이상 position(포지션)속성의 고정 위치 설정 (fixed positioning) (28)에

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