[HTML/CSS] 📚 레이아웃

📋 기억하고 싶은 내용

📌 display

inline

• 예) span
• 영역의 크기가 내부 콘텐츠 크기로 정해진다.
• 좌우의 여백은 지정할 수 있지만, 상하 여백은 지정할 수 없다.
• 여러 요소가 가로 배치된다.

block

• 예) div
• 영역의 크기를 width와 height 속성으로 지정할 수 있다.
• width 속성을 지정하지 않으면 가로 전체를 차지한다.
• 여러 요소가 세로 배치된다.

inline-block

• 예) input
• 영역의 크기를 width와 height 속성을 지정할 수 있다.
• 여러 요소가 가로 배치가 된다.

📌 요소를 없애는 방법

display: none

• 코드 상으로 존재하지만, 마치 코드 상에서도 존재하지 않는 것처럼 요소를 레이아웃 상에서 없앤다.

visibility: hidden

• 요소가 레이아웃 상에서 존재하지만, 보이지 않는다.

📌 float

• flexbox가 나온 후로 자주 사용되지 않는다.
• 블록 요소와 인라인 요소 기본 배치 방법(normal flow)을 무시하고, 별도의 배치 방법을 적용한다.
• float 속성은 요소를 부유하게 둥둥 띄우게 만든다.
• 부모 요소 내부에서 최대한 이동할 수 있는 만큼 이동한다.

📌 positon과 Normal Flow

• Normal Flow 배치 상태를 먼저 알아야 position 속성을 사용해 요소의 배치를 변경할 수 있다.

relative

• 요소가 position: static일 때를 기준으로 top, right, bottom, left 속성을 사용해 위치를 변경할 수 있다.
• 방향이 반대가 되는 속성을 동시에 사용하면 top, left 속성이 우선시 된다.

absolute

• position: absolute로 설정하면 Normal Flow에서 제거되고, 마치 float 속성 값을 left나 right로 지정한 것처럼 공중에 붕 뜨게 된다.
• position: absolute인 요소는 부모 요소 중에서 position: static이 아닌 요소를 찾아 기준점으로 삼는다.
• 보통 기준점으로 삼고 싶은 부모 요소에 position: relative로 설정한다.
• 만약 조건이 만족하는 부모 요소가 없다면 body 요소를 기준점으로 삼는다.

fixed

• 뷰포트를 기준점으로 삼는다.
• 항상 보이는 navigation bar나 menu bar를 만들 때 주로 사용한다.

sticky

• 특정 위치를 스크롤이 지나갔을 때 fixed처럼 동작하게 만들고 싶을 때 사용한다.
• 스크롤 되는 부모 요소의 가장 가까운 자식 요소를 position: sticky로 설정해야 제대로 동작한다.

📌 overflow

• overflow: auto는 요소의 콘텐츠가 넘쳐 흐르면 overflow: hidden으로 동작하고, 그렇지 않으면 overflow: visible로 동작한다.
• 콘텐츠가 넘쳐 흐르면 다음 요소의 콘텐츠와 겹치게 되는 현상이 발생하는데, 이를 방지하기 위해 overflow 속성을 사용한다.

📌 z-index

• z-index 속성을 지정하지 않아도 position: static이 아닌 요소가 position: static인 요소 위를 붕 뜨게 된다.
• 두 요소 모두 position: static이 아니라면 가장 뒤에 오는 요소가 붕 뜨게 되는데, 이때 z-index 속성을 사용해서 위치를 지정할 수 있다.
• 항상 가장 최상단에 위치해야 하는 경고창이나 모달창은 z-index 속성을 아주 큰 값으로 설정하는 것이 좋다.

🔗 참고 래퍼런스

• display - MDN
• visibility - MDN
• float - MDN
• position - MDN
• 일반 대열 - MDN
• overflow - MDN
• z-index - MDN