본문 바로가기
웹/CSS

[코딩 공부_72] 반응형 웹 실습하기 3

by BEE_0o0 2021. 5. 9.

오늘은 반응형 웹을 실습하기 위해 내 사랑 무민은 이용해서 간단하게 만들어 보았다

재밌지만 힘들다

media query를 사용할때 {} 열림 닫힘을 잘봐야될거같다 닫혀있는데 밑에다가 media query안에 넣어야할거 줄줄 적어놓고 어! 버그생겼다 !! 이러고 있었으니 .....ㅠㅠ

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>moomin-world</title>
<style>
    /* reset.css */
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    img {
        max-width: 100%;
        vertical-align: top;
    }
    ul {
        list-style: none;
    }
    a {
        color: inherit;
        text-decoration: none;
        display: inline-block;
    }
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    /* gird system */
    .l-grid-1-12 { width: 8.33333333%; }
    .l-grid-2-12 { width: 16.66666667%; }
    .l-grid-3-12 { width: 25%; }
    .l-grid-4-12 { width: 33.33333333%; }
    .l-grid-5-12 { width: 41.66666667%; }
    .l-grid-6-12 { width: 50%; }
    .l-grid-7-12 { width: 58.33333333%; }
    .l-grid-8-12 { width: 66.66666667%; }
    .l-grid-9-12 { width: 75%; }
    .l-grid-10-12 { width: 83.33333333%; }
    .l-grid-11-12 { width: 91.66666667%; }
    .l-grid-12-12 { width: 100%;}

    .l-grid::after {
        content: "";
        display: block;
        clear: both;
    }
    .l-grid {
        max-width: 1440px;
        margin: 0 auto;
        /* display: inline-block; */
    }
    /* layout */
    /* header */
    #moomin-header {
        background: rgb(10, 97, 75);
        padding: 0.2rem;
        height: 100px;
    }
    #moomin-header .logo {
        float: left;
        width: 200px;
    }
    .gnb {
        display: inline-block;
        float: right;
        margin-top: 25px;
        line-height: 2.5;
        margin-right: 2rem;
    }
    .gnb .gnb-item {
        display: inline-block;
        width: 100px;
        text-align: right;
    }
    .gnb .gnb-item a {
        text-transform: uppercase;
        color: #eee;
        font-size: 1.2rem;
    }
    .btn-toggle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 2rem;
        cursor: pointer;
        color: #fff;
        display: none;
        margin-right: 2rem;
        margin-top: 25px;
        line-height: 1.5;

    }
    /* moomin-content */
    .l-grid-item {
        float: left;
        /* border: 1px solid #000; */
    }
    .cover {
        padding-top: 100%;
        position: relative;
        margin: .6rem;
    }
    .cover img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    @media (max-width: 768px) {
        .cover {
            margin: .5rem;
        }
        .l-grid-tablet-1-12 { width: 8.33333333%; }
        .l-grid-tablet-2-12 { width: 16.66666667%; }
        .l-grid-tablet-3-12 { width: 25%; }
        .l-grid-tablet-4-12 { width: 33.33333333%; }
        .l-grid-tablet-5-12 { width: 41.66666667%; }
        .l-grid-tablet-6-12 { width: 50%; }
        .l-grid-tablet-7-12 { width: 58.33333333%; }
        .l-grid-tablet-8-12 { width: 66.66666667%; }
        .l-grid-tablet-9-12 { width: 75%; }
        .l-grid-tablet-10-12 { width: 83.33333333%; }
        .l-grid-tablet-11-12 { width: 91.66666667%; }
        .l-grid-tablet-12-12 { width: 100%;}
        .gnb {
            display: none;
        }
        .btn-toggle {
            display: block;
        }
    }
    
    @media (max-width: 480px) {
        .cover {
            margin: .2rem;
        }
        .l-grid-mobile-1-12 { width: 8.33333333%; }
        .l-grid-mobile-2-12 { width: 16.66666667%; }
        .l-grid-mobile-3-12 { width: 25%; }
        .l-grid-mobile-4-12 { width: 33.33333333%; }
        .l-grid-mobile-5-12 { width: 41.66666667%; }
        .l-grid-mobile-6-12 { width: 50%; }
        .l-grid-mobile-7-12 { width: 58.33333333%; }
        .l-grid-mobile-8-12 { width: 66.66666667%; }
        .l-grid-mobile-9-12 { width: 75%; }
        .l-grid-mobile-10-12 { width: 83.33333333%; }
        .l-grid-mobile-11-12 { width: 91.66666667%; }
        .l-grid-mobile-12-12 { width: 100%;}
        .gnb {
            display: none;
        }
        .btn-toggle {
            display: block;
        }
    }
</style>
</head>
<body>
    <div class="wrap">
        <div class="inner">
            <header id="moomin-header" class="clearfix">
                <img src="./image/Untitled-1 copy.png" class="logo" alt="">
                <ul class="gnb active">
                    <li class="gnb-item">
                        <a href="#">menu1</a>
                    </li>
                    <li class="gnb-item">
                        <a href="#">menu2</a>
                    </li>
                    <li class="gnb-item">
                        <a href="#">menu3</a>
                    </li>
                </ul>
                <div class="btn-toggle">
                    <i class="fas fa-bars"></i>
                </div>
            </header>
            <script>
                function handleToggle() {
                    var gnb = document.querySelector('.gnb');
                    gnb.classList.toggle('active');
                }
                // onclick="handleToggle();"
            </script>
            <section class="moonin-content">
                <div class="l-grid">
                    <div class="l-grid-item l-grid-3-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-3-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-3-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-3-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-4-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-4-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-4-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-6-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-6-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                    <div class="l-grid-item l-grid-12-12 l-grid-tablet-6-12 l-grid-mobile-12-12">
                        <div class="cover">
                            <img src="./image/8c6f0688b77c5.jpg" alt="">
                        </div>
                    </div>
                </div>
                <i class="fab fab-bar"></i>
            </section>

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

 

저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_74] 한화 솔루션/케미칼 클론코딩(미완성)  (0) 2021.05.11
[코딩 공부_73] 반응형 웹, 넷플릭스 실습하기  (0) 2021.05.10
[코딩 공부_71] 반응형 웹 실습하기 2  (0) 2021.05.08
[코딩 공부_70] **media query 순서 / 반응형 웹 실습하기_1  (0) 2021.05.08
[코딩 공부_69] css의 클래스명에 대하여  (0) 2021.05.08

관련글

댓글

티스토리툴바