- position 속성 - relative, absolute, fixed
position 속성은 문서 상에 요소를 배치하는 방법을 지정할 때 사용한다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.
position: relative; 자체로는 아무런 의미가 없다. position: static과 같다고 할 수 있다.
그러나 top, right, bottom, left 프로퍼티가 있으면 원래의 위치에서 이동할 수 있게 된다.
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다. 어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 된다. 여기서 특정 부모란 position이 static으로 지정되지 않은 엘리먼트를 가르킨다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여한다.
고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.
- inline, inline-block, block 에 대해서
HTML의 요소는 크게 2개로 나누어 볼 수 있다. block 요소와 inline요소로 분류해서 볼 수 있다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지한다. 주로 span과 같은 것들이 있다. 인라인 요소의 큰 특징은 부모 요소의 전체 공간을 차지하지 않기 때문에 줄 바꿈 등이 일어나지 않는다. 텍스트 크기만큼만 공간을 점유하고 width/height, margin/padding-top/bottom 적용이 불가하다. 또한 line-height를 원하는 대로 사용할 수 없다.
반면에 블록 레벨 요소는 기본적으로 부모 요소의 전체 공간을 차지하여 "블록"을 만든다. 그렇기 때문에 블록레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
대표적인 예시로 p와 같은 태그가 있다.
inline-block은 inline의 속성과 block의 속성을 합친 것이라고 볼 수 있다. 기본적인 속성은 inline에 기반을 한다. 덕분에 동일 라인에 여러 태그를 붙일 수 있다. 그리고 inline의 단점들을 커버하여, width/height, margin/padding-top/bottom 적용이 가능하고 line-height를 원하는 대로 사용할 수 있다. 그러나 block과 달리 줄 바꿈은 일어나지 않는다.
- 출처:
