CSS Block,Inline&Position

block의 특성

display의 속성이 block로 지정된 엘리먼트는 전 후 줄바꿈이 들어가며 다른 엘리먼트들을 다른 줄로 밀어내며, 혼자 한 줄을 차지한다. 대표적으로 div, p, h1 ~ h6 태그 등이 있고, width, height, margin, padding 속성이 모두 적용이 된다.

inline의 특성

display 속성이 inline으로 지정된 엘리먼트는 전 후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 대표적으로 span, a 태그 등이 있고, block와 다르게 width, height 속성을 설정하더라도 적용되지 않는다. 또한, margin, padding 속성은 좌우 간격만 적용되며 상하 간격은 설정하더라도 적용되지 않는다.

inline-block의 특성

block와 inline의 특성을 모두 가진다. inline 요소와 같이 한 줄에 나란히 배치되면서, block의 특성인 width, height, margin, padding등의 프로퍼티를 지정할 수 있다. 대표적으로 button, input, select 태그 등이 있다.

position

HTML 요소의 위치를 결정하는 방식을 설정하는 것으로 정적 위치 지정 방식, 상대 위치 지정 방식, 절대 위치 지정 방식, 고정 위치 지정 방식 등 크게 4가지의 방식이 있다.

1. 정적 위치(static position) 지정 방식​

• 다른 태그와의 관계에 의해 자동으로 배치된다.
• 임의로 위치의 설정이 불가능하다.
• 상속 등으로 설정된 position을 리셋 시킬 때 사용한다.

2. 상대 위치(relative position) 지정 방식

• relative 미 설정 시 원래 있어야 하는 위치를 기준으로 좌표를 지정할 수 있다.
• 문서의 일반적인 흐름에 포함된다.
• relative 미 설정 시 원래 있어야 하는 위치의 공간은 남겨두고, 요소가 상대적 위치로 이동하게 된다.
• 문서의 일반적인 흐름 : 요소를 수직 또는 수평으로 쭉 늘어놓을지를 결정하는 것.

3. 절대 위치(absolute position) 지정 방식

• 가장 가까운 위치에 있는 position 속성이 relative 인 부모 요소를 기준으로 상하좌우 값으로 요소가 위치한다.
• position 속성이 relative 인 부모 요소가 없으면, body 요소를 기준으로 위치한다.
• 문서의 일반적인 흐름에 포함되지 않고, 페이지 레이아웃 공간도 배정하지 않는다.
• 다른 요소가 먼저 위치를 점유하고 있어도 덮어씌우게 된다.

4. 고정 위치(fixed position) 지정 방식

• position 속성이 relative 인 부모 요소가 아닌, viewport를 기준으로 특정 위치에 배치한다.
• 스크롤이 되어도 움직이지 않는다.
• 문서의 일반적인 흐름에서 배제되며, 웹 페이지의 레이아웃 공간도 배정하지 않는다.
• 다른 요소가 먼저 위치를 점유하고 있어도 덮어씌우게 된다.

자료 출처)
https://blog.naver.com/microfun/222651209302
https://blog.naver.com/microfun/222649400377