본문 바로가기
웹/CSS

[코딩 공부_71] 반응형 웹 실습하기 2

by BEE_0o0 2021. 5. 8.

반응형 웹을 실습하는 시간을 가졌다 요새 자꾸 이상한 오타로 시간을 지체하고 있다.. 수업시간에 하다보면 오타때문에 안되는 경우가 많은데 그럴때는 그냥 슥 넘기고 해야하지만 그게 잘안된다 😥 오류가 떴는데 그냥 넘기고 다른 걸 하는게 너무 힘들다 ㅠㅠ.. 그래서 시간이 더 오래 걸리는 거 같다..

<알파카 header 만들기>

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>
    responsive  header
</title>
<style>
    * {
        padding: 0;
    }
    body {
        margin: 0;
    }
    img {
        max-width: 100%;
        vertical-align: top;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: inherit;
        display: block;
    }
    .clear-fix:after {
        content: '';
        display: block;
        clear: both;
    }
    #header {
        background: #83A887;
        padding: 0 2rem;
    }
    #header .logo {
        float: left;
    }
    .gnb {
        float: right;
        margin-top: 25px;
        /* background: skyblue; */
    }
    .gnb .gnb-item {
        display: inline-block;
        width: 100px;
        text-align: center;
    }
    .gnb .gnb-item a {
        text-transform: uppercase;
        color: #e6e6e6;
        font-size: 1.2rem;
    }
    .btn-toggle {
        position: absolute;
        top: 15px;
        right: 2rem;
        font-size: 2rem;
        cursor: pointer;
        display: none;
        color: #fff;
    }
    @media (max-width: 768px) {
        .gnb {
            float: none;
            clear: both;
            display: none;
            padding: 1rem 0;
        }
        .gnb.active {
            display: block;
        }
        .gnb .gnb-item {
            display: block;
            margin: 1rem auto;
            /* 
                <initial value>
                width, height: auto
             */
            width: 150px;
        }
        .gnb .gnb-item a {
            font-size: 1.5rem;
        }
        .gnb .gnb-item a:hover {
            background: pink;
        }
        .btn-toggle {
            display: block;
        }
    }
</style>
</head>
<body>
    <header id="header" class="clear-fix">
        <img src="./image/alpaca_coding2.png" class="logo" alt="alpaca">
        <ul class="gnb">
            <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" onclick="handleToggle();">
            <i class="fas fa-bars"></i>
        </div>
    </header>
    <script>
        function handleToggle() {
            var toggleBtn = document.querySelector('.gnb');
            toggleBtn.classList.toggle('active');
        }

    </script>
</body>
</html>

선생님께서 알파카를 많이 닮으셨는데 센스있게 실습을 준비해주셨다 귀여운 알파카 그림까지 완벽..★

 

 

<그리드 시스템>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
    grid system
</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    img {
        max-width: 100%;
        vertical-align: top;
    }
    /* grid 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;
    }
    .l-grid-item {
        float: left;
    }
    .cover {
        /* grid-item의 넓이값을 100% 가져온다 > 정사각형을 그린다 */
        padding-top: 100%;
        position: relative;
        margin: 1rem;
    }
    .cover img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @media (max-width: 768px) {
        .cover {
            margin: .5rem;
        }
         /* grid tablet system */
        .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%;}
    }
    @media (max-width: 480px) {
        .cover {
            margin: .2rem;
        }
         /* grid mobile system */
        .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%;}
    }
</style>
</head>
<body>

    <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/float-item2.png" 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/float-item2.png" alt="">
            </div>
        </div>
        <div class="l-grid-item l-grid-3-12 l-grid-tablet-3-12 l-grid-mobile-12-12">
            <div class="cover">
                <img src="./image/float-item2.png" alt="">
            </div>
        </div>
        <div class="l-grid-item l-grid-3-12 l-grid-tablet-3-12 l-grid-mobile-12-12">
            <div class="cover">
                <img src="./image/float-item2.png" alt="">
            </div>
        </div>
        <div class="l-grid-item l-grid-4-12 l-grid-tablet-3-12 l-grid-mobile-12-12">
            <div class="cover">
                <img src="./image/float-item2.png" alt="">
            </div>
        </div>
        <div class="l-grid-item l-grid-4-12 l-grid-tablet-3-12 l-grid-mobile-12-12">
            <div class="cover">
                <img src="./image/float-item2.png" 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/float-item2.png" 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/float-item2.png" 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/float-item2.png" alt="">
            </div>
        </div>
        <div class="l-grid-item l-grid-12-1 l-grid-tablet-6-12 l-grid-mobile-12-12">
            <div class="cover">
                <img src="./image/float-item2.png" alt="">
            </div>
        </div>
    </div>

</body>
</html>

* 알파카 헤더 실습할 떄 너무 힘들었다,, 작아졌을 때 btn-toggle 부분을 클릭하면 menu가 나와야하는데 안나와서 고생을 많이 했지만 역시 오타떄문이었다.. 노트북 키보드에서 그냥 컴퓨터 키보드라해야하나 그런 키보드로 바꾸고 난 뒤부터 오타가 엄청 나고 있다 ㅠㅠ.. 얼른 적응해야겠다..

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

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

[코딩 공부_73] 반응형 웹, 넷플릭스 실습하기  (0) 2021.05.10
[코딩 공부_72] 반응형 웹 실습하기 3  (0) 2021.05.09
[코딩 공부_70] **media query 순서 / 반응형 웹 실습하기_1  (0) 2021.05.08
[코딩 공부_69] css의 클래스명에 대하여  (0) 2021.05.08
[코딩 공부_68] 반응형 웹에 대하여  (0) 2021.05.08

관련글

댓글

티스토리툴바