반응형 웹 기초(2)

'유노코딩'님의 <입문자를 위한 반응형 웹 기초 강의>를 토대로 작성한 글입니다. 이 자리를 빌어서 양질의 강의 제공에 대한 감사의 인사를 전합니다.

가변 레이아웃

• 각 div를 %로 표현.
• %는 부모 요소와의 상대적 크기를 지정한다.
• 너비와 여백은 부모 요소의 너비에, 높이는 부모 요소의 높이에 비례한다.
• 글자 크기도 부모 요소의 크기에 비례한다.

함수 개념과 calc()

• CSS에서도 스타일 속성 값을 지정할 때 함수를 적용할 수 있다.
• ‘함수명(x)’ 의 형태.
• calc()에서 괄호 안에 %를 적용하면 가변성을 줄 수 있다.
• 유연하게 산술연산식의 결과를 속성값으로 지정할 수 있다.

미디어 쿼리

• 반응형 웹의 꽃. 미디어 타입을 인식한다.

@media 미디어_타입 and (조건문(쿼리)) {
	선택자 {
		속성 : 값;
	}
}

• 미디어 타입 : screen (가장 보편적) / print(인쇄 결과물) / speech(음성 열람시)
• 조건문에서는 화면의 너비가 가장 많이 사용된다.
• min-width / max-width 를 잘 파악하자.
• width로 지정할 경우, 화면이 정확히 그 값일 때 미디어 쿼리 css가 적용된다.
• 가장 흔하게는 css 구문 안에서 미디어 쿼리를 적용하지만, link 태그에 미디어 쿼리를 추가할 수도 있고, @import 구문을 이용해 추가할 수도 있다. (잘 사용되지 않지만 알고는 있기)

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

@import url("style.css") screen and (max-width: 768px);

가변 이미지

• 브라우저가 이미지의 비율을 대체로 유지하기 때문에, 상대 단위를 사용하거나 이미지가 무작정 커지는 것을 주의해야 한다.
• 이미지가 무작정 커진다면, max-width(max-height)를 적용한다.
• HTML의 와 태그를 이용하면 뷰포트의 너비 등 브라우저의 조건에 따라 이미지를 반응형으로 불러올 수 있다.

	<picture>
		<source srcset=“” media=“(min-width: 1200px)”>
		<source srcset=“” media=“(min-width: 800px)”>
		<img src=“”>
	</picture>

$\qquad$ → 이미지를 width에 따라 교체하기 보다는 해상도/비율 별로 같은 이미지를 교체하고 싶을 떄 유용하다.

가변 동영상

• 이미지와 마찬가지로 동영상을 가변적으로 처리할 수 있다.
• 동영상 서비스에 따라 조금씩 성질이 다르다.

1. 비디오 소스를 가지고 있는 경우 → <video>, control 속성, <source> 사용. 특별한 문제가 없다.
2. 비디오 소스 없이 동영상 사이트에서 공유받을 경우.
   → 소스를 div로 감싼 뒤 소스의 종횡비에 따라 div에 여백을 주고, div를 relative, 소스를 absolute로 포지셔닝한 후 소스의 width, height을 100%로 적용한다.