티스토리 뷰
반응형
반응형 웹 - 미디어 쿼리를 사용해 사이트 구성하기
- 미디어 쿼리는 웹 문서 안에서 @media 구문 다음에 조건에 맞는 CSS 규칙을 직접 추가해 구현할 수도 있고 각 미디어 조건에 맞는 별도의 CSS 파일을 만들어 <link>태그로 연결해 사용할 수도 있습니다.
1. 외부 CSS 파일 연결하기
- 외부 스타일 시트 파일로 따로 저장한 후 웹 문서에 연결하는 방법
1) <link> 태그 사용하기
- 외부 스타일 시트 파일을 연결할 때 <link> 태그를 이용하는 방법을 가장 많이 사용합니다.
- <link> 태그는 <head> 태그와 </head> 태그 사이에 삽입합니다.
- CSS 파일이 많고 대규모 사이트를 개발할 때는 @import 구문보다 <link> 태그를 주로 사용합니다. 사이트를 만들다 보면 CSS 파일이 상당히 많아지기 때문에 @import 구문보다 안정적이고 빠르기 때문에 <link> 태그를 사용하길 권합니다.
기본형 : <link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
위의 구문은 특정 조건에 맞을 경우, 지정한 css 파일을 가져와 적용하라는 뜻입니다. 속성 순서는 상관없습니다.
예를 들어 'css' 폴더에 인쇄용 스타일 시트 print.css를 만들어 놓았다면 아래와 같이 연결할 수 있습니다.
<link rel="stylesheet" media="print" href="css/print.css">
화면 너비가 768px 이하일 때 적용할 태블릿용 스타일 시트 파일을 만들어 놓았다면 조건을 좀 더 추가해 아래와 같이 작성할 수도 있습니다.
<link rel="stylesheet" media="screen and (max-width:768px)" href="css/tablet.css">
2) @import 구문 사용하기
- 외부 CSS 파일을 연결할 때 <link> 태그 대신 @import 구문을 사용할 수도 있습니다.
- @import 구문은 CSS를 정의하는 <style> 태그와 </style> 태그 사이에서 사용합니다.
예를 들어 태블릿 PC에 맞는 스타일 시트 tablet.css를 만들어 두었고 너비가 321px이상이고 768px이하일 때 적용하고 싶다면 아래와 같이 지정할 수 있습니다.
@import url("css/tablet.css") only screen and (min-width:321px) and (max-width:768px);
2. 웹 문서에서 직접 정의하기
- 웹 문서에서 직접 정의하는 방법은 두 가지가 있습니다. 첫 번째 방법은 <style> 태그 안에서 media 속성을 사용해 조건을 지정하고 그 조건에 맞는 스타일을 정의하는 것입니다.
예를 들어 최대 너비가 320px일 때 즉 너비가 320px 이하인 경우에 적용할 미디어 쿼리는
<style media="screen and (max-width:320px)">
body {
background-color : blue;
}
</style>
body {
background-color : blue;
}
</style>
- 두 번째 방법은 스타일을 선언할 때 @media 구문을 사용해 각 조건별로 스타일을 지정해 놓고 선택적으로 스타일을 적용하는 것입니다.
- 첫 번째 방법은 하나의 <style> 태그 안에서 하나의 조건을 지정하지만 이 방법은 <style> 태그 안에 여러 조건에 따른 스타일을 모두 내열해 놓고 그 중 선택적으로 스타일을 사용합니다.
예를 들어 @media 구문을 사용해 화면 너비가 320px 이하일 때 배경 색을 파랑색으로 바꾸는 미디어 쿼리는
<style>
@media screen and (max-width:320px) {
body {
background-color : blue;
}
}
</style>
@media screen and (max-width:320px) {
body {
background-color : blue;
}
}
</style>
반응형
UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML
댓글
© 2019 Eun's