• 반응형 페이지: 창 크기에 맞게 UI 조절.

1. 반응형 웹 vs 적응형 웹

반응형 웹

디바이스의 종류와 화면 크기에 실시간으로 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹

적응형 웹

웹 페이지에서 감지된 기기를 기반으로 미리 만들어진 정적인 레이아웃을 불러오는 웹

반응형 vs 적응형

구분	반응형 웹 (Responsive)	적응형 웹 (Adaptive)
핵심 개념	하나의 레이아웃이 화면 크기에 따라 유동적으로 변형	화면 크기별 고정 레이아웃을 미리 만들어 선택
레이아웃 수	1개 (유연하게 변형)	여러 개 (320 / 768 / 1024 / 1440px 등 구간별)
주요 단위	상대 단위 (%, vw, em, rem, fr)	고정 단위 위주 (px)
핵심 기술	Flexible Grid + Flexible Image + Media Query	Media Query 구간 전환 / 서버 기기 감지
크기 조절 시	부드럽게 연속적으로 변함	브레이크포인트에서 뚝뚝 끊기며 전환(snap)
성능	모든 기기에 같은 리소스 전달 → 불필요한 로딩 가능	기기별 최적 리소스만 전달 가능
유지보수	코드 하나만 관리 → 수월	레이아웃마다 관리 → 손이 많이 감
새 기기 대응	자동 대응 (미래 기기도 OK)	정의된 구간 밖이면 깨질 수 있음
개발 난이도	CSS 설계가 까다로움	디자인·관리 부담이 큼
비유	🌊 물 — 어떤 그릇에도 모양을 맞춤	🥛 컵 여러 개 — 크기에 맞는 컵을 골라 담음

반응형은 "유동적으로 흐른다", 적응형은 "정해진 형태로 갈아끼운다".

적응형은 naver.com

2. viewport

브라우저 화면 상에서 보여지는 웹페이지의 직사각형 영역

<meta name="viewport" content="width=device-width, initial-scale=1.0">

뷰포트를 설정하지 않으면 모바일 프라우저는 해당 페이지를 pc전용 페이지라고 인식한다.

3. 절대단위 vs 상대단위

절대단위

화면의 크기와 상관없이 일정한 크기를 유지한다. -> px

상대단위

크기가 기준에 따라 유동적인 값을 가짐. -> %, em, rem, vw, vh

• em(부모 요소), rem(루트, 보통html): font-size 기준으로 크기나 길이를 지정하는 상대적 길이 단위

<p style="font-size: 1em">1em</p>
<p style="font-size: 2em">2em</p>
<p style="font-size: 3em">3em</p>

• em은 margin, padding, width, height 부모가 아닌 자기 자신의 폰트 크기에 기반한다. 폰트 사이즈와 같이 커진다.
• rem은 기본 폰트 사이즈는 16px이다. em과 다르게 모두 root를 참조

4. 가변 그리드

• 그리드 레이아웃을 화면사이즈에 따라 자유롭게 변형이 가능한 형태로 제작하는 방법
• 부모의 크기에 따라 자식의 크기를 조절할 수있음. -> %로 조절
  
  그리드 크기가 조절될 거임.

5. 미디어 쿼리

기기의 환경마다 다른 css를 적용시켜주는 문법 -> 조건문 느낌

@media screen and(max-width: 1023px) and (min-width: 768px)
@media (max-width:1023px)
@media all and(min-width: 768px)

all이나 screen 많이 사용함