라이브러리 · 반응형 · 미디어쿼리: 실무 웹 개발의 시작 📱

처음부터 다 만들 필요 없습니다. 라이브러리를 활용하고, 반응형으로 설계하면
PC · 태블릿 · 모바일을 하나의 코드로 모두 대응할 수 있습니다!

---

01. 라이브러리(Library)란?

자주 쓰는 기능을 미리 만들어 둔 코드 모음입니다.
개발자가 직접 처음부터 만들지 않아도 되도록, 필요할 때 가져다 쓰기만 하면 되는 재료 상자입니다.

🏠 비유로 이해하기

요리할 때 소스를 직접 만들 수도 있지만,
마트에서 완성된 소스를 사다 쓰면 훨씬 빠르고 편하죠.
라이브러리가 바로 그 완성된 소스입니다.

<!-- Bootstrap 라이브러리 한 줄로 불러오기 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">

💡 직접 버튼, 그리드, 모달을 만들 필요 없이 클래스 이름만 써도 완성됩니다!

---

02. 반응형(Responsive Web)이란? 📱

화면 크기와 기기 환경에 따라 웹 화면이 자동으로 변하는 방식입니다.
PC · 태블릿 · 모바일을 하나의 웹으로 모두 대응하는 게 목적입니다.

🏠 비유로 이해하기

물은 어떤 그릇에 담아도 그 모양에 맞게 변합니다.
반응형 웹도 마찬가지 — 어떤 화면 크기든 그에 맞게 자동으로 변합니다.

📺 PC (1920px)    →  3단 레이아웃
📱 태블릿 (768px) →  2단 레이아웃
📲 모바일 (375px) →  1단 레이아웃

---

03. 반응형 웹의 핵심 요소

✅ 1) 유동 레이아웃 (Fluid Layout)

px 대신 %, vw, vh를 사용해 화면 크기에 따라 너비가 자동으로 조절됩니다.

/* ❌ 고정 레이아웃 — 화면이 작아져도 그대로 */
.box {
  width: 1200px;
}

/* ✅ 유동 레이아웃 — 화면 크기에 맞게 자동 조절 */
.box {
  width: 100%;   /* 부모 기준 100% */
  width: 80vw;   /* 뷰포트 너비의 80% */
}

단위	기준	설명
%	부모 요소	부모 너비의 몇 %
vw	뷰포트 너비	화면 너비의 1/100
vh	뷰포트 높이	화면 높이의 1/100

✅ 2) 미디어쿼리 (Media Query)

화면 크기에 따라 CSS를 분기해서 모바일 / 태블릿 / PC를 구분합니다.
다음 섹션에서 자세히 다룹니다!

---

04. 미디어쿼리(Media Query)

기기 화면 조건(크기, 방향 등)에 따라 스타일을 분기하는 CSS 문법입니다.

@media (조건) {
  /* 조건에 해당할 때만 적용되는 스타일 */
}

✅ max-width vs min-width

속성	의미	적용 시점
max-width	화면이 이 값 이하일 때	작아질수록
min-width	화면이 이 값 이상일 때	커질수록

/* max-width — 768px 이하(모바일)일 때 적용 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    flex-direction: column;
  }
}

/* min-width — 1024px 이상(PC)일 때 적용 */
@media (min-width: 1024px) {
  .container {
    width: 1200px;
    flex-direction: row;
  }
}

📐 자주 쓰는 브레이크포인트

/* 모바일 */
@media (max-width: 767px) { ... }

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* PC */
@media (min-width: 1024px) { ... }

화면 너비
0px ──── 767px ──── 1023px ──── →
  모바일        태블릿       PC

📝 실전 예제 — 화면 크기별 배경색 변경

<div class="box">화면 크기를 바꿔보세요!</div>

.box {
  width: 100%;
  padding: 20px;
  text-align: center;
  background-color: steelblue; /* 기본: PC */
}

/* 태블릿 */
@media (max-width: 1023px) {
  .box {
    background-color: tomato;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .box {
    background-color: gold;
  }
}

PC    (1024px~) → 🔵 steelblue
태블릿 (768~1023px) → 🔴 tomato
모바일 (767px~)  → 🟡 gold

🍯 꿀팁 — 모바일 퍼스트(Mobile First)
max-width 대신 min-width를 기준으로 작성하는 방식입니다.
모바일을 기본으로 잡고, 화면이 커질수록 스타일을 추가하는 방향이
실무에서 더 권장되는 패턴입니다!

---

📖 핵심 요약

포인트	내용
📦 라이브러리	미리 만들어진 코드 모음, 가져다 쓰기만 하면 됨
📱 반응형 웹	화면 크기에 따라 레이아웃이 자동으로 변하는 방식
📐 유동 레이아웃	px 대신 %, vw, vh 사용
🎯 미디어쿼리	@media로 화면 크기별 CSS 분기
⬇️ max-width	해당 값 이하일 때 적용
⬆️ min-width	해당 값 이상일 때 적용