[DAY - 48] em, rem, 모바일 예제(Auto up) — 비 전공자의 Be developer

em
rem
모바일 예제

모바일은 컴퓨터 모니터와 해상도가 다르고 세로가 긴 비율이기 때문에 html, css 상에서 크기를 적절하게 변환해줘야 한다.

단순 수치로 작성하게 되면 모바일상에서 제대로 출력되지 않는다.

그래서 사용하는 단위가 em, rem 두 가지이다.

1) em

    <style>
        body {
            font-size: 60px;
        }
        body .box1 {
            font-size: 1em;
        }
        body .box1 .box2 {
            font-size: 0.8em;
        }
        body .box1 .box2 .box3 {
            font-size: 0.8em;
        }
        body .box1 .box2 .box3 .box4 {
            font-size: 0.8em;
        }
        body .box1 .box2 .box3 .box4 .box5 {
            font-size: 0.8em;
        }
    </style>
</head>

<body>
    <div class="box1">
        단위 1
        <div class="box2">
            단위 2
            <div class="box3">
                단위 3
                <div class="box4">
                    단위 4
                    <div class="box5">
                        단위 5
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

1em은 부모를 기준으로 100%가 된다.

따라서 같은 0.8em일 지라도 자식으로 내려가다보면 0.8*0.8*0.8... 이 되어 점점 작아지게 된다.

2) rem

    <style>
        body {
            font-size: 10px;
        }
        body .box1 {
            font-size: 1.6em;
        }
        body .box1 .box2 {
            font-size: 2rem;
        }
        body .box1 .box2 .box3 {
            font-size: 2.2rem;
        }
        body .box1 .box2 .box3 .box4 {
            font-size: 2.5rem;
        }
        body .box1 .box2 .box3 .box4 .box5 {
            font-size: 3rem;
        }
        body .con-box {
            display: flex;
        }
        body .con-box .box {
            width: 50%;
            height: 20rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
        }
        body .con-box .box:first-child {
            background: lightcoral;
        }
        body .con-box .box:last-child {
            background: lightseagreen;
        }
    </style>
</head>
<body>
    <div class="con-box">
        <div class="box">test</div>
        <div class="box">test</div>
    </div>
    <div class="box1">
        단위 1
        <div class="box2">
            단위 2
            <div class="box3">
                단위 3
                <div class="box4">
                    단위 4
                    <div class="box5">
                        단위 5
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

rem은 부모를 기준으로 하는것이 아닌 최상위 html을 기준으로 한다.

따라서 자식으로 내려가도 기준이 달라지지 않는다.

3) 모바일 예제

<body>
    <div id="wrap">
        <header id="header">
            <h1><a href="03_index.html">
                    <img src="images/h1.png" alt="AutoUp">
                </a></h1>
            <p class="all-menu"><i class="xi-bars"></i></p>
        </header>
        <!-- // header -->
        <div class="bg"></div>
            <nav id="nav">
                <ul class="gnb">
                    <li class="m1">
                        <a href="#">MainMenu1</a>
                        <ul>
                            <li><a href="#">SubMenu1</a></li>
                            <li><a href="#">SubMenu2</a></li>
                            <li><a href="#">SubMenu3</a></li>
                            <li><a href="#">SubMenu4</a></li>
                        </ul>
                    </li>
                    <li class="m2">
                        <a href="#">MainMenu2</a>
                        <ul>
                            <li><a href="#">SubMenu1</a></li>
                            <li><a href="#">SubMenu2</a></li>
                            <li><a href="#">SubMenu3</a></li>
                            <li><a href="#">SubMenu4</a></li>
                        </ul>
                    </li>
                    <li class="m3">
                        <a href="#">MainMenu3</a>
                        <ul>
                            <li><a href="#">SubMenu1</a></li>
                            <li><a href="#">SubMenu2</a></li>
                            <li><a href="#">SubMenu3</a></li>
                            <li><a href="#">SubMenu4</a></li>
                        </ul>
                    </li>
                    <li class="m4">
                        <a href="#">MainMenu4</a>
                        <ul>
                            <li><a href="#">SubMenu1</a></li>
                            <li><a href="#">SubMenu2</a></li>
                            <li><a href="#">SubMenu3</a></li>
                            <li><a href="#">SubMenu4</a></li>
                        </ul>
                    </li>
                    <li class="m5">
                        <a href="#">MainMenu5</a>
                        <ul>
                            <li><a href="#">SubMenu1</a></li>
                            <li><a href="#">SubMenu2</a></li>
                            <li><a href="#">SubMenu3</a></li>
                            <li><a href="#">SubMenu4</a></li>
                        </ul>
                    </li>
                </ul>
                <p class="close"><i class="xi-close"></i></p>
            </nav>
        <!-- 메뉴 -->
        <div class="swiper mySwiper" id="mainVisual">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/visual.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/visual.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/visual.jpg" alt=""></div>
            </div>
        </div>
        <!-- visual -->

        <main id="container" class="main">
            <section id="content">
                <ul class="list">
                    <li>
                        <a href="#">
                            <strong>중고차 마켓</strong>
                            <p>차를 찾으시나요?</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <strong>경매신청</strong>
                            <p>차를 팔고 싶으세요?</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <strong>옵션검색</strong>
                            <p>차량번호로 옵션 검색</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <strong>경매리스트</strong>
                            <p>경매 신청 차량은 여기에</p>
                        </a>
                    </li>
                </ul>
                <div class="con1">
                    <h2>뉴스 타이틀</h2>
                    <div class="swiper news-banner">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="images/photo0.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="images/photo1.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="images/photo2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="images/photo3.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="images/photo4.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="images/photo5.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="images/photo6.jpg" alt=""></div>
                        </div>
                    </div>

                </div>
            </section>
        </main>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>

#header {
    width: 100%;
    height: 55px;
    position: relative;
}
#header h1 {
    text-align: center;
    padding-top: 15px;
}
#header h1 img {
    width: 75px;
}
#header .all-menu {
    position: absolute;
    top: 15px;
    left: 20px;
}
#header .all-menu i {
    font-size: 26px;
}

.bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0.7;
    z-index: 50;
    display: none;
}
.bg.on {
    display: block;
}
#nav {
    position: fixed;
    left: -80%;
    top: 0px;
    width: 80%;
    background: lightgoldenrodyellow;
    box-sizing: border-box;
    padding: 70px 50px;
    z-index: 100;
    height: 100vh;
    transition: 0.3s;
}
#nav.on {
    left: 0;
}
#nav .gnb {
    width: 100%;
}
#nav .gnb li {}
#nav .gnb li a {
    display: block;
    line-height: 40px;
    border-bottom: 1px solid gray;
    font-size: 18px;
    font-weight: 700;
}
#nav .gnb li ul {
    transition: 0.3s;
    overflow: hidden;
    height: 0;
}
#nav .gnb li.m1 ul.on {
    height: 180px;
}
#nav .gnb li.m2 ul.on {
    height: 160px;
}
#nav .gnb li.m3 ul.on {
    height: 200px;
}
#nav .gnb li.m4 ul.on {
    height: 140px;
}
#nav .gnb li.m5 ul.on {
    height: 220px;
}
#nav .gnb li ul li a {
    text-indent: 15px;
    font-weight: normal;
}
#nav .close {
    position: absolute;
    right: 20px;
    top: 20px;
}
#nav .close i {
    font-size: 30px;
}

#container {}
#content {}
.main {}
.main .list {
    display: flex;
    flex-wrap: wrap;
}
.main .list li {
    width: 50%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    height: 180px;
    text-align: center;
}
.main .list li a {
    color: white;
}
.main .list li:nth-child(1) {
    background-image: url(../images/bg1.jpg);
}
.main .list li:nth-child(2) {
    background-image: url(../images/bg2.jpg);
}
.main .list li:nth-child(3) {
    background-image: url(../images/bg3.jpg);
}
.main .list li:nth-child(4) {
    background-image: url(../images/bg4.jpg);
}
.main .list li a {
    display: block;
    box-sizing: border-box;
    padding-top: 120px;
    background-repeat: no-repeat;
    background-position-x: 50%;
}
.main .list li:nth-child(1) a {
    background-image: url(../images/ico_0.png);
    background-size: contain;
    background-position-y: 40%;
}
.main .list li:nth-child(2) a {
    background-image: url(../images/ico_1.png);
    background-size: contain;
    background-position-y: ;
}
.main .list li:nth-child(3) a {
    background-image: url(../images/ico_2.png);
    background-size: contain;
    background-position-y: ;
}
.main .list li:nth-child(4) a {
    background-image: url(../images/ico_3.png);
    background-size: contain;
    background-position-y: ;
}

(() => {
    mainInit();
    // subInit();
    // news_banner();
})();

function get(target) {
    return document.querySelector(target);
};
function getAll(target) {
    return document.querySelectorAll(target);
};

function mainInit() {
    get();
    getAll();
    common(); // 공통 내용
    nav_menu(); // 메뉴
    main_visual(); // 비주얼
    news_banner(); // 뉴스영역
};
function nav_menu() {
    let $allmenu = get('#header .all-menu');
    let $nav = get('#nav');
    let $bg = get('.bg');
    let $close = get('#nav .close');
    let $menua = getAll('#nav .gnb > li > a');
    let $menual = getAll('#nav .gnb > li > ul');

    $allmenu.addEventListener('click', e => {
        $nav.classList.add('on');
        $bg.classList.add('on');
    })

    $close.addEventListener('click', e => {
        $nav.classList.remove('on');
        $bg.classList.remove('on');
    })

    $bg.addEventListener('click', e => {
        $nav.classList.remove('on');
        $bg.classList.remove('on');
    })

    $menua.forEach((element, idx) => {
        element.addEventListener('click', e => {
            if ($menual[idx].classList.contains('on')) {
                $menual[idx].classList.remove('on');
            } else {
                $menual[idx].classList.add('on');

            }
        })
    })



};
function common() {

};
function main_visual() {
    var swiper = new Swiper("#mainVisual", {
        pagination: {
            el: ".swiper-pagination",
        },
    });
};
function news_banner() {
    var swiper = new Swiper(".news-banner", {
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
};

1) em

2) rem

3) 모바일 예제

티스토리툴바