본문 바로가기
개발/HTML,CSS

2023.03.30 CSS의 미디어쿼리

by 상달군 2023. 3. 30.
728x90

목차

1. CSS의 미디어쿼리( Media Query)

  • 미디어쿼리
  • 사용예제 1
  • 사용예제 2
  • 솔로의 식탁(예제)

1. CSS의 미디어쿼리( Media Query)

 

🔴반응형웹 

하나의 웹사이트에서 pc,스마트폰,태블릿등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법


   ✔사용방법

        @media 매체유형키워드 and (속성에 대한 조건){
            css코드 작성
            ....
            ....
            ....
        }

 

    ✔ 매체유형

     - all: 모든 매체
     - screen: 컴퓨터, 태블릿, 스마트폰....
     - print: 프린터
     - speech: 스크린 리더

 

🔴사용예제 1

     HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어 쿼리 1</title>
    <style>
        body {background-color: beige;}

        @media screen and (min-width: 1024px) {
            body {background-color: deepskyblue;}
        }
    </style>
</head>
<body>
    <h2>미디어 쿼리 1</h2>
</body>
</html>

     css 코드

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#container{
    width: 100%;
}

header {
    width: 100%;
    background-color: black;
    margin-bottom: 20px;
}

nav > ul {
    height: 50px;
    margin: 0;
    list-style: none;
    color: gold;

}
nav > ul > li{
    float: left;
    padding: 10px;
    margin: 5px 5px;
}
/*
    구형폰: 320px
    일반폰: 360px ~ 
*/
nav, #contents {
    width: 320px;
    margin: 0 auto;

}

nav > ul {
    font-size: 12px;
}

#intro{
    width: 100%;
    margin-bottom: 20px;
}

#intro > img {
    width: 100%;
    padding: 10px;
}
#desc{
    width: 100%;
    padding: 10px;
    line-height: 1.5;
    font-size: 16px;
}

footer{
    width: 100%;
    height: 50px;
    padding: 20px;
    background-color: black;
    color: #fff;
}

footer > p {
    text-align: center;
    font-size: 15px;
    line-height: 12px;
}
/* 테블릿: 768px ~ */

@media screen and (min-width: 768px) {
    nav > ul {font-size: 18px; height: 80px;}
    nav > ul > li {margin: 20px 5px;}
    nav, #contents {
        width: 750px;
        margin: 0 auto;
    }
    #intro {
        width: 100%;
    }
    #intro > img{
        width: 24%;
        padding: 10px;
    }
    #desc {
        width: 100%;
        padding: 10px;
        margin: 0 auto;
    }
    footer {
        
        padding: 30px;
        height: 70px;
    }
    footer >p {
        font-size: 18px;
    }
}


/*데스크탑 : 1024px ~*/
@media screen and (min-width: 1024px) {
    nav, #contents {
        width: 1000px;
        margin: 0 auto;
    }
    
    #intro > img {
        width: 10%;
        padding: 10px;
        float: left;

    }
    #desc {
        display: inline-block;
        width: 400px;
        height: auto;
        padding: 10px;
        font-size: 20px;
    }

    footer {
        clear: both;
    }
}

🔴사용예제 2

      HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어 쿼리 2</title>
    <link rel="stylesheet" href="./css/media.css">
    <style></style>
</head>
<body>
    <div id="container">
        <header>
            <nav>
                <ul>
                    <li>인스타그램</li>
                    <li>유튜브</li>
                    <li>페이스북</li>
                    <li>트위터</li>
                </ul>
            </nav>
        </header>
    </div>
    <div id="contents">
        <section id="intro">
            <img src="./images/insta.png" alt="인스타그램">
            <img src="./images/youtube.png" alt="유튜브">
            <img src="./images/facebook.png" alt="페이스북">
            <img src="./images/twitter.png" alt="트위터">
        </section>
        <section id="desc" class="text">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio quisquam dolor voluptates excepturi voluptatum nesciunt eaque eius numquam quae delectus provident quos, voluptate et illum asperiores velit eveniet. Nihil, officia?</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio quisquam dolor voluptates excepturi voluptatum nesciunt eaque eius numquam quae delectus provident quos, voluptate et illum asperiores velit eveniet. Nihil, officia?</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio quisquam dolor voluptates excepturi voluptatum nesciunt eaque eius numquam quae delectus provident quos, voluptate et illum asperiores velit eveniet. Nihil, officia?</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio quisquam dolor voluptates excepturi voluptatum nesciunt eaque eius numquam quae delectus provident quos, voluptate et illum asperiores velit eveniet. Nihil, officia?</p>

        </section>
    </div>
    <footer><p>작성자 2023 by 나창대</p></footer>
</body>
</html>

      CSS 코드

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#container{
    width: 100%;
}

header {
    width: 100%;
    background-color: black;
    margin-bottom: 20px;
}

nav > ul {
    height: 50px;
    margin: 0;
    list-style: none;
    color: gold;

}
nav > ul > li{
    float: left;
    padding: 10px;
    margin: 5px 5px;
}
/*
    구형폰: 320px
    일반폰: 360px ~ 
*/
nav, #contents {
    width: 320px;
    margin: 0 auto;

}

nav > ul {
    font-size: 12px;
}

#intro{
    width: 100%;
    margin-bottom: 20px;
}

#intro > img {
    width: 100%;
    padding: 10px;
}
#desc{
    width: 100%;
    padding: 10px;
    line-height: 1.5;
    font-size: 16px;
}

footer{
    width: 100%;
    height: 50px;
    padding: 20px;
    background-color: black;
    color: #fff;
}

footer > p {
    text-align: center;
    font-size: 15px;
    line-height: 12px;
}
/* 테블릿: 768px ~ */

@media screen and (min-width: 768px) {
    nav > ul {font-size: 18px; height: 80px;}
    nav > ul > li {margin: 20px 5px;}
    nav, #contents {
        width: 750px;
        margin: 0 auto;
    }
    #intro {
        width: 100%;
    }
    #intro > img{
        width: 24%;
        padding: 10px;
    }
    #desc {
        width: 100%;
        padding: 10px;
        margin: 0 auto;
    }
    footer {
        
        padding: 30px;
        height: 70px;
    }
    footer >p {
        font-size: 18px;
    }
}


/*데스크탑 : 1024px ~*/
@media screen and (min-width: 1024px) {
    nav, #contents {
        width: 1000px;
        margin: 0 auto;
    }
    
    #intro > img {
        width: 10%;
        padding: 10px;
        float: left;

    }
    #desc {
        display: inline-block;
        width: 400px;
        height: auto;
        padding: 10px;
        font-size: 20px;
    }

    footer {
        clear: both;
    }
}

🔴솔로의 식탁(예제)

      HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>솔로의 식탁</title>
    <link rel="stylesheet" href="./css/style.css">

</head>
<body>
    <div id="container">
        <header>
            <h1>솔로의 식탁</h1>
        </header>
        <section id="menus">
            <div id="menu1">
                <h2>밥/죽</h2>
            </div>
            <div id="menu2">
                <h2>샐러드</h2>
            </div>
            <div id="menu3">
                <h2>반찬</h2>
            </div>
            <div id="menu4">
                <h2>토스트</h2>
            </div>
            <div id="menu5">
                <h2>음료/칵테일</h2>
            </div>
        </section>

        <footer><p>솔로의 식탁!</p></footer>

    </div>
</body>
</html>

      CSS 코드

#container {
    width: 100%;
}

header{
    width: 100%;
}

header > h1 {
    text-align: center;
    font-size: 3em; /*pc:16px = 1em , mobile:12px = 1em*/
}

#menus {
    width: 100%;
}

#menus > div {
    height: 400px;
    border: 1px solid black;
    margin-bottom: 15px;
    position: relative; /* div 포지션을 잡지 않으면 body 기준이 된다.*/
}

#menus h2 {
    position: absolute;
    right: 3%;
    bottom: 10px;
    font-size: 2em;
    color: #fff;
    text-shadow: 3px 3px 5px black;
}

#menu1, #menu2, #menu3, #menu4, #menu5 {
    width: 100%;
    
}

#menu1 {
    background: url(../images/dish1.jpg) no-repeat center;
    background-size: cover;
}
#menu2 {
    background: url(../images/dish2.jpg) no-repeat center;
    background-size: cover;
}
#menu3 {
    background: url(../images/dish3.jpg) no-repeat center;
    background-size: cover;
}
#menu4 {
    background: url(../images/dish4.jpg) no-repeat center;
    background-size: cover;
}
#menu5 {
    background: url(../images/dish5.jpg) no-repeat center;
    background-size: cover;
}

footer {
    width: 100%;
    background-color: black;
    height: 100px;
    
}

footer > p{
    font-size: 1.5em;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

@media screen and (min-width: 768px) {
    #menus {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }    

    #menu1, #menu2, #menu3, #menu4 {
        width: 49%;
    }

}

@media screen and (min-width: 1024px) {
    #menu1, #menu2, #menu3, #menu4 {
        width: 32%;
    }
    /* #menu5 {
        width: 66%;
    } */
    #menu5 {
        flex-basis: 0;
        flex-grow: 2;
        flex-shrink: 1;
        margin-left: 1.7%;
    }
}

 

728x90

'개발 > HTML,CSS' 카테고리의 다른 글

2023.04.03 CSS의 트랜스폼, 애니메이션, 우선순위  (0) 2023.04.03
2023.03.30 CSS의 레이아웃, 플렉스  (0) 2023.03.30
2023.03.29 CSS의 포지션, Z-index, float, clear  (3) 2023.03.29
2023.03.29 CSS의 배경, 박스모델, 박스사이징, 디스플레이,폼  (0) 2023.03.29
2023.03.28 CSS의 컬러, 텍스트  (1) 2023.03.28

관련글

댓글

티스토리툴바