반응형 웹 만들기

2024/03/04

안녕하세요 lika-7 입니다

이번시간에는 반응형 웹을 다루겠습니다.

해상도와 뷰포트 이해하기

• 레이아웃을 반응형으로 설계하려면 기기의 해상도를 이해해야 합니다.
• 모바일과 태블릿 등 작은 디스플레이에는 일반 모니터의 픽셀 기준을 적용할수 없습니다.
  • 이를 위해 도입된 것이 뷰포트 입니다.
  • 뷰포트를 통해 기기의 해상도 기준으로 렌더링을 할수 있습니다.

<meta name=”viewport” content=”속성값, 속성값, 속성값…”>

미디어 쿼리

• 반응형 웹을 구현하기 화면의 크기에 맞춰 레이아웃을 다시 구성해야 합니다.
  • 이를 위해 미디어 쿼리를 사용합니다

미디어 쿼리 작성 방법

<link> 요소 사용

<link 
	rel="stylesheet"
	media="screen and (max-width: 640px)"
	href="style_640.css"
/>

@media 사용

@media 미디어_타입 and (조건식) {스타일_선언}

@media screen and (max-width: 640px){
	/* 640px 이하부터 적용할 스타일 선언 */
}