프로그래밍
[CSS] 반응형 웹디자인 기본: 미디어쿼리 & 뷰포트
미디어쿼리는? 미디어쿼리는 CSS3에 도입된 기능으로, 다양한 디스플레이 유형과 환경에 따라 다른 스타일을 적용할 수 있게 해줍니다. 이는 반응형 웹 디자인의 핵심 요소로, 화면크기, 해상도, 방향 등의 조건에 따라 웹사이트의 레이아웃, 이미지, 기타 UI 요소를 동적으로 조정할 수 있습니다. 미디어 쿼리의 기본구조 미디어 쿼리는 @media 규칙과 함께 사용되며, 이어지는 조건문과 중괄호 {} 안에 적용할 CSS 스타일을 작성합니다. @media (max-width: 800px) { .heading { margin: 10px 0; font-size: 35px; } } 위의 예시에서, max-width: 800px는 미디어 쿼리의 조건을 나타냅니다. 이 조건은 뷰포트의 최대 너비가 800px 이하일 때 ..
