Keyword overview
RWD
Viewport
Media query
The Code Card
RWD
https://lshjju.tistory.com/827
RWD
**RWD(Responsive Web Design, 반응형 웹 디자인)**란 하나의 웹사이트가 접속하는 기기(PC, 태블릿, 스마트폰 등)의 화면 크기에 반응하여 레이아웃을 자동으로 최적화하는 기술을 말합니다.쉽게 비유하
lshjju.tistory.com
Viewport
https://lshjju.tistory.com/826
Viewport
이미지 출처 https://www.w3schools.com/css/css_rwd_viewport.asp **뷰포트(Viewport)**는 한마디로 **"웹사이트가 실제로 보여지는 영역"**을 의미합니다.기기에 따라 웹사이트가 보여지는 창의 크기가 다르기 때
lshjju.tistory.com
크롬 브라우저의 디바이스 모드 활용하기
https://lshjju.tistory.com/755
크롬 브라우저의 디바이스 모드 활용하기
크롬 디바이스 모드https://developers.naver.com/main/위 사이트에 진입 하세요.F12 개발자 도구를 오픈 하세요. 1단계 디바이스 모드 시작하기2단계 화면 크기에 따라 확인하기3단계 작은 화면 크기로 바
lshjju.tistory.com
em rem
https://lshjju.tistory.com/823
em rem
웹 디자인의 유연성을 결정하는 **상대 단위인 em과 rem**에 대해 알아보겠습니다.이 단위들은 고정된 값인 px과 달리 주변 환경(글자 크기)에 따라 크기가 변하므로, 반응형 웹을 만드는 데 필수적
lshjju.tistory.com
RWD Image
https://lshjju.tistory.com/824
RWD Image
웹 페이지의 용량을 줄이고 사용자 환경에 최적화된 시각적 경험을 제공하기 위해서는 반응형 이미지(RWD Image) 처리가 필수적입니다.단순히 width: 100%를 주는 것을 넘어, 기기의 해상도와 화면 크
lshjju.tistory.com
Media query
https://lshjju.tistory.com/825
Media query
반응형 웹 디자인의 핵심이자, 접속하는 기기의 환경에 따라 스타일을 다르게 적용할 수 있게 해주는 **미디어 쿼리(Media Query)**에 대해 핵심 키워드별로 정리해 드리겠습니다.1. 정의 (Definition)미
lshjju.tistory.com
모바일 기기의 뷰포트 크기 체크하기
https://lshjju.tistory.com/756
모바일 기기의 뷰포트 크기 체크하기
특정한 기기에 맞는 미디어쿼리를 작성하는데 필요한 뷰포트의 크기값을 체크할 수 있는 사이트 입니다. https://yesviz.com/devices.php Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular De
lshjju.tistory.com
크롬 개발자 도구에서 미디어쿼리 확인하는 방법
https://lshjju.tistory.com/757
크롬 개발자 도구에서 미디어쿼리 확인하는 방법
반응형 웹 사이트를 개발할 때 브라우저 크기에 따라 디자인이 어떻게 변하는지(미디어쿼리) 확인하는 기능은 필수적입니다.크롬 개발자 도구에서 미디어쿼리 중단점(Breakpoint)을 한눈에 확인하
lshjju.tistory.com
반응형 웹 디자인이란
모바일 기기를 위한 뷰포트
실습 - 크롬 브라우저의 디바이스 모드 활용하기
10-2 반응형 요소 만들기
상댓값으로 글자 크기 지정하기 -em 단위, rem 단위
em 단위
em 단위 사용하기
부모 요소에 영향을 받는 em 단위
https://github.com/lshjju/doit-hcj-new/blob/main/10/results/em.htmlrem 단위
rem 단위 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/10/results/rem.html반응형 이미지 만들기
반응형 이미지 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/10/results/image.html
object-fit 속성 사용하기
object-fit 속성으로 이미지 크기 조절하기
https://github.com/lshjju/doit-hcj-new/blob/main/10/results/object-fit.html
반응형 레이아웃 만들기
10-3 미디어 쿼리 알아보기
미디어 쿼리 알아보기
미디어 쿼리 구문
미디어 유형의 종류
웹 문서의 가로 너비와 세로 높이 속성
화면 회전 속성
미디어 쿼리의 중단점
미디어 쿼리 적용하기
외부 CSS 파일 연결하기
웹 문서에 직접 정의하기
웹 개발자 도구 창에서 미디어 쿼리 표시하기
실습 - 화면 너비에 따라 배경 이미지 바꾸기
1단계 미디어 쿼리 작성하기
2단계 수정 결과 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/10/mq.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/10/results/mq.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! CSS 웹 표준의 정석' 카테고리의 다른 글
| Grid layout (0) | 2025.11.06 |
|---|---|
| Flexbox layout (0) | 2025.11.06 |
| Image and Gradient (0) | 2025.11.06 |
| Box model (0) | 2025.11.06 |
| Text style (0) | 2025.11.06 |