✨ position 속성

position 속성은 태그의 위치를 결정한다. 모든 태그들은 기본적으로 position:static 상태이며, 왼쪽->오른쪽/위->아래 순으로 쌓인다.

relative

relative는 태그의 위치를 조금 변경하고 싶을 때 사용하면 된다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티로 이동을 시키며, 이는 static 상태를 기준으로 한다.

top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티다. 태그 바깥쪽으로 이동하고 싶으면 음수값을 주면 된다.

absolute

position: absolute; 는 static 속성을 가지지 않은 부모를 기준으로 절대적으로 움직인다. 만약 부모 중 static이 아닌 태그가 없다면 가장 위의 태그인 body가 기준이 된다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 된다.

fixed

fixed는 말그대로 고정됐다는 뜻dlek. absolute는 relative를 가진 부모가 필요하지만 fixed는 필요없다.

[참고]https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1

✨ block, inline, inline-block

block

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등과 같이 대부분의 요소는 block 요소다. block 요소 옆에 다른 요소를 붙여넣을 수 없다. width, height, margin, padding 속성이 모두 반영된다.

inline

inline 요소는 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. <span>, <a>, <img> 태그 등이 inline 요소에 속한다. 해당 태그 컨텐츠 크기 만큼만 공간을 차지하도록 되어 있으며, margin과 padding 속성은 좌 간격만 반영이 되어 있다.

inline-block

display:inline-block을 지정하면 요소는 inline 요소처럼 나란히 배치된다. 하지만 inline에서 불가능하던 width, height, margin/padding의 상하 간격 모두 지정이 가능해진다. 대표적인 요소로 <button>, <input>, <select> 등이 있다. inline-block 요소는 display:inline-block을 명시적으로 지정해주어야 한다.

[참고] https://www.daleseo.com/css-display-inline-block/

✨ floating layout

float 속성은 특정 요소를 떠있게/흐르도록 만든다. float 속성을 사용해 박스를 왼쪽 또는 오른쪽에 떠있게 만들 수 있다. 즉, 기본적인 문서 배치의 흐름에서 벗어나 요소가 페이지의 왼쪽이나 오른쪽으로 이동하게 한다. 설정 가능한 값은 left, none, right이다.

• float 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없다.
• float 적용된 요소는 그 요소의 종류와 상관 없이 자신의 영역만을 가지고 있는 인라인 블럭 박스처럼 렌더링이 된다. 즉, display:inline-block을 선언한 것과 동일해지기 때문에 다시 선언할 필요는 없다.

플로팅 해제 기법

float한 요소가 레이아웃을 무너뜨리는 현상을 겪으면 아래 블로그를 참조해서 플로팅을 해제하자. 방법은 계속 업데이트 되는 중!

https://webclub.tistory.com/606