HTML - Position 속성과 Block에 대하여

1. position 속성 - relative, absolute, fixed

🎈 Position 속성이란?

:
Position은 css에서 element를 어떠한 위치에 배치시키는데에 사용된다.

Position은 5가지로 구성되어있다.

div {
	position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
    position: static;
}

position: static;은 default 값으로 되어있다.
static일때는 top, right, bottom, left 값을 주어도 변화가 없다
따라서 이러한 값을 줘서 element의 위치에 변화를 주기 위해서는

position: relative; 의 값을 주면 된다.
relative를 사용하면 다른 요소와 겹칠 수도 있는데 relative는 다른 부분의 배치에 영향을 끼치지 않기 때문이다.

position: absolute;는 element가 가장 가까운 조상의 위치에 상대적으로 변화한다. 만약에 조상/부모 element가 없다면 body tag를 기준으로 삼는다.

position: fixed;는 viewport 즉 화면을 기준으로 삼고 거기서 변화하지 않는다 따라서 웹사이트의 방문자가 스크롤을 내리거나 올려도 fixed가 된 element는 계속해서 따라다닌다.
예시로 현재 블로그 포스팅에서

위 Element는 스크롤을 올리던 내리던 계속해서 고정된 위치에 있다.
fixed position이 적용된 것을 알 수 있다.

2. inline, inline-block, block 에 대해서

Block은 Line 하나를 통째로 차지한다. 예를 들면 div, p 태그가 있다. (물론 CSS 속성을 통해 Block line을 Inline 속성으로 바꿀 수 있다.)

Inline은 span 태그와 같이 한 줄에 여러개를 나열하여 적용할수 있다. (태그 하나가 line 하나를 다 차지하지 않음. 이 또한 CSS 속성을 통해 block 속성을 적용할 순 있음!)

그렇다면 inline-block은 무엇일까

Inline-block은 인라인과 블록을 합쳐서 생각하면 쉽다 가로로 펼쳐지는 블록이다.

div를 inline block으로 놔도 내용물이 안보일때가 있다 그건 inline은 안에 내용이 써 있어야 보인다 따라서 div안에 내용을 채워 넣으면 그제서야 가로로 나열된 div block을 볼 수 있다.

[Block,Inline,Inline-block의 그림 예시]