1. 반응형 웹 디자인
반응형 웹 디자인은 다양한 기기와 화면 크기에 맞춰 웹사이트의 레이아웃과 콘텐츠를 자동으로 조정하는 접근방식입니다. 이를 통해 사용자는 PC,태블릿,스마트폰 등 어떤 기기에서도 최적화된 경험을 할 수 있습니다.
주요 특징 :
- 유연한 그리드 레이아웃
- 유동적인 이미지와 미디어
- CSS 미디어 쿼리를 통한 스타일 조정
2. 뷰포트 (Viewport)
뷰포트는 웹 페이지가 표시되는 기기의 화면 영역을 의미합니다. 반응형 웹 디자인에서 뷰포트 설정은 매우 중요합니다.
뷰포트 단위 :
- vw (viewport width) : 뷰포트 너비의 1%
- vh (viewport height) : 뷰포트 높이의 1%
3. 미디어 쿼리 (Media Queries)
미디어 쿼리는 CSS에서 특정 조건에 따라 스타일을 적용하 수 있게 해주는 기능입니다.
미디어 유형 :
- all : 모든 기기
- print : 인쇄 장치
- screen : 화면 장치
- speech : 음성 합성 장치
주요 미디어 조건 :
- min-width , max-width : 화면 너비 범위
- orientation : 기기 방향 (portrait / landscape)
4. 반응형 레이아웃 구현
플렉스박스(Flexbox)나 그리드(Grid)를 사용하여 유연한 레이아웃을 만들 수 있습니다.
5. 반응형 이미지
이미지를 반응형으로 만들기 위해 max-width 속성을 사용할 수 있습니다.
6. 브레이크포인트 설정
일반적인 브레이크포인트
- 모바일 : 600px 이하
- 태블릿 : 601px - 900px
- 데스크톱 : 901px 이하
