[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기

[HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기

[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 [HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 -..

onelight-stay.tistory.com

미디어 쿼리에 대해 알아보았으니

미디어 쿼리를 적용하는 시간을

가져보도록 하자.

외부 CSS 파일 연결하기

외부 스타일 시트 파일로 따로 저장한 후 웹 문서 연결을 해보려 한다.

- <link> 태그 사용하기 -

특정 조건에 맞을 경우 지정한 CSS 파일을 가져와 적용하라는 의미로

가장 많이 사용하는 방법이다.

해당 태그는 <head> 태그와 </head> 태그 사이에 삽입하면 된다.

예시 구문으로 화면 너비가 768px 이하일 경우

태블릿용 스타일 시트 파일을 적용하라는 의미이다.

- @import 구문 사용하기 -

예시 구문으로 화면 너비가 321px 이상 768px 이하일 때

적용하라는 의미이다.

웹 문서에서 직접 정의하기

미디어 쿼리를 웹 문서에 직접 정의하는 두 가지 방법이 있다.

- 첫번째 방법 -

첫 번째 방법은 <style> 태그 안에서 media 속성을 사용해

조건을 지정하고 그 조건에 맞는 스타일을 정의하는 것이다.

해당 소스는 최대 너비가 320px 일 때 적용할 미디어 쿼리이다.

- 두번째 방법 -

두 번째 방법은 스타일을 선언할 때 @media 구문을 사용해

조건별로 스타일을 지정해 놓고 선택적으로 스타일을 적용하는 것이다.

즉, 여러 조건에 따른 스타일을 모두 나열해 놓고

그중에서 선택적으로 스타일을 사용하는 것이다.

해당 소스는 너비가 320px 이하일 때

배경 색을 주황색으로 바꾸라는 미디어 쿼리이다.

미디어 쿼리에 대한 개념을 알아보았을 때에는

막연해서 이해하기가 어려웠는데

이렇게 코드에 넣어 적용하는 것을 보면서 진행해서

전보다 훨씬 이해하는데 빠른 것 같다.

다음엔 미디어 쿼리를 사용해 웹 문서를 만들어 보도록 해야겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들 (0)	2020.08.10
[HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 (0)	2020.08.09
[HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 (0)	2020.08.05
[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 (0)	2020.08.04
[HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 (0)	2020.08.03

IT Information Notebook

[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기