[CSS] Display / Float / Overflow / Layout / Position / Responsive

---

Display

---

‣ 블록 ⇒ 인라인

display: inline;

---

‣ 인라인 요소 ⇒ 블록 요소

display: block;

---

‣ 같은 줄에 배치할 수 있는 블록 요소

display: inline-block;

---

‣ 화면에서 없어짐

display: none;

---

체크박스를 화면에서 없애고 이미지로 변경한 예제 출력

• 체크박스가 선택 됐을 때

• 체크박스가 선택 되지 않았을 때

---

👉display 활용 예제 깃허브(클릭)

---

Float 속성

• HTML 요소들은 기본 배치를 가진다.
  • 위에서 아래 방향으로 배치한다.
  • 왼쪽에서 오른쪽 방향으로 배치한다.
  • 블록 요소는 각 라인을 차지하고, 인라인 요소는 라인에 포함된다.
• HTML 기본 배치를 무시하고 새롭게 배치된다.
  • 왼쪽에 배치할 수 있다.
  • 오른쪽에 배치할 수 있다.

• 활용
  • float: left; float: right; 등

---

clear:

• float 요소의 영역에서 벗어난다. (left, right , both)

• clear: left; : float: left; 영역에서 벗어나라는 의미

---

float 예제 출력 결과

---

👉float 활용 예제 깃허브(클릭)

---

Overflow

---

‣ scroll

• overflow: scroll; : 스크롤바가 생긴다.

---

‣ hidden

• overflow: hidden; : 숨긴다.

---

👉overflow 활용 예제 깃허브(클릭)

---

Layout

---

수평 레이아웃 설정 방법

• float + clear 속성
• float + overflow 속성 / float + display 속성
• display 속성
• display inline block 속성

---

‣ float + clear 속성

• 수평 배치할 box를 float 처리한다.
• 수평 배치된 box 아래에 배치할 box에 clear 처리한다.

---

‣ float + overflow 속성

• box를 하나 만들어 수평으로 배치할 box들을 내부에 배치한다.
• 부모 요소에 overflow 속성을 visible이 아닌 값을 설정한다. (주로 hidden 설정)
• 자식 요소에 float 속성을 설정한다.

---

‣ float + display 속성

• box를 하나 만들어 수평으로 배치할 box들을 내부에 배치한다.
• 부모 요소에 display 속성을 flow-root로 설정한다.
• 자식 요소에 float 속성을 설정한다.

---

‣ display 속성

• box를 하나 만들어 수평으로 배치할 box들을 내부에 배치한다.
• 부모 요소에 display 속성을 flex로 설정한다.
• 부모 요소 : flex container, 자식 요소 : flex item

---

👉layout 활용예제 깃허브(클릭)

---

Position

---

‣ position: static;

• 디폴트, 생략 가능
• HTML 기본 배치를 따른다.
• 위치 조정(top, bottom, left, right)이 불가능하다.

---

‣ position: relative;

• HTML 기본 배치를 따른다.
• 위치 조정(top, bottom, left, right)이 가능하다.
• HTML 기본 배치를 기준으로 위치가 조정된다.
• 주로 자식요소에 position을 줄 때 사용된다.
  (부모요소에 포지션이 있어야 자식요소에게도 줄 수 있다.)

---

‣ position: absolute;

• HTML 기본 배치를 따르지 않는다.
• 부모 요소를 기준으로 위치를 조정(top, bottom, left, right)이 가능하다.
• 부모 요소가 position: static;이 아닌 경우에 동작 가능하다.

---

‣ position: fixed;

• HTML 기본 배치를 따르지 않고 특정 위치에 고정된 상태로 배치된다.
• 브라우저 화면을 기준으로 조정(top, bottom, left, right)이 가능하다.
• fixed된 구성 요소는 다른 요소를 가린다.

---

👉position 활용예제 깃허브(클릭)

---

Responsive

---

‣ 반응형 웹

• 화면의 크기에 따라 웹 페이지의 레이아웃이 자동으로 변하는 기능이다.

• 뷰포트 설정이 필요하다.
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • width=dvice-width : 화면의 너비를 장치의 너비로 재지정한다.
  • initial-scale=1.0 : 페이지의 초기 확대/축소 지정을 1로 한다. (확대/축소 비율이 1이다.)

• 상대 단위를 이용해서 작성한다.
  %, vw, vh 등

---

‣ 미디어 쿼리

• 화면의 크기 변화를 감지하는 CSS 모듈이다.
• 선언 : @media

종류
screen	화면
speech	낭독기
print	출력물
all	모든 미디어

조건 예시

• width: 640px 너비가 640px인 경우
• min-width: 640px 최소 640px인 경우(640px 이상인 경우)
• max-width: 640px 최대 640px인 경우(640px 이하인 경우)
• orientation: portrait 화면을 세워서 볼 때
• orientation: landscape 화면을 눕혀서 볼 때

• break point : 레이아웃이 변하는 포인트

---

화면 크기에 따른 레이아웃 변경 실습 출력

400px 이하     : 4행 1열
401px ~ 800px : 2행 2열
801px 이상     : 1행 4열

---

👉responsive 활용예제 깃허브(클릭)

---

❕tip) 로렘 입숨 (Lorem ipsum) : 의미없는 텍스트를 제공해주는 사이트

---

피이ㅣㅣ,,곤,,,

---