TIL-2. position의 속성 / inline, inline-block, block

1. position

• relative
• absolute
• fixed

position 속성은 웹페이지 속 요소들의 배치를 수행한다.
텍스트나 이미지를 원하는 위치에 원하는 방식으로 놓을 수 있게 해 준다.

위에 열거된 속성 말고도 static이랄지 sticky도 있지만
가장 많이 쓰이는 위 세 가지 속성 위주로 알아보았다.

위의 세 가지 속성 모두 top, right, bottom, left를 이용해
원하는 위치에 요소를 위치시킬 수 있다는 공통점을 가지고 있다.

relative는 이전 요소에 연결하여 위치를 지정한다.
absolute는 원하는 위치를 지정해 배치한다.
fixed는 지정한 위치에 고정하여 배치한다.

relative 속성을 사용하면 이전 요소를 기준으로 설정한 값만큼 이동해 표시된다.
부모 요소를 기준으로 따라간다고 보면 된다.

absolute 속성은 relative와 달리 원래의 위치와 상관없이 지정할 수 있는데
상위 요소를 기준으로 위치가 결정된다고 보면 된다.
단, 상위 요소가 static이라면 이 경우엔 무시되며 상위 요소가 없다면
html을 기준으로 삼는다.

fixed 속성은 웹의 상대 위치가 기준이며 고정된 위치를 사용할 수 있다.
스크롤을 움직여도 이 속성을 사용하면 고정시킬 수 있다.

2. inline, inline-block, block

• 대표적인 block 요소

<address>, <article>, <canvas>, <div>, <header>, <form>, 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, 
<table>, <ul>, <p>, <ol>, <video> 등등..

• 대표적인 inline 요소

<a>, <span>, <img>, <strong>, <b>, <input>, <sub>, <br>, 
<map>, <textarea>, <label>, <button> 등등..

display의 property 3대장(?)이다.
자주 많이 쓰인다.

화면이 렌더링됐을 때 표시되는 특정 영역의 성질을 부여하는 것이
바로 property이다.

inline : 내용의 크기만큼만 공간을 점유하며 줄바꿈을 하지 않는다.
>> width, height 적용 X
>> margin, padding-top, bottom 적용 X
>> line-height를 원하는 대로 사용 X

block : 무조건 한 줄을 점유하며 다음 태그는 항상 줄바꿈이 된다.

inline-block : 위 두 가지 속성의 특징을 다 가지고 있다.
inline처럼 줄바꿈을 하지 않으면서도 inline과는 다르게 width, height 및
line-height 값을 적용할 수가 있다.
물론 margin, padding-top, bottom도 적용이 가능하다.

💡 다만 inline-block을 사용하면 속성 사이에 공백이 생기는데
이때는 parent tag에 font-size:0을 적용하면 된다.
또 inline-block 속성끼리 높이가 안 맞을 경우에 상위 공백에 생기는데,
이때는 vertical-align:top을 적용하면 된다.