mirabo01 님의 블로그

스마트폰, 태블릿, 데스크톱…모든 디바이스에서 자연스럽게 보이는 웹을 만드는 기술,그게 바로 반응형 웹 디자인(Responsive Web Design) 이다. 이번 글에서는 CSS 미디어쿼리(Media Query) 의 핵심 개념부터그리드(Grid)와 플렉스(Flex)를 활용한 실전 반응형 설계법까지단계별로 완전히 정리했다. 💡 1. 반응형 웹 디자인이란? “하나의 웹페이지가 다양한 화면 크기에 맞춰 자동으로 레이아웃을 바꾸는 기술” 예전에는 모바일용, PC용 페이지를 따로 만들었다.하지만 지금은 하나의 HTML로 다양한 기기를 대응하는 시대다. ✅ 반응형의 핵심 요소 유연한 레이아웃 (Flexible Layout) 유동적인 이미지 (Fluid Images) 미디어쿼리 (Media Query) ..

이제 HTML 기초를 넘어서 ‘실무에서 통하는 구조 설계’ 를 배워보자.단순히 를 쌓는 코드가 아니라,SEO·접근성·유지보수·반응형까지 고려한 완성형 HTML 설계법을 정리한다.이번 글은 앞선 1~6편을 모두 종합한 HTML 마스터 단계다.웹사이트를 설계할 때 “어떤 구조가 좋은 구조인지” 감이 확실히 잡힐 것이다.💡 1. 실무 HTML 구조 설계의 기본 원칙“HTML은 화면이 아니라 의미를 설계하는 언어다.”HTML 구조를 짤 때는 다음 네 가지 기준을 항상 고려해야 한다.기준 설명시맨틱(semantic)의미 있는 태그로 문서의 논리 구조를 표현접근성(accessibility)누구나 접근할 수 있는 정보 구조 설계유지보수성(maintainability)코드의 가독성과 수정 용이성 확보반응형(respo..