본문 바로가기
웹 개발

14. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 5

by 곽정우 2024. 4. 12.

1. 미디어 쿼리1

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

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

2. 미디어 쿼리 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어쿼리2</title>
    <link rel="stylesheet" href="./css/media.css">
</head>
<body>
    <div id="container">
        <header>
            <nav>
                <ul>
                    <li>인스타그램</li>
                    <li>유튜브</li>
                    <li>페이스북</li>
                    <li>트위터</li>
                </ul>
            </nav>
        </header>
        <div id="contents">
            <section id="intro">
                <img src="./images/facebook.png" alt="페이스북">
                <img src="./images/youtube.png" alt="유튜브">
                <img src="./images/instagram.png" alt="인스타그램">
                <img src="./images/twitter.png" alt="트위터">
            </section>
            <section id="desc" class="text">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed neque ea mollitia beatae aspernatur porro, veniam vitae eligendi excepturi doloremque, ad aliquid voluptatibus? Aliquid tenetur quas dolorum obcaecati quae perspiciatis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, quisquam doloremque. Autem quo minus ducimus, enim unde sint optio a est tempora, dignissimos ipsa aperiam iste iure saepe architecto sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident sapiente corporis eos consequuntur facere facilis vitae, error blanditiis aperiam fugiat eligendi voluptatibus nostrum eum eaque nemo totam rem sint iusto.</p>
            </section>
        </div>
        <footer>
            <p>copyright 2024 by 곽정우</p>
        </footer>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

nav > ul {
    height: 50px;
    list-style: none;
    color: gold;
    font-size: 12px;
}

nav > ul > li {
    float: left;
    padding: 10px;
    margin: 5px 5px;
}

/*
    구형폰: 320px;
    읿반폰: 360px ~
*/

nav, #contents {
    width: 320px;
    margin: 0 auto;
}

#intro > img {
    width: 100%;
    padding: 10px;
}

#desc {
    width: 100%;
    padding: 10px;
    line-height: 1.5;
}

footer {
    width: 100%;
    height: 50px;
    padding: 10px;
    background-color: black;
    color: white;
}

footer > p {
    text-align: center;
    font-size: 16px;
    line-height: 25px;
}

/* 태블릿: 768px ~ */
@media screen and (min-width: 768px) {
    nav > ul {
        font-size: 20px;
        height: 80px;
    }

    nav > ul > li {
        margin: 20px 25px;
    }

    nav, #contents {
        width: 750px;
        margin: 0 auto;
    }

    #intro {
        width: 100%;
    }

    #intro > img {
        width: 22%;
        padding: 10px;
    }

    #desc {
        width: 100%;
        padding: 10px;
        margin: 10px auto;
    }

    footer {
        height: 70px;
        padding: 10px;
    }

    footer > p {
        font-size: 20px;
        line-height: 50px;
    }
}

/* 데스크탑: 1024px ~ */
@media screen and (min-width: 1024px) {
    nav, #contents {
        width: 1000px;
        margin: 0 auto;
    }

    #intro > img {
        width: 10%;
        padding: 10px;
        float: left;
        margin-right: 20px;
    }

    #desc {
        height: auto;
        font-size: 20px;
        padding: 10px;
    }

    footer {
        clear: both;
    }
}

3. 반응형 웹 사이트 예제

PC버전
태블릿 버전
휴대폰 버전

<!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/solo.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>
#container {
    width: 100%;
}

header {
    width: 100%;
}

header > h1 {
    text-align: center;
    font-size: 3em;
}

#menus {
    width: 100%
}

#menus > div {
    height: 400px;
    border: 1px solid black;
    margin-bottom: 15px;
    position: relative;
}

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

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

#menu1 {
    background: url(../images/dish1.jpg) no-repeat center/cover;
}

#menu2 {
    background: url(../images/dish2.jpg) no-repeat center/cover;
}

#menu3 {
    background: url(../images/dish3.jpg) no-repeat center/cover;
}

#menu4 {
    background: url(../images/dish4.jpg) no-repeat center/cover;
}

#menu5 {
    background: url(../images/dish5.jpg) no-repeat center/cover;
}

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

footer > p {
    font-size: 1.5em;
    color: white;
    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%;
    }
}

 

'웹 개발' 카테고리의 다른 글

15. CSS 스타일링 기술(우선순위&Custom&Graphic)  (0) 2024.04.12
과제- 웹 사이트 CSS 적용 하기(뉴스기사,즐겨찾기,이력서,로그인,회원가입)  (0) 2024.04.12
13. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 4  (0) 2024.04.12
12. CSS레이아웃과 스타일링  (0) 2024.04.12
11.웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 3  (1) 2024.04.09

관련글

티스토리툴바