visualstudiocode2 [Web Design] 반응형 웹의 핵심: 미디어 쿼리와 정교한 레이아웃 설계법 고정된 디자인에서 흐르는 디자인으로디자인 원칙(Design Principles) 수업에서 시각적 계층 구조의 중요성을 배웠다면, 웹 수업에서는 그 구조가 다양한 기기에서 어떻게 유지되어야 하는지를 배운다. 과거의 웹이 데스크톱이라는 고정된 캔버스에 맞춰졌다면, 현대의 웹은 스마트폰부터 대형 모니터까지 유연하게 대응해야 한다. 이를 가능하게 하는 것이 바로 반응형 웹 디자인(Responsive Web Design)이며, 그 중심에는 미디어 쿼리가 있다.1. 미디어 쿼리(@media): 화면 크기에 따른 스타일의 변주미디어 쿼리는 브라우저에게 현재 화면의 상태를 묻고, 그 조건에 맞는 CSS를 적용하는 논리적인 장치이다. 기본 구문과 중단점(Breakpoint)의 의미를 살펴보자. @media screen .. 2026. 3. 19. [Web Design] 디자인이 직접 구현되는 언어: CSS 기초 용어 완벽 정리 웹의 뼈대와 옷, HTML과 CSS의 관계웹 사이트를 만드는 과정은 건물을 짓는 것과 비슷하다. HTML이 건물의 구조를 잡는 뼈대라면, CSS(Cascading Style Sheets)는 그 건물에 색을 칠하고 조명을 다는 인테리어 작업이다. 인터랙티브 미디어 디자인을 전공하며 시각적인 결과물을 만들어낼 때, CSS는 디자이너의 의도를 웹 브라우저에 투영하는 가장 강력한 도구가 된다. 수업 시간에 배운 내용을 바탕으로 CSS의 가장 기본적인 구성 요소와 용어들을 다시 한번 자세히 짚어보려고 한다. 1. CSS 구문의 기본 구조 (Rule Set)CSS는 브라우저에게 스타일 규칙을 전달하는 일종의 매뉴얼 북 같은 개념이다. 하나의 규칙은 다음과 같은 요소들로 구성된다. 이러한 요소들이 모여 하나의 스타.. 2026. 3. 10. 이전 1 다음
