10. 위치 속성

-기본 흐름 : 블록 성격이면 줄 바꿈이 되서, 인라인 성격이면 수평으로 요소가 배치되는 것

-위치 속성 : 기본 흐름에서 벗어나 원하는 곳에 배치해주는 속성

1. position 속성

- HTML 요소를 기본 흐름에서 벗어나 좌표에 따라 배치할 때 사용

/* 형식 */
position:속성값;

-사용가능한 속성값은 다음과 같음

static : 요소를 기본 흐름에 배치(기본값)

relative : 요소를 좌표에 따라 배치, 기준점이 요소의 왼쪽 위 모서리

사용가능한 좌표 속성명은 다음과 같다

• top : 위쪽을 기준으로 좌표 지정
• right : 오른쪽을 기준으로 좌표 지정
• bottom : 아래쪽을 기준으로 좌표 지정
• left : 왼쪽을 기준으로 좌표 지정
• z-index : position 속성이 적용된 요소의 z축 위치 결정, z값이 큰게 페이지에서 위로 온다 기본값은 0 (형식) z-index:정숫값

absolute : relative와 비슷하지만, 기준점이 웹 사이트의 왼쪽 위 모서리

fixed : absolute와 비슷하지만, 스크롤해도 그 위치에 고정되어있음

sticky : 스크롤 잘 되다가 일정 지점이 되면 fixed처럼 작동(고정됨)

2. float 속성

- 요소의 화면 배치를 조절

/* 형식 */
float:속성값;

속성값은 다음과 같다

• none: float 속성 적용 안함
• left : 요소를 공중에 띄우고 왼쪽에 배치하고 다음 요소를 주변에 자연스럽게 배치
• right :  요소를 공중에 띄우고 오른쪽에 배치하고 다음 요소 주변에 자연스럽게 배치

ex) 이미지 요소와 텍스트 요소가 같이 사용될 때, 블록 요소를 인라인 요소처럼 배치에 사용

특징) float 속성이 적용되면 width가 지정되지 않아도 요소가 가팆고 있는 콘텐츠만큼 너비가 조정됨

주의점) float 속성 사용시 자식 요소를 부모 요소가 제대로 인식하지 못함

3. clear 속성

-float 속성 해제에 사용

- 속성이 들어있는 요소는 float 속성이 들어있는 요소들의 영향을 받지 않음

/* 형식 */
clear:속성값;

속성값은 다음과 같다

• left : float 속성의 left값 해제
• right : float 속성의 right값 해제
• both : left, right를 모두 해제