728x90
layout2.html
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<title>Document</title>
<style>
body { background: #b71c1c; color: #fff;}
h1::before {content: '1.';}
h1::after {content: ' - 기본';}
/* 화면 너비가 0 ~ 1280px 일때 (데스크탑정도)*/
@media (max-width: 1280px)
{
body {background: #880e4f;} /*배경의 색 바꿈*/
h1::before {content: '2.';}
h1::after {content: ' - 1025px ~ 1280px';}
}
/* 화면 너비가 0 ~ 1024px 일때 (데스크탑정도)*/
@media (max-width: 1024px)
{
body {background: #4a148c;} /*배경의 색 바꿈*/
h1::before {content: '3.';}
h1::after {content: ' - 961px ~ 1024px';}
}
/* 화면 너비가 0 ~ 960px 일때 (노트북정도)*/
@media (max-width: 960px)
{
body {background: #311b92;} /*배경의 색 바꿈*/
h1::before {content: '4.';}
h1::after {content: ' - 768px ~ 961px';}
}
/* 화면 너비가 0 ~ 768px 일때 (타블렛정도)*/
@media (max-width: 768px)
{
body {background: #4a148c;} /*배경의 색 바꿈*/
h1::before {content: '5.';}
h1::after {content: ' - 576px ~ 768px';}
}
/* 화면 너비가 0 ~ 576px 일때 (모바일정도)*/
@media (max-width: 576px)
{
body {background: #004d40;} /*배경의 색 바꿈*/
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 : 미디어 쿼리를 해석해야 할 대상을 나타냅니다. (생략가능)
<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>
<li>and : 앞과 뒤의 조건을 나타냅니다. (생략가능) </li>
<li>(조건문) : 해당 조건을 설정할 수 있습니다. </li>
<li>{실행문} : 조건에 따른 실행을 설정합니다. </li>
</ul>
</body>
</html>728x90
'프론트엔드 > 반응형 사이트 만들기' 카테고리의 다른 글
| 반응형 사이트 - 반응형 레이아웃 유형1 (0) | 2021.11.25 |
|---|---|
| 반응형 사이트 - 시멘틱 태그 (0) | 2021.11.23 |