브라우저는 CSS가 없는 HTML 문서의 요소를 왼쪽에서 오른쪽으로, 위에서 아래로 문서에 존재하는 것과 같은 순서로 렌더링한다. 이를 HTML에서 요소의 흐름이라고 한다.
다음과 같은 css 속성을 이용하여 웹페이지에 보여지는 요소의 포지션을 조정해줄 수 있다.
1. position 속성 (요소의 기본적인 위치를 지정한다. 속성값은 아래와 같다.)
-
static - 기본값 (it does not need to be specified). 문서흐름대로 배치.
-
relative - 기본값으로부터 상대적으로 얼마나 위치시킬 것인지 지정한다. 그래서 다음과 같은 추가적인 속성이 필요하다. 값은 px이나 %, ems 단위를 적용한다.
top (위로부터 얼마나 내려갈 것인지), bottom (아래로부터 얼마나 올릴 것인지), left (왼쪽으로부터 얼마나 떨어질것인지), right (오른쪽으로부터 얼마나 떨어질것인지)
이 추가적인 속성은 static(기본값)에서는 적용되지 않는다.
다른 요소와 조화를 이루어 배치. -
absolute - 이 값을 사용하면, 웹페이상의 다른 모든 요소들은 이 속성이 적용된 요소가 마치 없는것처럼 여길 것이다. 스크롤하면 다른 요소들과 함께 스크롤된다.
문서흐름과 상관없이 원하는 위치에 요소를 배치.
가장 가까운 위치에 있는 부모요소 중 position: relative 인 요소를 기준으로 배치된다. -
fixed - 스크롤해도 같은 위치 고정.(틀 고정 같은 느낌)
문서흐름과 상관없이 원하는 위치에 요소를 배치.
부모요소가 아닌 브라우저 창 기준으로 배치. -
sticky - IE지원 x, 최초에 relative 속성처럼 동작하다가 스크롤이 특정 지점에 도달하면 요소를 고정(fixed) 시킨다.
- display
-
inline - 어떤 요소든 인라인요소로 만들 수 있다. 인라인요소는 컨텐츠를 보여주는 필요한 만큼만 공간을 차지한다. width, height 속성이 무시되고, margin, padding 속성도 좌우 간격만 적용된다.
-
block - 컨텐츠를 같은 라인 선상에 위치시키지 않는다.
-
inline-block - 인라인과 블록의 특징을 혼합. 블록요소를 인라인처럼 옆으로 나란히 표시할 수 있다. 높이와 너비 속성을 이용하여 크기를 조절할 수 있다.
-
z-index - 0이 기본값. 음수적용 가능, 값이 클수록 앞으로 나온다. 박스가 서로 겹치지 않게끔 해주는 속성. width 값을 설정해줘야 한다.
-
float - 그저 단순하게 왼쪽, 오른쪽으로 요소를 배치하고 싶을때 사용. element가 다른 element 사이에서 유동적으로 위치할 수 있도록 해주는 방법이다. 마치 신문에서 텍스트가 이미지를 감싸고 있는 것처럼 하기에 적합하다.
- left - 왼쪽으로 배치
- right - 오른쪽으로 배치
- clear (대체로 float과 함께 사용된다)
float속성이 적용된 요소는 레이아웃의 일반적 규칙을 벗어나 공중에 떠 있는 상태로 배치되기 때문에 float속성이 적용된 요소 다음에 오는 요소를 새로운 줄에 배치하고자 할 때는 앞에서 사용된 float속성을 해제해야 한다. 이때 사용하는 것이 clear 속성인데
- left - float:left; 명령을 해제하고
- right - 는 float:right;의 명령을 해제한다.
- both - float: left, float:right; 명령 둘 다 해제하는 데 사용한다.
- none - 기본값. float을 허용한다.
