반응형 미디어쿼리3 [웹 디자인] 16일차: 미디어 쿼리 사용법 미디어 쿼리란?미디어 쿼리는 특정 조건(예: 화면 크기, 해상도, 방향)에 따라 다른 CSS 스타일을 적용할 수 있게 해주는 CSS 기술입니다. 미디어 쿼리를 사용하면 다양한 기기와 화면 크기에 맞춰 웹 페이지의 레이아웃과 스타일을 조정할 수 있습니다.미디어 쿼리 기본 문법미디어 쿼리는 @media 규칙을 사용하여 정의합니다.@media (조건) { /* 조건이 참일 때 적용할 CSS 스타일 */}예제:/* 기본 스타일 */.container { background-color: blue;}/* 화면 크기가 600px 이하일 때 적용 */@media (max-width: 600px) { .container { background-color: red; }}미디어 쿼리 조건미디어 쿼리는 다양한 조.. 2024. 8. 16. [웹 디자인] 15일차: 반응형 디자인 소개 반응형 디자인이란?반응형 디자인(Responsive Design)은 다양한 기기와 화면 크기에 맞게 웹 페이지의 레이아웃을 조정하는 웹 디자인 접근 방식입니다. 반응형 디자인을 사용하면 데스크탑, 태블릿, 모바일 기기 등 모든 기기에서 최적의 사용자 경험을 제공할 수 있습니다.반응형 디자인의 중요성사용자 경험 향상: 다양한 기기에서 일관된 사용자 경험을 제공합니다.SEO 개선: 검색 엔진에서 모바일 친화적인 사이트로 인식되어 순위가 올라갈 수 있습니다.유지 보수 용이: 하나의 코드베이스로 여러 기기를 지원하므로 유지 보수가 쉽습니다.반응형 디자인의 핵심 요소뷰포트 설정뷰포트는 사용자가 웹 페이지를 볼 때의 가상 창입니다. 뷰포트를 설정하여 다양한 기기에서 웹 페이지가 올바르게 표시되도록 할 수 있습니다... 2024. 8. 15. Porfolio Page - (3) 반응형 웹 Index 1. 반응형 웹 2. 반응형 웹 예제 3. PWA 4. PWA 예제 5. 4 Reference 1. 반응형 웹 반응형 웹 디자인(Responsive Web Design) - 반응형 웹사이트를 통해 사이즈에 따라 content가 유동적으로 변화하게 구성 - 컨테이너에 맞게 보여짐 - Fluid Layout - flex grid / flex box / % / vw / vh로 구현 - Media Queries로 구현 가능 - Desktop(1024px~) / Tablet(768px~1024px) / Mobile(320px~480px)로 디자인 (사용법) - screen 대신 all, print, speech 가능 - and 대신 not, only, comma(,) 가능 @media screen an.. 2024. 2. 11. 이전 1 다음 반응형
