- 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,
},
});
};
