학습요약28 CSS Layout

inline 종류 <span>, <a>, <img>
block 종류 <div>, <h1~6> , <p>, <form>, <header>, <footer>, <section>
inline block : width, height, margin, padding 지정 가능 (block)
여러 요소를 추가하면 가로방향으로 추가된다 (inline)
예 ) input

---

**### float: ( 물 , 공기에 ) 뜨다**

• 특정 요소를 둥둥 뜨는 것처럼 , 마치 별도의 레이어처럼 배치할 수 있음
  예시) 기사에 이미지를 넣을 때
• 기본값은 float:none;
  - 값 :left ( 부모 요소의 ) 왼쪽에 뜨도록 / right : ( 부모 요소의 ) 오른쪽에 뜨도록 /
  none / inherit : 부모의 float 값을 상속받음

---

position > ★★

☆요소를 어떻게 배치할지 결정하는 CSS 속성
☆우선 Normal Flow 개념을 이해하는 것이 중요함

• Normal Flow 란 ? 요소의 레이아웃을 전혀 제어하지 않았을 때 , 브라우저에서 기본적으로 요소가 배치되는 흐름
• Remind) 인라인 요소 , 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음
  즉 , 요소의 특성에 따라 Normal Flow 가 정해져있는 것
  - 코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다

☆position 속성을 통해 Normal Flow 에서 벗어나 , 개발자가 원하는대로 제어하여 배치할 수 있음

☆position 속성은 top, bottom, left, right 속성과 함께 사용함

• position 의 종류에 따라 top, bottom, left, right 를 적용하는 방식이 달라짐

☆종류

• static
• absolute
• relative
• fixed
• sticky

---

## position 종류>

1. static

• default 값
• top, bottom, left, right 속성을 사용할 수 없음 작성해도 무시된다
• 단순히 normal flow 로 배치된다

2. relative

동작 흐름
- Normal Flow 를 따라 배치한 ★원래 자기 자신의 위치를 기준으로

• top, right, bottom, left 의 값에 따라 최종 위치 지정 (offset 적용
  값 : 양수값 , 음수값 모두 줄 수 있음
  반대가 되는 값을 동시에 선언하면
  top, bottom 을 동시에 선언하면 ? top 만 적용
  left, right 를 동시에 선언하면 ? left 만 적용

3. absolute

동작 흐름

• 요소를 Normal Flow 에서 제거하고
• ★가장 가까운 부모 요소 를 기준으로
  position: static (디폴트 값 이 아닌 가장 가까운 부모 요소)
  그런 요소가 없으면 body 를 기준으로
• top, right, bottom, left 값에 따라 최종 위치 지정 (offset 적용
  Normal Flow 에서 제거되므로 , 마치 float 처럼 새로운 레이어가 추가되어 둥둥 뜨게 된다
  주로 기준점으로 잡고싶은 부모를 postion:relative 로 설정하고 ,
  자식 요소를 position:absolute 로 자주 쓴다

4. fixed

동작 흐름

• 요소를 Normal Flow 에서 제거하고
• ★눈에 보이는 뷰포트 를 기준으로
• top, right, bottom, left 값에 따라 최종 위치 지정
  스크롤을 쭉 해도 계속 따라온다
• 뷰포트 눈에 보이는 창 이 계속 변경되기 때문에
• 예 ) 팝업창 , 문의하기 버튼 , 네비게이션 바 , 광고창 등

5. sticky
   동작 흐름>

• Normal Flow 를 따르고
• 가장 가까운 스크롤이 되는 부모를 기준으로
  기본적으로 스크롤이 되는 상황에서만 효과가 나타난다 (모바일에서 사용 굿)
• top, right, bottom, left 값에 따라 최종 위치 지정
  sticky 라는 이름을 기억하면 이해하기가 쉽다 . 스크롤을 내리다가 특정 시점부터 마치 fixed 처럼 동작한다

---

overflow>

• 컨텐츠가 요소의 크기보다 많아서 넘쳐 흐를때 , 이를 어떻게 표현할지 지정하는 속성
  참고 ) 요소의 크기 지정 : width, height
  내용이 넘치면 다른 요소와 내용이 겹칠 수 있기 때문에 목적에 맞게 조정해줘야 함

• overflow: visible
  default 값 / 넘치면 깨져서 보임

• overflow: hidden
  넘치는 컨텐츠는 안보임

• overflow: scroll
  넘치는 컨텐츠는 스크롤로 내려서 볼 수 있음

• overflow: auto
  브라우저가 알아서 선택

  !!자주 쓰지만 어려운 CSS 핵심!