position 속성
position: static;
- 모든 태그들의 가장 기본적인 상태,
position:static이라 따로 명시하지 않아도 됨.
position: relative;
- 상대적으로 이동. 어떤 태그를 상대적으로 이동하느냐의 기준은,
- 각각의 태그가
기존(static)이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동한다.
position: absolute;
- 어떤 기준점을 상대로 움직이는것은 relative와 같으나 각각의 태그의 기본상태를 대상으로 움직이는 relative와는 달리,
- absolute는
기본상태(static)을 제외한 나머지 포지션(relative, absolute, fixed)등의 조상태그를 대상으로 움직인다.
position: fixed;
- 항상 같은 자리에 고정.
- 스크롤바를 옮겨도 상단이나 하단에 고정시키는 메뉴나 네비게이션바를 고정시킬 때 쓰인다.
주의할점! top, right, bottom, left 으로 부터 움직인다. 단순히 {top:5px} 이라고
위로 5px이 아니라!위로부터 5px따라서, 위로부터 아래로 5px.
inline / block / inline-block
inline
- 줄바꿈 없이 엘리먼트들이 나란히 배치된다.
- 대표적인 엘리먼트에는
<span>, <a>등이 있다. - 해당 컨텐트크기만 차지하기 때문에
width, height는 적용되지 않고margin, padding은 좌,우만 적용되고 상,하는 적용되지 않는다.
block
- 해당 컨텐트가 한줄 전체를 차지하기 때문에 다음 엘리먼트는 다음 줄에 배치된다.
- 대표적인 엘리먼트에는
<div>, <p>, <h1>등이 있다. width, height, margin, padding모두 적용된다.
inline-block
- inline 과 마찬가지로 줄바꿈되지 않고 나란히 배치된다.
- 대표적인 엘리먼트에는
<button>, <select>등이 있다. - 하지만! block 과 같이
width, height, margin, padding모두 적용된다.dispaly : inline-block
위와 같이 지정하면, 한줄에 원하는 너비만큼 배치할 수 있다.
float
- float은 레이아웃을 구성하는데 쓰인다.
- 단순히 value 값을 right, left 으로 표현하여 레이아웃을 구성한다.
예시) {float: right}
- float을 쓰면 width값이 인라인으로 변하게 되며 그 공백을 다음 태그가 메꾸려고 한다.
- 원래 의도했던 block 으로 만들고 싶으면 float을 쓰지 않은 태그들에 clear 을 작성해주면 된다.
예시) {clear: right}, {clear: both}
