Positioning
- Positioning은 시각적인 측면에서 HTML의 가장 중요한 요소
- HTML 내 부분 문서의 위치를 지정하거나 객체 (Object)의 보임/숨김(visibility)을 다룸
- 엘리먼트의 위치를 고정시키거나 브라우저의 크기에 따라 이동하는 등의 설정을 함
- 정적인 HTML을 JavaScript를 이용하여 동적으로 만들기 위한 가장 기본적인 속성
width, height
- length(길이 값) : px, pt, cm, mm, in 등의 길이 단위 사용
- 백분율(%) : 상위 block에 대한 백분율 단위로 상위 block의 크기가 바뀌면 자신의 크기도 자동으로 변경
- auto (width) : 100%
- 자신의 상위 block이 허용하는 width 크기만큼 채움
- auto (height) : 0%
- height를 결정하는 요인은 block box 속의 내용물의 크기
position
- static
- 기본 값으로 일반적인 내용물의 흐름
- top, right, bottom, left, z-index 속성에 아무런 영향을 받지 않음
- relative
- 요소를 일반적인 문서 흐름에 따라 배치
- parent를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
- 오프셋은 다른 요소에 영향을 주지 않음
- 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같음
- absolute
- 부모요소 or 가장 가까이 있는 조상 요소를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
- 부모 또는 조상 요소가 relative, absolute, fixed일 경우 적용
- 부모 또는 조상 요소가 static일 경우 document의 body를 기준으로 적용
- 다른 요소가 배치하려는 위치에 있더라도 밀리지 않고 덮어 쓰게 됨
- absolute 선언 시 block level 요소의 width는 inline과 같이 content에 맞게 변환 됨
- → 적절한 width를 지정해야 함
- relative의 경우 부모를 기준으로 위치되지만, absolute의 경우 body 어디든 위치 가능
- fixed
- 부모 또는 조상 요소와 관계 없이 브라우저의 viewport 기준으로 오프셋 적용
- 컨텐츠 내용이 많아 스크롤이 생기더라도 화면에서 사라지지 않고 같은 자리에 위치
- fixed 선언 시 block level 요소의 width는 inline과 같이 content에 맞게 변환
- → 적절한 width를 지정해야 함
top, left, bottom, right
- 사용법 : E {top: 길이값(length:px, cm) | 백분율(%) | auto}
- top, left, bottom, right 속성은 엘리먼트의 위치를 지정하기 위해 사용
- 자신이 포함되어 있는 박스 속에서 top, left, bottom, right에서의 거리를 지정하는 속성
- 각 <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
- 이미지 사이즈가 클 경우 이미지를 일부 가려서 표시하기 위해 사용
- 속성값으로 rect()에 명시된 사각형의 크기만큼 가려서 화면에 표시
- rect(top, right, bottom, left) 순으로 픽셀 값을 설정
- auto로 설정하면 이미지를 가리지 않고 모두 보여줌
visibility
- 엘리먼트를 화면에 보이거나 숨기기 위해서 사용
- 속성값을 visible로 설정하면 화면에 표시하고, hidden으로 설정하면 화면에서 숨김
- hidden으로 설정된 element는 화면에 표시되지는 않지만 면적은 차지하고 있음
- 화면에서 숨기고 면적도 차지하지 않도록 하기 위해서는 display 속성을 사용
z-index
- 사용법 : E {z-index: 정수 값}
- z-index 속성은 여러 개의 엘리먼트를 화면에 쌓아서 표시하기 위해 사용
- z-index 값이 큰 엘리먼트를 위에 표시
- z-index 값을 auto로 설정하면 부모 엘리먼트의 레벨과 같은 값으로 설정되며 이 값이 기본 값
