CSS3 멀티미디어 쿼리 예

CSS3 멀티미디어 쿼리 예제

이 장에서는 몇 가지 멀티미디어 쿼리 예제를 보여드리겠습니다.

시작하기 전에 이메일 주소의 링크 목록을 만들어 보겠습니다. HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
</style>
</head>
<body>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

data-email 속성에 주의하세요. HTML에서는 정보를 저장하기 위해 data- 접두사가 붙은 속성을 사용할 수 있습니다.

520~699px 너비 - 이메일 아이콘 추가

브라우저 너비가 520~699px인 경우 이메일 링크 앞에 이메일 아이콘을 추가하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

700~1000px - 텍스트 접두사 정보 추가

브라우저 너비가 700~1000픽셀 사이인 경우 이메일 링크 앞에 "이메일:"이 추가됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

가 1001픽셀 너비보다 큽니다. - 이메일 주소를 추가하세요.

브라우저 너비가 다음과 같은 경우 1001px보다 크면 연결할 이메일 주소 추가 링크 뒤에 표시됩니다.

data- 속성을 사용하여 각 사람의 이름 뒤에 이메일 주소를 추가합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

너비가 1151px보다 큼 - 아이콘 추가

브라우저 너비가 1001px보다 크면 아이콘이 사람 이름 앞에 추가됩니다.

예제에서는 추가 쿼리 블록을 작성하지 않았으며 기존 쿼리 미디어 뒤에 쉼표 구분을 사용하여 다른 미디어 쿼리를 추가할 수 있습니다(OR 연산자와 유사):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; display: block; } @media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; background: url(../style/images/email-icon.png) left center no-repeat; } } @media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } </style> </head> <body> <h1>重置浏览器窗口，查看效果!</h1> <ul> <li><a data-email="johndoe@example.com" href="">John Doe</a></li> <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li> <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li> </ul> </body> </html>

제출하다 코드 재설정

자동운전