지금 보시는 블로그 창의 크기를 축소하시면 화면의 색이 바뀝니다.

반응형 웹코딩: 미디어 쿼리

Lorem ipsum dolor sit amet

안녕하세요 홍길동입니다.

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 웹코딩: 미디어 쿼리</title>
    <link rel="stylesheet" href="./css/06_media.css">
</head>
<body>
    <!-- 반응형 웹 : 핸드폰, 테블릿, pc 모니터 크기에 따라 변하는 웹  -->
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>안녕하세요 홍길동입니다.</p>
</body>
</html>

css 코드

/* 반응형 웹 css */
/* 사용법 : @media (max-width: 최대크기) { 선택자 { 속성:값; }} */
/* 모니터 최대 크기가 699px 이하일때 빨간색 : 테블릿 */
@media (max-width: 699px) {
    body {
        background-color: red;
    }
}

/* 사용법 : @media (min-width: 최소크기) { 선택자 { 속성:값; }} */
/* 모니터 최소 크기가 900px 이상일때 파란색 : pc */
@media (min-width: 900px) {
    body {
        background-color: blue;
    }
}

/* 사용법 : @media (min-width:최소크기) and (max-width:최대크기) { 선택자 { 속성:값; }} */
/* 모니터 최소 크기가 700px 이상이고 최대크기가 899px 사이일때 녹색 */
@media (min-width: 700px) and (max-width: 899px) {
    body {
        background-color: green;
    }
}

저작자표시