-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
lounge 플랙스-스페이스비트윈등이 않되요~
21.08.11 22:17 작성 조회수 149
1
안녕하세요? 쌤, 아직은 초보라 질문이 좀 있습니다~
1. .lounge_cont에 flex justufy-content: space-between으로 이미지와 컨텐트의 간격을 벌려주셨는데 제것은 많이 떨어져있지 않았고, 또 첫번째 이미지가 600px도 아니여서인지 .lounge_txt_wrap의 넓이를 calc(100%-650px)를 주면 글자가 길게 아래로 떨어지길래 이미지를 600px을주고 calc를 (100%-500px)으로줄여서 했어요, 그런데도 이미지와 텍스트 간격이 붙어있어서 굳이 padding-left:50px을 줬습니다.
그랬더니 flex- order:2를 주고 순서가 바뀐 두번째 lou02는 이미지와 글자또 붙어버려서 굳이 이미지에 마진을 줘서 띄었더니 뭔가 좀 안맞는거 같아요.
아래 파일 css보시고 왜 제거는 똑같이 쳤는데 플랙스나 칼크가 다 안맞고 패딩과 마진으로 띄어야하는지 모르겠어요.
2. 그리고, h3를 1.875vw를 주셨는데 글자에 vw를 써본적고 em도 아직 헷갈려서..이게 몇px로 맞추신건지요? 또 html 62.5%라 em이나 %로 주면 안되나요?
3. 그리고 reset.css - body: line-height: 1.5 주셨는데 이건 1.5em이란 뜻맞나요? 이번 텍스트들의 line-height가 65px이런데 왜 그렇게 주시는건가요? 위에처럼 1.5em등으로 맞춰야하지 않나요?
4. 마지막으로 .header_wrap{ max-width: 1100px} 인데요. 맥스위드가 처음이라 그냥 위드와 무슨 차이가 있어서 주신건지 궁금합니다.
질문이 모이다보니 많아 졌네요..너무 감사드립니다. 쇼핑몰 스타일을 포폴로 만들어야하는데 도움 많이 됩니다!^_^
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>설화수, 아시아의 지혜가 담긴 홀리스틱 뷰티 | 설화수 한국</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<!-- style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<!-- header -->
<header class="header">
<div class="header_wrap">
<div class="select_language">
<a href="#" class="t_lang">
한국/한국어
<i class="icon-angle-up"></i>
<i class="icon-angle-down"></i>
</a>
<ul class="select_lang_list">
<li>
<a href="#">한국/한국어</a>
</li>
<li>
<a href="#">International/English</a>
</li>
<li>
<a href="#">中国大陆/中文</a>
</li>
<li>
<a href="#">中國香港/繁體中文</a>
</li>
<li>
<a href="#">Hong Kong(China)/English</a>
</li>
<li>
<a href="#">Singapore/English</a>
</li>
<li>
<a href="#">Malaysia/English</a>
</li>
<li>
<a href="#">Việt Nam/Tiếng Việt</a>
</li>
<li>
<a href="#">Indonesia/Bahasa Indonesia</a>
</li>
<li>
<a href="#">ประเทศไทย/ไทย</a>
</li>
<li>
<a href="#">USA/English</a>
</li>
<li>
<a href="#">FRANCE/FRANCAIS</a>
</li>
</ul>
</div>
<h1 class="logo">
<a href="#"><img src="img/logo_sulwhasoo.png" alt="logo">
</a>
</h1>
<div class="header_link">
<a href="#">매장찾기</a>
<a href="#">구매하기</a>
<a href="#" class="h_open_search"><i class="icon-search"></i>
</a>
<div class="search_container ">
<form action="sarch.jsp">
<div class="search_wrap">
<label for="q" class=blind></label>
<input type="search" id="q" class="text">
<button class="submit">
<i class="icon-search"></i>
</button>
</div>
<a href="#" class="sch_close">
<img src="img/bu_x.png" alt="검색창닫기">
</a>
</form>
</div>
</div>
</div>
<!-- gnb -->
<div class="gnb">
<div class="header_wrap">
<!-- gnb_menu -->
<ul class="gnb_menu">
<li class="nav_d1"><a href="#" class="nav_d1_a">브랜드스토리</a></li>
<li class="nav_d1 d1_over"><a href="#" class="nav_d1_a">제품</a></li>
<li class="nav_d1 d1_over"><a href="#" class="nav_d1_a">설화수라운지</a></li>
<li class="nav_d1 d1_over"><a href="#" class="nav_d1_a">스파</a></li>
<li class="nav_d1 d1_over"><a href="#" class="nav_d1_a">플래그쉽스토어</a></li>
</ul>
</div>
</div><!-- gnb end -->
</header><!-- header end -->
<!-- sub_menu -->
<div class="sub_menu">
<ul>
<li></li><!--비워둔다-->
<li class="nav_d2_box">
<a href="#" class="nav_d2_a">신제품</a>
<a href="#" class="nav_d2_a">베스트셀러</a>
<a href="#" class="nav_d2_a">스킨케어</a>
<a href="#" class="nav_d2_a">메이크업</a>
<a href="#" class="nav_d2_a">전설명작</a>
<a href="#" class="nav_d2_a">명작컬렉션</a>
<a href="#" class="nav_d2_a">남성</a>
</li>
<li class="nav_d2_box">
<a href="#" class="nav_d2_a">설화수스타일</a>
<a href="#" class="nav_d2_a">뷰티리추얼</a>
<a href="#" class="nav_d2_a">설화문화전</a>
<a href="#" class="nav_d2_a">메거진</a>
<a href="#" class="nav_d2_a">소식</a>
</li>
<li class="nav_d2_box">
<a href="#" class="nav_d2_a">소개</a>
<a href="#" class="nav_d2_a">스파프로그램</a>
<a href="#" class="nav_d2_a">예약찾기</a>
<a href="#" class="nav_d2_a">매장찾기</a>
</li>
<li class="nav_d2_box">
<a href="#" class="nav_d2_a">소개</a>
<a href="#" class="nav_d2_a">리미티드컬렉션</a>
<a href="#" class="nav_d2_a">스페셜서비스</a>
<a href="#" class="nav_d2_a">예약</a>
<a href="#" class="nav_d2_a">소식</a>
</li>
</ul>
</div><!-- sub_menu end -->
<!-- visual -->
<div class="visual">
<button class="right visu_arrow">right</button>
<button class="left visu_arrow">left</button>
<ul class="visu_btm_wrap">
<li class="visu_btm_list"><a href="#">btn01</a></li>
<li class="visu_btm_list"><a href="#">btn02</a></li>
<li class="visu_btm_list"><a href="#">btn03</a></li>
<li class="controls_wrap">
<button class="start control">start</button>
<button class="stop control">stop</button>
</li>
</ul>
<!-- visual_wrap -->
<ul class="visual_wrap">
<li class="visu_slide">
<div class="visu_veil"></div>
<div class="visu_txt_wrap">
<div class="visu_txt_cont">
<div class="visu_tit">
자음생에센스
</div>
<div class="visu_txt_sub01">
Concentrated Ginseng Renewing Serum
</div>
<p class="visu_txt_sub02">
진세노믹스™가 선사하는
<br>
3중 마이크로타켓팅으로
<br>
쉽게 무너지지 않는 탄탄한 피부
</p>
<div class="visu_btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
<a href="#" class="btn_view">구매하러가기</a>
</div>
</div>
</div>
</li>
<li class="visu_slide">
<div class="visu_veil"></div>
<div class="visu_txt_wrap" >
<div class="visu_txt_cont">
<div class="visu_tit">
자음생앰플
</div>
<div class="visu_txt_sub01">
Concentrated Ginseng Rescue Ampoule
</div>
<p class="visu_txt_sub02">
단 한 번 사용으로도 외부자극으로 시달린<br>
피부를 개선해주는 레스큐 앰플
</p>
<div class="visu_btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</li>
<li class="visu_slide">
<div class="visu_veil" ></div>
<div class="visu_txt_wrap" >
<div class="visu_txt_cont">
<div class="visu_tit">
윤조에센스
<br>
2020 뉴이어 컬렉션
</div>
<div class="visu_txt_sub01">
BEAUTY FROM YOUR CULTURE
</div>
<p class="visu_txt_sub02">
온 세상에 복을 전하는
<br>
마술같은 여정
<br>
쉽게 무너지지 않는 탄탄한 피부
</p>
<div class="visu_btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</li>
</ul>
</div> <!-- visual_wrap end -->
<!-- content -->
<div class="content">
<div class="recommend">
<h2 class="cont_title">설화수 선물추천</h2>
<!-- recomm_tab-->
<div class="recomm_tab">
<a href="#" class="btn_tab on">TRENDING</a>
<a href="#" class="btn_tab">BEST</a>
<a href="#" class="btn_tab">NEW</a>
</div>
<!-- recomm_list_wrap -->
<div class="recomm_list_wrap">
<!-- recomm_list1 -->
<ul class="recomm_list Act">
<li>
<div class="recomm_img">
<img src="./img/recom_01.jpg" alt="01">
</div>
<div class="recomm_name">
윤조에센스 뉴이어 리미티드
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_02.jpg" alt="01">
</div>
<div class="recomm_name">
전설명작크림
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_03.jpg" alt="01">
</div>
<div class="recomm_name">
자음생 2종 기획
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_04.jpg" alt="01">
</div>
<div class="recomm_name">
진설 2종기획
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
</ul>
<!-- recomm_list2 -->
<ul class="recomm_list">
<li>
<div class="recomm_img">
<img src="./img/recom_05.jpg" alt="01">
</div>
<div class="recomm_name">
자음생크림
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_09.jpg" alt="01">
</div>
<div class="recomm_name">
자음생에센스
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_07.jpg" alt="01">
</div>
<div class="recomm_name">
자음생유액
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_08.jpg" alt="01">
</div>
<div class="recomm_name">
자음생크림
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
</ul>
<!-- recomm_list3 -->
<ul class="recomm_list">
<li>
<div class="recomm_img">
<img src="./img/recom_09.jpg" alt="01">
</div>
<div class="recomm_name">
윤조에센스 세포라 리미티드
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_10.jpg" alt="01">
</div>
<div class="recomm_name">
옥용팩
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_11.jpg" alt="01">
</div>
<div class="recomm_name">
여윤팩
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_12.jpg" alt="01">
</div>
<div class="recomm_name">
퍼팩팅 파운데이션 클로우
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
</ul>
</div>
</div>
<!-- lounge -->
<div class="lounge lou01">
<div class="lounge_cont">
<div class="lounge_img">
<a href="#">
<img src="./img/lou_01.jpg" alt="liu01">
</a>
</div>
<div class="lounge_txt_wrap">
<h3>SHADE picker</h3>
<p class="sub_tit">나에게 맞는 컬러가
궁금하다면?</p>
<p class="desc">사용 중인 페이스 메이크업 제품 정보를 통
같은 컬러의 설화수 제품을 찾아드립니다.</p>
<div class="btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</div>
<div class="lounge lou02">
<div class="lounge_cont">
<div class="lounge_img">
<a href="#">
<img src="./img/lou02.jpg" alt="liu01">
</a>
</div>
<div class="lounge_txt_wrap">
<h3>뷰티리추얼</h3>
<p class="sub_tit">윤조 & 자음생<br>
탄력 시너지 듀오
<p class="desc">설화수 대표 윤조에센스 자음생에센스가 선사하는<br>
감동의 탄력 시너지로 올 여름 탄탄한 피부를 느껴보세요 느껴보세요</p>
<div class="btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script src="js/lib/jquery-3.1.1.min.js"></script>
<script src="js/nav.js"></script>
<script src="js/visu.js"></script>
<script src="js/content.js"></script>
<script src="js/flag.js"></script>
</body>
</html>
css
@charset "utf-8";
.header{
position: relative;
background-color: #fff;
z-index: 2;
}
.header_wrap{
height: 78px;
max-width: 1100px;
margin: auto;
display: flex;
justify-content: space-between;
padding: 0 7%;
position: relative;
}
.select_language{
position: relative;
padding-top: 16px;
font-size: 1.1em; /*11px, html: 62.5% = 1em =10px*/
letter-spacing: .05em;
width: 25%;
text-align: left; /*기본*/
}
.select_language .t_lang i{
position: absolute;
left: 80px;
top: 16px;
}
.icon-angle-up{
opacity: 0;
}
.icon-angle-down{}
h1.logo {
/*상하정렬*/
align-self: center;
/* display: flex;
align-items: center; */
}
h1.logo img{
width: 166px;
}
.heqader_link{
width: 25%;
padding-top: 16px;
text-align: right;
}
ul.select_lang_list{
position: absolute;
top: 36px;
left: 0;
padding: 12px 0;
border: 1px solid #191919;
background-color: #fff;
box-shadow:0 3px 3px rgba(0,0,0,.3);
z-index: 3;
visibility: hidden;
}
ul.select_lang_list a{
display: block;
padding: 6px 21px 4px 18px;
}
/* show-js */
.select_language.show .select_lang_list{
visibility: visible;
}
.select_language.show .icon-angle-up{
opacity: 1;
}
.select_language.show .icon-angle-down{
opacity: 0;
}
.header_link{
width: 25%;
padding-top: 16px;
text-align: right;
}
.header_link>a{
display: inline-block;
margin: 0 .2em;
padding: 1px 8px 0 10px;
font-size: 11px;
position: relative;
}
.header_link>a:after{
display: block;
content: "";
position: absolute;
top: 1px;
right: -4px;
width: 1px;
height: 12px;
background-color: #eee;
}
.header_link> a.h_open_search:after{
display: none;
}
.search_container{
position: absolute;
right: 100px;
top:calc(50%-20px);
/* margin-top: 20px; */
padding-bottom: 5px;
/* width: 308px; */
/* 초기세팅- 감춰두기 */
width: 0;
opacity: 0;
visibility: hidden;/*마우스올려도 손 안나옴*/
transition: width 1s, opacity 0.1s; /* , 로 위드, 오파시티 두요소에 트랜지션 준것임 */
}
.search_container.show{
width: 308px;
opacity: 1;
visibility: visible;
}
.search_wrap{
border: 1px solid #ccc;
}
.search_wrap input.text{
border: none;
height: 48px;
padding: 8px 12px;
font-size: 16px;
outline: none;
width: 100%;
}
.search_wrap .submit{
position: absolute;
top: -4px;
right: -17px;
font-size: 24px;
color: #aaa;
/* color: transparent; */
}
.sch_close{
position: absolute;
top: 0;
right: -60px;
}
/* gnb */
.gnb{
background-color: #fff;
height: 30px;
}
.gnb .header_wrap{
height: 100%;
}/*중앙배치 반복*/
ul.gnb_menu{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid transparent;
}
ul.gnb_menu li.nav_d1{}
ul.gnb_menu li .nav_d1_a{
display: block;
padding: 5px 20px 10px;
}
ul.gnb_menu li.nav_d1.d1_over{}
/* sub_menu */
.sub_menu{
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: 35px;
top: -100%;
/* top: 108px; */
opacity: 1;
transition: top 0.5s;
background-color: #fff;
}
.sub_menu li.nav_d2_box{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.nav_d2_a{
font-size: 13px;
padding: 0 20px;
}
/* js */
.gnb.active .gnb_menu{
border-bottom: 1px solid #d5d5d5;
}
.sub_menu.on{
top: 108px;
}
.sub_menu li.nav_d2_box.Over{
opacity: 1;
}
/* visual */
.visual{
max-width: 1920px;/*고정넓이값*/
margin: auto;
position: relative;
z-index: 0;/*sub_menu아래니까*/
}
.visual_wrap{
position: relative;
height: 550px;
background-color: gray;
}
.visu_slide{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center/top;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
}
.visu_slide.on{
opacity: 1;
}
.visu_slide:nth-child(1){
background-image:url(../img/visu_pc_01.jpg);
}
.visu_slide:nth-child(2){
background-image:url(../img/visu_pc_02.jpg);
}
.visu_slide:nth-child(3){
background-image:url(../img/visu_pc_03.jpg);
}
.visu_veil{
position: absolute;
right: 0;
top: 0;
width: 0;
/* width: 44%; */
height: 100%;
opacity: 0;
}
.visu_slide:nth-child(1) .visu_veil{
background: rgba(237,185,46,.3);
}
.visu_slide:nth-child(2) .visu_veil{
background-color: rgba(164,105,53,.3);
}
.visu_slide:nth-child(3) .visu_veil{
background-color: rgba(140,171,217,.5);
}
.visu_txt_wrap{
position: absolute;
right: 0;
top: 0;
width: 44%;
height: 100%;
opacity: 0; /* 안보이게 해놈 js*/
}
.visu_txt_cont{
width: 414px;
height: 100%;
display: flex;
flex-flow: column;
align-items:flex-end;
justify-content: center;
color: #fff;
text-align: right;
}
.visu_tit{
font-size: 42px;
font-family: 'Buri', serif;
line-height: 54px;
}
.visu_txt_sub01{
font-size: 18px;
font-family: 'Buri', serif;
}
.visu_txt_sub02{
margin: 45px 0 0;
font-size: 20px;
font-family: 'Buri', serif;
text-align: right;
}
.visu_btn_wrap{
margin: 30px 0 0;
}
.visu_btn_wrap .btn_view{
display: inline-block;
width: 132px;
height: 38px;
border: 1px solid #fff;
color: #fff;
font-size: 15px;
line-height: 35px;
text-align: center;
margin: 3px;
}
.visu_arrow{
position: absolute;
z-index: 2;
top:calc(50% - 29px); /*calc 쓸떄 - 사이 반드시 띈다...-_- 50% - 20px*/
height: 58px;
width: 30px;
text-indent: -9999px;/* 아보이게 날린다*/
background-position: left top;/*0 0*/
background-repeat: no-repeat;
}
.right.visu_arrow{
right: 20px;
background-image: url(../img/main-kv-arr-r.png);
}
.left.visu_arrow{
left: 20px;
background-image: url(../img/main-kv-arr-l.png);
}
ul.visu_btm_wrap{
position: absolute;
z-index: 2;
bottom: 24px;
width: 100%;
text-align: center;
}
ul.visu_btm_wrap li{
display: inline-block;
padding: 0 5px;
}
li.visu_btm_list a{
display: block;
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 5px;
text-indent: -99999px;
transition: 0.3s;
}
li.visu_btm_list.Act a{
width: 25px;
}
li.controls_wrap .control{
width: 10px;
height: 10px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
/* background-color: #f00; */
text-indent: -9999px;
position: absolute;
top: -3px;
}
.start.control{
background-image: url(../img/btn-play-pc.png);
display: none;
}
.stop.control{
background-image: url(../img/btn-stop-pc.png);
}
/* content */
.content{
width: 1140px;
margin: auto;
}
.recommend{
margin-top: 120px;
}
h2.cont_title{
padding-bottom: 30px;
color: #030200;
font-size: 28px;
font-weight: normal;
font-family: 'Buri' ,serif;
text-align: center;
}
.recomm_tab{
width: 762px;
height: 42px;
margin: 0 auto 25px;
display: flex;
}
.recomm_tab a.btn_tab{
width: calc(100%/3);
text-align: center;
font-size: 17px;
line-height: 42px;
border-bottom: 2px solid #e6e6e6;
}
.recomm_tab a.btn_tab.on{
color: #b17c5c;
font-weight: bold;
border-bottom: 2px solid #b17c5c;
}
.recomm_list_wrap{
height: 434px;
}
ul.recomm_list{
display: none;
}
ul.recomm_list.Act{
/* display: block; */
display: flex;
}
ul.recomm_list li{
width: 25%;
position: relative;
padding: 34px 35px 0;
}
ul.recomm_list li .recomm_img{}
ul.recomm_list li .recomm_img img{
width: 290px;
}
ul.recomm_list li .recomm_name{
padding: 0 0 25px;
color: #333;
font-size: 18px;
text-align: center;
font-family:"Buri" serif;
letter-spacing: -.1em;
}
ul.recomm_list li .buy_view_layer{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(242,242,242,.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: 0.3s;
cursor: pointer;
}
ul.recomm_list li:hover .buy_view_layer{
opacity: 1;
}
.buy_view_layer>a{
display: block;
width: 178px;
height: 38px;
border: 1px solid #555;
background-color: #fff;
font-weight:bold;
font-size: 15px;
line-height: 38px;
text-align: center;
}
/* lounge */
.lounge{
margin-top: 70px;
padding: 0 90px;
height: 590px;
}
/* 여기서부터 안되서 다르게썻어요~ */
.lounge_cont{
display: flex;
height: 100%;
align-items: center;
justify-content: space-between;
}
.lounge_img{
width: 600px;
}
.lounge_img img{
width: 100%;
}
.lounge_txt_wrap{
width: calc(100% - 500px);
padding-left: 50px;
}
.lounge_txt_wrap h3{
border-bottom: 1px solid #c3bdb6;
color: #6a481b;
font-size: 1.875vw;
font-family: 'Buri',serif;
}
.sub_tit{
margin: 40px 0 0;
color: #000;
font-size: 46px;
line-height: 65px;
font-family: 'Buri',serif;
}
.desc{
margin: 16px 0 54px;
color: #333;
font-size: 20px;
line-height: 32px;
}
.btn_wrap{
display: inline-block;
height: 38px;
padding: 0 44px;
border: 1px solid #555;
font-size: 15px;
color: #555;
line-height: 38px;
}
.lou02 .lounge_img{
order:2;
}
.lou02 .lounge_text_wrap{
}
.png "스크린샷 2021-08-11 오후 10.17.49(2).png")
답변을 작성해보세요.
1
1
LIZ.B
지식공유자2021.08.12
1. 해결책 : .content가 갖고 있는 너비값이 너무 좁게 되어있어서 그렇습니다.
.content
- <input class="enabled-button" type="checkbox" aria-label="width 1140px" style="min-width:0px;min-height:0px;font-family:inherit;font-size:10px;visibility:hidden;float:left;margin:0px;vertical-align:top;position:relative;z-index:1;width:18px;left:-40px;top:1px;height:13px" /> width: 1140px; --->1440px 입니다.
- <input class="enabled-button" type="checkbox" aria-label="margin auto" style="min-width:0px;min-height:0px;font-family:inherit;font-size:10px;visibility:hidden;float:left;margin:0px;vertical-align:top;position:relative;z-index:1;width:18px;left:-40px;top:1px;height:13px" /> margin: auto;
2. 그리고, h3를 1.875vw를 주셨는데 글자에 vw를 써본적고 em도 아직 헷갈려서..이게 몇px로 맞추신건지요? 또 html 62.5%라 em이나 %로 주면 안되나요?
답
vw단위는 반응형 작업할때 많이 사용하는데요 왜냐하면 가로폭에 따라 상대적으로 달라져야 해서 그렇습니다. 만약 desktop에서 500px이라는 고정값을 가로폭 1440에서는 얼마의 단위를 써서 만들어야 하냐 이건 우리가 중학교때 배운 방정식으로 계산식을 만들어낼 수 있습니다. 100:x = 1440:500 이런식으로 계산하게 되면 34.72222vw가 나오게 됩니다.
vw 단위 계산 사이트 에 들어가서 확인해보시면 좋겠습니다.
html 62.5%는 웹에서 기본 폰트의 사이즈는 16px인데요. 62.5%로 변경하게되면 10px이 나옵니다.
직관적으로 계산하기가 편하기에 기본값으로 세팅해놓고 사용합니다.
3. 그리고 reset.css - body: line-height: 1.5 주셨는데 이건 1.5em이란 뜻맞나요? 이번 텍스트들의 line-height가 65px이런데 왜 그렇게 주시는건가요? 위에처럼 1.5em등으로 맞춰야하지 않나요?
답
body: line-height: 1.5 는 기본적인 line-height는 1.6입니다 160%이기도 하구요. 기본setting은 조금 작게둬서 한줄 높이값을 작은 글씨들에 맞춰서 세팅해놓고 상황에 따라 line-height를 변경해서 사용합니다.
4. 마지막으로 .header_wrap{ max-width: 1100px} 인데요. 맥스위드가 처음이라 그냥 위드와 무슨 차이가 있어서 주신건지 궁금합니다.
답
max-width는 최대값이라는 건데요 그냥 width랑의 차이점은 가변폭 즉 반응형 작업시 많이 생기는데요. width는 고정입니다. 가로폭이 작아진다고 해서 반응하지 않습니다. 하지만, max-width는 최대값보다 가로폭이 작아질 경우 width를 100%로 지정하게되면 상대적으로 변경됩니다. max-width에대한 참고 링크를 추가합니다.
max-width확인하기(mozilla)
쇼핑몰 포트폴리오 열심히 만드시고, 포트폴리오 마무리 잘해서 좋은 소식 있길 기원합니다.
설화수를 빠른 시일 (몇달은 걸릴듯한데요)내로 리뉴얼한 내용으로 새강의를 만들고자 합니다. 많은 관심 부탁드리구요~ 감사합니다 ^^
답변 2