사용방법
@media 미디어타입 and (미디어특징){
css 설정
}
미디어 종류
- all : 모든 장치
- screen : ghkaus
- tv : 텔레비전
- print : 프린트
- projection : 프로젝트
미디어 타입에 사용할 수 있는 연산자
- and : 미디어 타입과 미디어 특징을 연결하기 위한 연산자.
- only: 해당 장치에서만을 의미할때
- not : 해당 장치를 제외할 때
미디어 특징
- width : 화면의 너비
- height : 화면의 높이
- divice-width : 장치 너비
- device-height : 장치 높이
- orientation : 장치 방향
- max-width : 최대 크기
- min-width: 최소크기
적용
- 안에서 설정 : @media 미디어쿼리 { css설정 }
- 밖에서 설정 : <link rel="stylesheet" href="css경로" media ="미디어쿼리">
예시
@media screen{
/*css 설정*/
}
@media print{
/*css 설정*/
}- 내부 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen{
body{background:#000;}
}
@media print{
body{background:blue;}
}
</style>
</head>
<body>
<h1>Hello HTML!!</h1>
<p>앨리슨 교수는 오염수가 안전하다면 식수나 공업용수로 활용해야 하는 것 아니냐는 일각의 주장에 대해 "해양 방류는 가장 쉽고 비용이 적게 들기 때문에 선택한 것"이라며 "일본 정부가 공포감을 느끼는 사람들을 위해 안전 조치를 하는데, 이미 안전한 걸 더 안전하다고 하면 사람들은 오히려 '안전하지 않다'는 잘못된 생각을 가질 수 있다"고 설명했다.</p>
</body>
</html>- 외부 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="style2.css" media="print">
</head>
<body>
<h1>외부 스타일</h1>
<p>앨리슨 교수는 오염수가 안전하다면 식수나 공업용수로 활용해야 하는 것 아니냐는 일각의 주장에 대해 "해양 방류는 가장 쉽고 비용이 적게 들기 때문에 선택한 것"이라며 "일본 정부가 공포감을 느끼는 사람들을 위해 안전 조치를 하는데, 이미 안전한 걸 더 안전하다고 하면 사람들은 오히려 '안전하지 않다'는 잘못된 생각을 가질 수 있다"고 설명했다.</p>
</body>
</html>/*style*/
body{
background:#000;
}/*style2*/
body{
background:blue;
}
미디어 특징을 사용하여 장치를 구분하기
- 화면이면서 최대 너비가 767px 일 때 phone.css 를 설정
<link rel="stylesheet href="phone.css" media="screen and (max-width: 767px)">- 화면이면서 최소 너비가 768px 최대 너비가 959px 일때 tablet .css 를 설정하기
<link rel="stylesheet href="tablet.css" media="screen and (min-width: 768px) and (max-width: 959px)">- 화면이면서 최소 너비가 960일 때 desktop .css를 설정하기
<link rel="stylesheet href="desktop.css" media="screen and (min-width: 960px)">
- 내부 스타일 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 스마트폰 */
@media screen and (max-width:767px) {
body{
background:olive;
}
}
/* 태블릿 */
@media screen and (min-width:768px) and (max-width: 959px){
body{
background: salmon;
}
}
/* 데탑 */
@media screen and (min-width:960px){
body{
background: darkcyan;
}
}
</style>
</head>
<body>
<h1>내부 스타일</h1>
<p>앨리슨 교수는 오염수가 안전하다면 식수나 공업용수로 활용해야 하는 것 아니냐는 일각의 주장에 대해 "해양 방류는 가장 쉽고 비용이 적게 들기 때문에 선택한 것"이라며 "일본 정부가 공포감을 느끼는 사람들을 위해 안전 조치를 하는데, 이미 안전한 걸 더 안전하다고 하면 사람들은 오히려 '안전하지 않다'는 잘못된 생각을 가질 수 있다"고 설명했다.</p>
</body>
</html>- 외부 스타일 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="phone.css" media="screen and (max-width:767px)">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:768px) and (max-width: 959px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width:960px)">
</head>
<body>
<h1>외부 스타일</h1>
<p>앨리슨 교수는 오염수가 안전하다면 식수나 공업용수로 활용해야 하는 것 아니냐는 일각의 주장에 대해 "해양 방류는 가장 쉽고 비용이 적게 들기 때문에 선택한 것"이라며 "일본 정부가 공포감을 느끼는 사람들을 위해 안전 조치를 하는데, 이미 안전한 걸 더 안전하다고 하면 사람들은 오히려 '안전하지 않다'는 잘못된 생각을 가질 수 있다"고 설명했다.</p>
</body>
</html>/*desktop.css*/
body{
background: darkcyan;
}/*tablet.css*/
body{
background: salmon;
}/*phone.css*/
body{
background:olive;
}
화면 방향 전환에 따른 css 설정(orientation)
- 세로방향 설정
@media screen and(orientation : portrait){
}
- 가로방향 설정
@media screen and(orientation : landscape){
}- 내부 스타일 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maxmum-scale=2.0" >
<title>Document</title>
<style>
/*장치 방향이 세로일 때*/
@media screen and (orientation : portrait) {
body{
background:pink;
}
}
/*장치 방향이 가로일 때*/
@media screen and (orientation : landscape){
body{
background:green;
}
}
</style>
</head>
<body>
<h1>내부 스타일</h1>
<p>앨리슨 교수는 오염수가 안전하다면 식수나 공업용수로 활용해야 하는 것 아니냐는 일각의 주장에 대해 "해양 방류는 가장 쉽고 비용이 적게 들기 때문에 선택한 것"이라며 "일본 정부가 공포감을 느끼는 사람들을 위해 안전 조치를 하는데, 이미 안전한 걸 더 안전하다고 하면 사람들은 오히려 '안전하지 않다'는 잘못된 생각을 가질 수 있다"고 설명했다.</p>
</body>
</html>
일반적인 미디어 쿼리 작성 순서
- 보통은 일단 데스크탑 전용으로 만들고 뒤에 태블릿과 스마트폰에 맞도록 적용한다.
<style>
/*데스크탑 전용 css를 쭉 설정*/
@media 태블릿pc{
}
@media 스마트폰{
}
</style>
'Kosta DevOps 과정 280기 > Java' 카테고리의 다른 글
| 문서 객체 모델 (0) | 2024.07.10 |
|---|---|
| 객체 (0) | 2024.07.10 |
| 반응형 웹 (0) | 2024.07.08 |
| 수평 레이아웃 (가로로 배치하기) (0) | 2024.07.08 |
| 그림자 설정하기 (0) | 2024.07.08 |