CSS 포지셔닝

포지셔닝
포지셔닝(Positioning)은 시각적인 측면에서 HTML의 가장 중요한 요소이다.
HTML 내 부분 문서의 위치를 지정하거나 객체(Object)의 보임과 안보임(visibility)을 다룬다
엘리먼트의 위치를 고정시키거나 브라우저의 크기에 따라 이동하는 등의 설정을 한다.
정적인 HTML을 JavaScript를 이용하여 동적(Dynamic)으로 만들기 위한 가장 기본적인 속성

포지셔닝 - width, height
length(길이, 값) : px, pt, cm, mm, in등의 길이단위 사용
백분율(%) : 상위 block에 대한 백분율 단위로 상위 block의 크기가 바뀌면 자신의 크기도 자동으로 변경
auto (width의 경우) : 100%, 자신의 산위 block이 허용하는 width 크기만큼 채운다.
auto (height의 경우) : 0%, 이 경우  height를 결정하는 요인은 block box속의 내용물의 크기가 된다.

포지셔닝 - position
static : 기본(default)값으로 일반적인 내용물의 흐름. 상단9top)과 좌측(left)에서의 거리를 지정할 수 없다.
relative : HTML 문서에서의 일반적인 내용물의 흐름을 말하지만 top, left 거리를 지정
absolute : 자신의 상위 box속에서의 top, left, right, bottom등의 절대적인 위치를 지정
fixed : 스크롤(scroll)이 일어나도 항상 화면상의 지정된 위치에 있다.

포지셔닝 - position : static
static position
HTML 요소의 위치를 결정하는 방식 중 기본값
요소를 일반적인 문서 흐름에 따라 차례대로 배치 → 작성된 순서 그대로 배치 (좌측상단 기준)
top, right, bottom, left, z-index 속성에 아무런 영향을 받지 않음
포지셔닝 - position : relative

포지셔닝 - position : relative
relative position
요소를 일반적인 문서 흐름에 따라 배치하고, parent를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
오프셋은 다른 요소에 영향을 주지 않음
페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같음

포지셔닝 - position : absolute
absolute position
부모요소 또는 가장 가까이 있는 조상 요소를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
부모 또는 조상 요소가 relative, absolute, fixed일 경우 적용되며, static일 경우 document의 body를 기준으로 적용
다른 요소가 배치하려는 위치에 있더라도 밀리지 않고 덮어 쓰게 됨
absolute 선언 시 block level 요소의 width는 inline과 같이 content에 맞게 변환 됨. → 적절한 width를 지정해야 함
relative의 경우 부모를 기준으로 위치되지만, absolute의 경우 body의 어디든 위치 가능

포지셔닝 - position : fixed
fixed psotiion
부모 또는 조상 요소와 관계 없이 브라우저의 viewport를 기준으로 오프셋 적용
컨텐츠 내용이 많아 스크롤이 생기더라도 화면에서 사라지지 않고 같은 자리에 위치
fixed 선언 시 block level 요소의 width는 inline과 같이 content에 맞게 변환 됨. → 적절한 width를 지정해야 함

포지셔닝 - top, left, bottom, right
top, left, bottom, right 속성은 엘리먼트의 위치를 지정하기 위해 사용
자신이 포함되어 있는 박스 속에서의 top, left, bottom, right에서의 거리를 지정하는 속성
사용법은 “E { top: 길이 값(length:px,cm) | 백분율(%) | auto }” 이다.
각 <div> 엘리먼트의 position 속성이 absolute로 설정이 되어있기 때문에 절대적인 위치 지정 가능

포지셔닝 - overflow
overflow 속성은 상위 엘리먼트에 속한 내용이 엘리먼트의 크기보다 클 경우 어떻게 처리할 것인지 설정
속성값을 visible로 설정하면 box속의 내용을 모두 표시, 내용의 크기에 따라 box의 가로, 세로 폭이 늘어남
속성값을 hidden으로 설정하면 box의 width, height를 지정했을 경우, 지정된 범위를 넘치는 내용은 보이지 않는다.
속성값을 auto로 설정하면 지정된 범위를 넘치는 내용은 스크롤바를 이용하여 표시

포지셔닝 - float
float 속성은 박스가 화면의 어느 위치에 배치할 것인지를 설정하기 위해 사용
속성값을 left로 설정하면 그림이나 박스가 왼쪽에 배치되고, 글씨는 박스의 오른쪽으로 흐른다.
속성값을 right로 설정하면 그림이나 박스가 오른쪽에 배치되고, 글씨는 박스의 왼쪽으로 흐른다.
속성값을 none으로 설정하면 그림이나 박스가 왼쪽에 배치되고, 글씨는 첫 줄만 박스의 오른쪽으로 흐른다.

포지셔닝 - clear
clear 속성은 float 속성이 가지고 있는 값을 초기화 하기 위해 사용
속성값을 left, right로 설정하여 왼쪽 또는 오른쪽 float 속성값을 취소할 수 있다.
속성값을 both로 설정하여 양쪽 모두의 float 속성값을 취소할 수 있다.
속성값을 none으로 설정하면 clear를 설정하지 않은 것과 같다.

포지셔닝 - clip
clip 속성은 이미지 사이즈가 클 경우 이미지를 일부 가려서 표시하기 위해 사용
속성값으로 rect()에 명시된 사각형 크기만큼 가려서 화면에 표시
rect(top, right, bottom, left)순으로 픽셀 값을 설정
auto로 설정하면 이미지를 가리지 않고 모두 보여줌

포지셔닝 - visibility
visibility 속성은 엘리먼트를 화면에 보이거나 숨기기 위해서 사용
속성값을 visible로 설정하면 화면에 표시하고 hidden으로 설정하면 화면에서 숨김
hidden으로 설정된 엘리먼트는 화면에 표시되지는 않지만 면적은 차지하고 있음
화면에서 숨기고 면적도 차지하지 않도록 하기 위해서는 display속성을 사용

포지셔닝 - z-index
z-index 속성은 여러 개의 엘리먼트를 화면에 쌓아서 표시하기 위해 사용
사용법은 “E { z-index: 정수 값(양수, 음수가능)) }” 이다.
z-index 값이 큰 엘리먼트를 위에 표시
z-index 값을 auto로 설정하면 부모 엘리먼트의 레벨과 같은 값으로 설정되며 이 값이 기본값이다.

요약
CSS 선택자는 HTML문서 내에서 스타일을 적용하고자 하는 element를 선택
일반 선택자, 복합 선택자, 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재
포지셔닝 속성은 HTML문서 내에서 element의 화면배치나 스크롤 여부 등을 설정
font 속성은 글꼴, 크기 등의 글자 꾸밈을 담당
text 속성은 여백, 들여쓰기, 정렬 등의 공간 설정 기능을 담당