안뇽
[HTML] 미디어쿼리 기본 본문
728x90
728x90
아래코드를 설정하면 화면의 사이즈에 따라 색상이 변경되는것을 확인해 볼수있습니다
<!DOCTYPE html>
<html lang="ko-kr">
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
body {background-color: #0c3869; color:white;}
h1::before {content: '1. ';}
h1::after {content: ' - 기본';}
/* 화면 너비가 0~1280px : 데스크탑 */
@media (max-width: 1280px) {
body {background-color: #880e4f;}
h1::before {content: '2. ';}
h1::after {content: ' - 1025px ~ 1280px';}
}
/* 화면 너비가 0~1024px : 데스크탑*/
@media (max-width: 1024px) {
body {background-color: #4a148c;}
h1::before {content: '3. ';}
h1::after {content: ' - 961px ~ 1024px';}
}
/* 화면 너비가 0~960px : 노트북*/
@media (max-width: 960px) {
body {background-color: #311b92;}
h1::before {content: '4. ';}
h1::after {content: ' - 769px ~ 960px';}
}
/* 화면 너비가 0~768px : 타블렛 */
@media (max-width: 768px) {
body {background-color: #4a148c;}
h1::before {content: '5. ';}
h1::after {content: ' - 577px ~ 768px';}
}
/* 화면 너비가 0~576px : 모바일 */
@media (max-width: 576px) {
body {background-color: #7856a0;}
h1::before {content: '6. ';}
h1::after {content: ' - 0px ~ 576px';}
</style>
</head>
<body>
<h1>미디어 쿼리</h1>
<p>미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술</p>
<p>@media only all and (조건문) {실행문}</p>
<ul>
<li>@media : 미디어 쿼리가 시작됨을 표시</li>
<li>only : 미디어 쿼리 구문을 해석하라는 명령어 (생략가능)</li>
<li>all : 미디어 쿼리를 해석해야 할 대상 (생략가능)</li>
<ul>
<li>all : 모든 미디어 유형에서 사용할 css를 정의한다.</li>
<li>print : 인쇄 장치에서 사용할 css를 정의한다.</li>
<li>screen : 컴퓨터 스크린에서 사용할 css를 정의한다.</li>
<li>aural : 화면을 읽어 소리로 출력해주는 장치에서 사용할 css를 정의한다.</li>
<li>tv : tv에서 사용할 css를 정의한다.</li>
<li>handheld : 손에 들고 다니는 장치를 사용할 css를 정의한다.</li>
<li>projection : 프로젝트를 위한 사용할 css를 정의한다.</li>
</ul>
<li>and : 앞과 뒤의 조건을 나타냄 (생략가능)</li>
<li>(조건문) : 해당 조건을 설정</li>
<li>{실행문} : 조건에 따른 실행을 설정</li>
</ul>
</body>
</html>728x90
320x100
'개발소발 > 퍼블리셔' 카테고리의 다른 글
| [HTML] layout example 3 (0) | 2021.06.01 |
|---|---|
| [HTML] layout example 2 (0) | 2021.06.01 |
| [HTML] layout example 1 (0) | 2021.06.01 |
'개발소발/퍼블리셔' Related Articles
more
Comments