position과 inline/block

position - relative, absolute, fixed

position에는 여러 가지 프로퍼티가 있는데 그중 많이 사용되는 프로퍼티는 relative, absolute, fixed이다.

 

먼저 relative는 기본 위치(position이 static = {디폴트 상태, 아무런 효과 X}인 상태에서의 위치)를 기준으로 하여 top, right, bottom, left에 지정된 거리만큼 이동하여 위치하게 된다

 

예를 들어 어떤 요소에 top : 30px, left : 50px라는 값을 준다면 그 요소는 원래 있던 위치에서 위에서 30픽셀, 왼쪽에서 50픽셀만큼 떨어진 위치에 자리하게 된다.

 

absolute는 부모나 조상중에 position을 가지고 있는 요소를 기준으로 하여 배치된다. 다만 static은 제외되며 모든 조상이 position을 가지고 있지 않다면 viewport에서 값을 준 위치로 잡고 위치를 잡는다. 예를 들어 부모가 30 30 떨어져 있고 자식은 50 50 떨어지게 했다면 최종적으로 자식은 80 80에 위치하게 되는 것이다.

 

fixed는 viewport를 출발선으로 하고 화면에 계속 고정되어있게 된다. 즉 스크롤을 내리면 다른 콘텐츠는 사라지고 나타나지만 fixed 요소는 계속 같은 자리에 위치하는 것이다.

inline 속성과 block 속성

html에는 여러가지 태그들이 있는데 기본적으로 inline 또는 block 속성이다

inline과 block의 가장 큰 차이점은 block은 한 줄을 모두 차지하고 안의 내용이 모두 표시되면 줄 바꿈을 하는데 반해, inline은 자신의 크기만큼 영역을 가지고 줄 바꿈을 하지 않는다. 한편 block에는 width나 height 값을 주어 크기 변경이 가능하지만, inline에는 불가능하다.

대표적인 태그로는 block에는 <div>, <p>등이 있고 inline에는 <span>이 있다.

 

한편 inline과 block의 특징을 모두 지니는 inline-block 속성이 있다. inline처럼 줄바꿈을 하지 않지만, block처럼 width, height의 지정이 가능하다. 그 외 margin, padding, line-height 값들도 줄 수 있다.