59,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
a태그 질문!
강사님 lounge에 자세히보기로 이동하는 a태그는 div class: btn-view 태그로 한번 감싸서 사용해했는데 플래그십 스토어 스파에서(강의 4분 34초)는 div로 감싸지 않고 그냥 a태그를 사용하는 이유가 있을까요?? 같은 페이지 이동 버튼인데 div로 한번 더 감싸는 이유가 따로 있는지 궁금합니다!
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
질문있습니다!!
10분 40초쯤에 recomm_list li에 중앙 정렬을 위해 padding값을 주는 것 같은데 padding : 34px 35px 0 으로 어떻게 계산되는건지 궁금해요!혹시 다른 방법으로 정렬을 할 수 없을까요??
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
css bacground-image를 인식하지 못합니다.
경로를 확실히 주었는데 vs code에서는 작동하지만 intellij 에서는 적용되지 않습니다.다른 방법은 없을까요?
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
안녕하세요 visual slide 질문이 있습니다.
방금전 선생님의 강의를 완강하고 복습중인데슬라이드 부분에 대해 질문이 있어서요.강의하신내용에 vosual 슬라이드부분을 왼쪽으로 부드럽게 animate로 넘기고 싶은데아직 제가 가진 지식으로는 혼자 작성해도 검색해보고 찾아봐도 안되서 질문드립니다.코드 어떤부분을 고쳐야 하는지 여쭤봅니다.ㅜㅜ
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
초반 셋팅 어떻게하나요?
주로 이런강의는 html 작성하고 css 적용하고 js 적용하는데초반에 미리 css 작성해놓으시고 아이콘도 다 준비하셔서 시작부터 어떻게 해야할지 감이안오네요. 1강 헤더에서 링크만들고 앵글 업 다운 하는데 강사님은 디자인다 적용되어 있고 진행하시는데 저는 그냥 html입니다. 그래서 첨부된 헤더쪽 폴더 넣으면 이미 완성되어 있어서 다릅니다.초반에 html부터 차근히 가는게 아니라서 멀 어떻게 할지 모르겠네요. 폴더 다넣으면 앵글 업다운도 이미 완성되어서 다운만나옵니다. 초반 셋팅 어떻게 하는지 알려주시면 좋겠습니다.
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
visual animate 질문
visual animate 관련해서 이메일로 문의 드렸습니다.
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
js 토글질문
현재 강의에서 select_language에 토글을 걸어놔서해당 css부분은 width가 25%여서 정확히 ^ 버튼을 누르면 language창이 뜨는게 아닌 ^가 아닌 옆에 넓은 width 25% 범위 전부에서 토글이 작동합니다. 해당 문제를 해결하려면 어디에다가 변수설정해서 토글을 설정하면 좋을까요?
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
navigation script 질문드립니다.
강사님 안녕하세요![header] navigation script 작성하기 << 부분 방금 들었는데, 현재 설화수 사이트는 header부분이 변경되어gnb가 [브랜드 블리프]로 바뀌면서 submenu도 첫번 째 거부터 나와야하는데 강의 스크립트대로 했더니 첫번 째꺼는 안나오고 두번 째 꺼부터 나오더라구요..스크립트를 어떻게 수정해야 첫번 째 꺼도 나올까요??그리고, [제품]쪽에 마우스를 대고 하위항목인 [전제품구성]과 [신제품]에 마우스를 가져다 댔을 때, a태그가 정상적인 기능을 하지않습니다.. 영역이 이상하게 잡히는거같아요..display:none이 아니라 opacity로해서 그런거같은데..;; 이부분도 문의드립니다.(아래 캡쳐는 수업자료 첨부해주신 것중에 [01_desktop layout_header]폴더에 있는 index.html 입니다)
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
클래스 질문 드려요!
간단한 질문인데요! 실무에서도 클래스가 많이 사용되는지 궁금합니다! 기본 태그 이름으로 가져오고 주석을 달아두면 되지 않을까해서요!ㅎㅎㅎ 선생님은 실제 실무에서 어떤 방법을 선호하시나요?!
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
[header] navigation script 작성하기 8분짜리 강의 추가 설명 부탁
[header] navigation script 작성하기 8분짜리 강의를 듣다 갑자기 nav.js파일안에 //nav const gnb=$('.gnb');//Active const gnb_menu_list=$('.nav_d1.d1_Over');//selector const sub_menu=$('.sub_menu');//On const sub_menu_list=$('.sub_menu>ul>li');//현재 순서값에 Over 추가가 되어있으시더라고요. [header] navigation menu layout css 작성하기 12분짜리 강의에는 설명이 전혀 안되있다가 갑자기 그 다음 강의에 들어가 있고 그거에 대한 언급은 안되어있네요. 설명 부탁드릴수 있을런지요. 그리고 클래스명이 복잡하게 되어있어 내용이해하는 흐름이 강의 들으면서 계속 중간중간 힘드네요.ㅠㅠ 그리고 순서값이 안나오는 이유는 무엇일까요? ㅠㅠ 제이쿼리를 몰라서요~ 많이 질문하게 되네요
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
.nav_d1_a 간격 조정이 안됩니다
메일로 파일 첨부 했습니다!
- 해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
.show 앵글다운 아이콘(opacity 0) 안됩니다
아이콘 앵글업이 안 없어지고,(opacity 0이 안됩니다)
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
안녕하세요!
안녕하세요! 강의 감사히 듣고 있습니다 혹시 오프라인 강의로하여, 선생님께 직접 배울 수 있는 방법이 있나요?>
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
999px 풋터에 '한국어' 떄문에 풋터가 길어졌어요
안녕하세요? 쌤~ 마지막 질문좀 드릴께용~ ^^; 999px에서 풋터부분 하단에 한국어 footer_lang 부분이 클릭하면 보여지는데 그것떄문에 클릭 안해도 풋터하단이 길게 남아 있아요..보통 이렇게 하단을 길게 냅두는지 아니면 누르기전에는 하단이 짧게 잇어야할거 같은데요. 사라지게 숨겨놔도 잘안되서요. 하단 랭귀지 선택은 어떻게 만들어야 하나요? 그리고 한국어 클릭하면 오른쪽으로 한국어 글자가 밀리고 select_lang_list 안에 폰트사이즈가 작게 안먹히는데 왜 그럴까요? ㅜㅜ 감사합니다~수고하세용!! 아래 코드입니다.^^ <!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"> <!-- moblie nav --> <a href="#" class="mob_nav_btn"> <i></i> </a> <!-- mob_nav --> <div class="mob_nav"> <div class="bg"></div> <!-- mob_nav_wrap --> <div class="mob_nav_wrap"> <h2 class="sidenav-h"> <a href="#"></a> <img src="./img/logo_sulwhasoo_m.png" alt=""> </h2> <ul class="m_nav_list"> <li> <a href="#">브랜드스토리 <i class="icon_nav"></i> </a> </li> <li> <a href="#" class="m_nav_tit">제품 <i class="icon_nav"></i> </a> <dl><!-- 섭메뉴 --> <dt class="blind">제품</dt> <dd><a href="#">신제품</a></dd> <dd><a href="#">베스트셀러</a></dd> <dd><a href="#">스킨케어</a></dd> <dd><a href="#">메이크업</a></dd> <dd><a href="#">진설</a></dd> <dd><a href="#">명작 컬렉션</a></dd> <dd><a href="#">남성</a></dd> <dd><a href="#">라이프스타일</a></dd> </dl> </li> <li> <a href="#" class="m_nav_tit">설화수 라운지 <i class="icon_nav"></i> </a> <dl><!-- 섭메뉴 --> <dt class="blind">설화수라운지</dt> <dd><a href="#">설화수 스타일</a></dd> <dd><a href="#">뷰티리추얼</a></dd> <dd><a href="#">아카이브</a></dd> <dd><a href="#">설화문화전</a></dd> <dd><a href="#">매거진</a></dd> <dd><a href="#">소식</a></dd> </dl> </li> <li> <a href="#"class="m_nav_tit">소개 <i class="icon_nav"></i> </a> <dl><!-- 섭메뉴 --> <dt class="blind">소개</dt> <dd><a href="#">소개</a></dd> <dd><a href="#">스파프로그램</a></dd> <dd><a href="#">예약</a></dd> <dd><a href="#">매장찾기</a></dd> </dl> </li> <li> <a href="#"class="m_nav_tit">플래그십 스토어</a> <dl><!-- 섭메뉴 --> <dt class="blind">플래그십 스토어</dt> <dd><a href="#">소개</a></dd> <dd><a href="#">리미티드에디션</a></dd> <dd><a href="#">스페셜 서비스</a></dd> <dd><a href="#">예약</a></dd> <dd><a href="#">소식</a></dd> </dl> </li> </ul> <!--mob_btm--> <div class="m_nav_btm"> <div class="m_nav_cp"> <p> <a href="#">회사소개</a> <a href="#">서비스이용약관</a> <a href="#">UGC이용약관</a> <a href="#">개인정보처리방침 </a> <a href="#">영상정보처리방침</a> <a href="#">사이트맵</a> <a href="#">로그인</a> <a href="#">회원가입</a> </p> <div class="m_nav_cs"> 고객서비스센터(수신자요금부담) 080-023-5454<br> 월~금: AM 09:00~PM 06:00 </div> <div class="m_copy"> © AMOREPACIFIC CORPORATION. All rights reserved. </div> <a href="#"><img src="img/wa.png" alt="wa"></a> </div> </div> </div> </div> <!-- select_language --> <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"> <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> <ul> <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> <a href="#" class="nav_d2_a"> 라이프스타일</a> <a href="#" class="nav_d2_a"> 전제품 구성 </a> <a href="#" class="nav_d2_a"> 신제품 </a> </li> </ul> </li> <li class="nav_d1 d1_Over"> <a href="#" class="nav_d1_a"> 설화수 라운지 </a> <ul> <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> </li> <li class="nav_d1 d1_Over"> <a href="#" class="nav_d1_a"> 스파 </a> <ul> <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> </ul> </li> <li class="nav_d1 d1_Over"> <a href="#" class="nav_d1_a"> 플래그십 스토어 </a> <ul> <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> </li> </ul> </div> </div><!-- gnb end --> </header><!-- header end --> <!-- sub_menu --> <div class="sub_menu"> <ul> <li></li><!--비워둔다--> </ul> </div><!-- sub_menu end --> <div id="main"> <!-- 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 --> <!-- 767px cont02 --> <div class="cont02"> <div class="lounge lou01"><!-- 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"><!-- 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> <!-- flagship store&spa --> <div class="flagship"> <h2 class="cont_title"> 설화수 플래그십 스토어 & 스파 </h2> <div class="flag_wrap"> <ul class="flag_slider"> <li class="fl_01">slider</li> <li class="fl_02">slider</li> <li class="fl_03">slider</li> <li class="fl_04">slider</li> </ul> <ul class="flag_btm_wrap"> <li class="Act"><a href="#">0</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="flag_txt_wrap"> <p> 등불이 어둠을 밝혀 길을 안내하 듯, <br> 아시아의 지혜를 담아 아름다움을 비추는<br> 설화수 플래그십 스토어와 스파를 <br> 방문해보세요. </p> <a href="#" class="btn_view"> 자세히보기 </a> </div> <a href="#" class="flagside left">left</a> <a href="#" class="flagside right">right</a> </div> </div> </div><!-- content end--> </div> <footer class="footer"> <div class="footer_wrap"> <div class="foot_link"> <div class="link_left"> <div class="foot_item_wrap"> <a href="#" class="footer_item">회사소개</a> <a href="#" class="footer_item">서비스이용약관</a> <a href="#" class="footer_item">UGC이용약관</a> <a href="#" class="footer_item">개인정보처리방침</a> <a href="#" class="footer_item">영상정보처리방침</a> <a href="#" class="footer_item">사이트맵</a> </div> <div class="foot_item_wrap"> <a href="#" class="footer_item">로그인</a> <a href="#" class="footer_item">회원가입</a> <span class="footer_item">고객상담팀(수신자요금부담):080-023-5454 </span> <span class="footer_item">[상담시간] 월~금:AM 09:00~PM 06:00 </span> </div> </div> <div class="link_right"> <a href="#" class="link_item"> <img src="img/wa.png" alt="wa"> </a> <a href="#" class="link_item"> <i class="icon-facebook"></i> </a> <a href="#" class="link_item"> <i class="icon-instagram"></i> </a> <a href="#" class="link_item"> <i class="icon-youtube-play"></i> </a> </div> </div> <div class="footer_legal"> ©AMOREPACIFIC CORPORATION. All rights reserved. </div> <!-- 999px --> <div class="footer_mob"> <a href="#" class="link_loc">매장찾기 <i class="icon-location"></i> </a> <div class="footer_lang"> <a href="#" class="link-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> </div> </div> </div> </footer> </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> media.css @charset "utf-8"; @media screen and (max-width:1439px){ body { overflow-x:hidden; } .content{ width:auto; } .recommend{ margin-top:8.3333vw; } .recomm_tab{ margin-bottom:1.736vw; } .recomm_list_wrap{ height:auto; } .recomm_img img{ width:auto; height:20.139vw; } .lounge{ margin-top: 4.8611vw; padding: 0 6.25vw; height: 40.9722vw; } .lounge_img{ width:40.9722vw; } .lounge_img img{ width:100%; } .lounge_txt_wrap{ width:calc(100% - 49.8611vw) } .lounge_txt_wrap .sub_tit { margin: 2.7777vw 0 0; font-size: 3.19444vw; line-height: 4.5138vw; } .lounge_txt_wrap .desc { margin: 1.111vw 0 0; font-size: 1.3888vw; line-height: 2.2222vw; } .lounge_txt_wrap .btn_view { margin-top: 3.75vw; height: 2.638vw; padding: 0 3.0555vw; font-size: 1.0416vw; line-height: 2.6388vw; } .flagship { margin: 8.333vw 0 7.778vw; } .flag_txt_wrap{ left: 49vw; width: 25.777vw; } .flag_txt_wrap p { font-size: 1.25vw; line-height: 2.0833vw; } .flag_txt_wrap .btn_view { margin-top: 3.75vw; height: 2.63888vw; padding: 0 3.0555vw; font-size: 1.0416vw; line-height: 2.6388vw; } .flag_txt_wrap{ margin-top: 2.0833vw; } .flagside{ width: 3.1250vw; height: 5.481vw; top: calc(50% - 2.7083vw); } } @media screen and (max-width:999px){ .select_language { display: none; } .header_link>a:not(.h_open_search){ display: none; } .gnb{ display: none; } .header_wrap{ justify-content: center; height: 60px; } .header_link{ width: auto; padding-top: 0; } .header_link> a.h_open_search{ /*우선순위에 밀려서 앱소이 안먹힌다. 검사에 들가서 똑같이 더 길게 써준다 */ position: absolute; right: 10px; top: 10px; margin: 0; padding: 0; font-size: 24px; } .mob_nav_btn{ display: block; position: absolute; left: 20px; top: 18px; width: 20px; height: 20px; } .mob_nav_btn i{ position: relative; display: inline-block; width: 100%; height: 2px; background-color: #767676; } .mob_nav_btn i:after{ content: ""; position: absolute; display: block; top: -5px; left: 0; width: 100%; height: 2px; background-color: #767676; } .mob_nav_btn i:before{ content: ""; position: absolute; display: block; top: 5px; left: 0; width: 100%; height: 2px; background-color: #767676; } h1.logo img{ width: 140px; } /* nav */ .mob_nav{ display: block; position: fixed; left: -264px; top: 0; width: 264px; height: 100%; background-color: #363636; transition: 0.5s; } .mob_nav.move{ left: 0; } .mob_nav .bg{ position: fixed; top: 0; left: 264px; width: calc(100% - 264px); height: 100%; background-color: rgba(0,0,0,0.308); display: none; } .mob_nav_wrap{} .sidenav-h{ text-align: center; padding: 13px 0 12px; } .sidenav-h img{ width: 100px; } ul.m_nav_list{ border-top: 1px solid #494949; } ul.m_nav_list li> a{ display: block; position: relative; font-size: 15px; padding: 12px 0 12px 15px; border-bottom: 1px solid #494949; color: #d5d5d5; font-weight: 700; } ul.m_nav_list li> a.m_nav_tit.On{ background-color: #1d1d1d; } ul.m_nav_list .icon_nav{ position: absolute; right: 15px; top: calc(50% - 7px); width: 14px; height: 14px; display: block; } ul.m_nav_list .icon_nav:before{ content: ""; display: block; position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 2px; background-color: #555; } ul.m_nav_list .icon_nav:after{ content: ""; display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background-color: #555; transform: rotate(90deg); transition: 0.3s; } a.m_nav_tit.On .icon_nav:after{ transform: rotate(0); } .m_nav_list li>dl{ display: none; } .m_nav_list li>dl>dd{ border-bottom: 1px solid #414141; line-height: 1.6; font-weight: 700; } .m_nav_list li>dl>dd>a{ display: block; padding: 12px 0 12px 30px; font-size: 14px; } .m_nav_btm{ padding: 50px 0 12px 10px; font-size: 12px; color: #767676; line-height: 1.8; }/* | m_nav_cp안에 p 안에 첫번쨰 a 다음에 오는 모든 a들 */ .m_nav_cp p a { display: inline-block; color: #767676; line-height: 1.1; } .m_nav_cp p a +a { border-left: 1px solid #4f4f4f; padding-left: 7px; /* a앞에 |을 밀어야하는데, a기준으로 padding-left밀어야 글자랑 |가 분리되고 왼쪽공간과 |는 margin-left로 민다 */ margin-left: 3px ; } /* search */ #main.on{ filter: blur(10px); } .search_container.show { width: 100%; transition: none; position: fixed; top: 0; right: 0; padding: 10px; background-color: #fff; } .search_wrap input.text{ height: 40px; padding: 0 12px; } .search_wrap .submit{ top: 3px; right: -5px; } /* visual */ .visual_wrap{ height: 38.134vw; } .visu_tit { font-size: 2.917vw; line-height: 3.750vw; letter-spacing: -0.139vw; } .visu_txt_sub01 { font-size: 1.25vw; } .visu_txt_sub02 { margin: 3.194vw 0 0; font-size: 1.389vw; } .visu_txt_cont{ width:80%; } .visu_btn_wrap{ margin:2.083vw 0 0; } .visu_btn_wrap .btn_view{ width:9.167vw; height:2.639vw; font-size:1.042vw; line-height: 2.639vw; margin-left:0.694vw; } .visu_arrow{ width: 2.093vw; height: 4.028vw; margin-top: -2.014vw; background-size: contain; } .visu_arrow.left{ left:1.3889vw; } .visu_arrow.right{ right:1.3889vw; } .visu_btm_wrap { bottom: 1.667vw; } .visu_btm_wrap li{ padding: 0 0.347vw; } .visu_btm_wrap li a{ width: 0.694vw; width: 0.694vw; border-radius: 0.347vw; } /* recommend */ .recomm_tab { width: 52.917vw; } .buy_view_layer>a{ width:9.167vw; height:2.639vw; font-size:1.042vw; line-height: 2.639vw; padding: 0; } .flagside{ top: 50%; transform: translateY(-50%); background-size: 95%; } .flagside.right{ right: -5px; } .flag_txt_wrap { left: 55vw; width: 25.777vw; } /* footer */ .footer{ margin: 80px 0 0px; } .link_left { display: none; } .link_right .link_item:first-child{ display: none; } .foot_link { justify-content: center; } .footer_legal{ display: none; } .footer { border-top: none; margin: 0; } .footer_wrap{ padding: 0; } .link_right .link_item i{ font-size: 1.8em; line-height: 48px; } .footer_mob{ display: block; text-align: center; padding: 15px 0; } .footer_mob a, .footer_lang{ display: inline-block; width: 150px; text-align: center; position: relative; } .footer_mob> a:first-child:after{ content: ""; position: absolute; width: 1px; height: 12px; background-color: #d5d5d5; top: 30%; right: 0; } .footer_lang.show ul.select_lang_list{ visibility: visible; top: 30px; padding: 0 60px 0 20px; } .footer_lang.show .icon-angle-up{ opacity: 1; position: absolute; left: 95px; } .footer_lang.show .icon-angle-down{ opacity: 0; } .footer_mob a{ font-size: 2.2vw; } }/*end*/ /* 767px */ @media screen and (max-width:767px){ .header_wrap{ height: 50px; } .mob_nav_btn{ top: 12px; } .header_link>a.h_open_search{ top: 5px; } h1.logo img{ width: 112px; } .visual_wrap{ height: 135vw; } .visu_slide:nth-child(1){ background-image:url(../img/visu_mo_01.jpg); } .visu_slide:nth-child(2){ background-image:url(../img/visu_mo_02.jpg); } .visu_slide:nth-child(3){ background-image:url(../img/visu_mo_03.jpg); } .visu_veil{/*애니메이션은 비저빌리티로하면 더 나음*/ visibility: hidden; } .visu_txt_wrap{ top: auto; bottom: 0; width: 100%; height: 28.125vw; } .visu_txt_cont{ width: 100%; align-items:center; } .visu_txt_sub02{ display: none; } .visu_btn_wrap{ display: none; } .visu_slide:nth-child(1) .visu_txt_wrap{ background: rgba(237,185,46,.3); } .visu_slide:nth-child(2) .visu_txt_wrap{ background-color: rgba(164,105,53,.3); } .visu_slide:nth-child(3) .visu_txt_wrap{ background-color: rgba(140,171,217,.5); } .visu_tit{ font-size: 6.25vw; line-height: 7.188vw; letter-spacing: -0.1em; } .visu_txt_sub01{ font-size: 3.438vw; margin:1.250vw; letter-spacing: -0.1em; } ul.visu_btm_wrap{ bottom: -8vw; } li.visu_btm_list a{ width: 2.5vw; height: 2.5vw; background-color: #e7e7e7; border-right: 1.250vw; } .start.control{ background-image: url(../img/btn-play-mo.png); } .stop.control{ background-image: url(../img/btn-stop-mo.png); } .visu_arrow{ width: 20px; top: auto; bottom: -8.438vw; background-position: center top; padding: 0; } /* recommend */ .recommend{ margin-top: 21.875vw; } h2.cont_title{ font-size: 5vw; } .recomm_tab{ width: auto; height: 8.625vw; margin: 0 4.688vw; } .recomm_tab a.btn_tab{ font-size: 14px; line-height: 8.625vw; } ul.recomm_list.Act{ margin-top: 4.688vw; flex-wrap: wrap; /*공간부족하면 아래로 떨어뜨림*/ } ul.recomm_list li{ width: 50%; height: 68.438vw; padding: 0 1.25vw; cursor: pointer; } ul.recomm_list li:hover .buy_view_layer{ opacity: 0; } .recomm_img{ display: flex; height: 50vw; justify-content: center; align-items: center; border: 1px solid #eee; } ul.recomm_list li .recomm_img img{ width: auto; height: 30.139vw; } ul.recomm_list li .recomm_name{ padding: 1.875vw 0; font-size: 3.75vw; } /* lounge */ .cont02{ margin-top: 6.125px; background-color: #fafafa; padding: 22.9375vw 0; } .lounge_cont{ flex-flow: wrap; } .lounge_img{ width: auto; margin: 4.375vw 0; padding: 0 8.75vw; } .lounge{ height: auto; position: relative; padding: 0; } .lounge_txt_wrap{ width: 100%; padding: 0 8.75vw; } .lounge_txt_wrap h3{ position: absolute; top: -50px; width: 100%; font-size: 4.375vw; } .lounge_txt_wrap desc{ margin: 6.25vw 0 0; font-size: 4.0625vw; line-height: 6.5625vw; } .lounge_txt_wrap .btn_view{ height: 9.0625vw; padding: 0 9.375vw; font-size: 3.125vw; line-height: 9.0625vw; } .lou02 .lounge_img{ order:0; } .lou02 { margin-top: 31vw;; } /* flagship */ .flag_wrap{ height: auto; padding: 0 8.72vw 10.3125vw; background-image: url(../img/flag-bg-txt-mo.jpg); background-position: 0 100%; background-size: contain; } .flag_slider{ height: 82.5vw; } .flag_slider li.fl_01{ background-image: url(../img/flag-bg-mo-01.jpg); } .flag_slider li.fl_02{ background-image: url(../img/flag-bg-mo-02.jpg); } .flag_slider li.fl_03{ background-image: url(../img/flag-bg-mo-03.jpg); } .flag_slider li.fl_04{ background-image: url(../img/flag-bg-mo-04.jpg); } .flag_txt_wrap{ position: static; left: auto; width: 100%; } .flag_txt_wrap p{ font-size: 3.75vw; line-height: 6.5625vw; margin: 6.25vw 0 0; } .flag_txt_wrap .btn_view{ height: 9.0625vw; padding: 0 9.375vw; font-size: 3.125vw; line-height: 9.0625vw; } .flag_btm_wrap{ margin-top: 0; position: absolute; top: 74.375vw; left: 0; width: 100%; text-align: center; } .flagside{ width: 20px; height: 20px; top: 74.375vw; margin-top: 0; background-size: contain; } .flagside.left{ left: 12vw; } .flagside.right{ right: 10vw; } }/*end*/ content.js $(function(){ //footer const footer_l =$('.footer_lang') footer_l.click(footer_lang) function footer_lang(e){ e.preventDefault() $(this).toggleClass('show') } })
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
max-width:999px에서 비주얼 폰트 vw 변환문의 드려요~
안녕하세요, 쌤 몇가지 문의드립니당~ 1. max-width:999px 에서 비주얼의 글자들 크기를 vw를 변환할때 저도 사이트에서 변환해보니 viewport width: 1440px을 넣으면 적용하신 아래값이 나오는데 viewport width: 999px을 넣으면 저 값이 안나와서 1440px로 적용하신이유가 있나요? .visu_tit { font-size: 2.917vw; line-height: 3.750vw; letter-spacing: -0.139vw; } .visu_txt_sub01 { font-size: 1.25vw; } .visu_txt_sub02 { margin: 3.194vw 0 0; font-size: 1.389vw; } 2. 제가 설화수 포폴에 서브페이지등 보완해서 넣고 싶은데요(해도되는거겠죵?) media.css 에서 변환 파트가 1439/999 이렇게 되어있는데 보통은 타블렛 모바일 1024/768 이렇게 되어있어서 왜 1439/999로 나눴는지에대해서 어떻게 설명해야할지 모르겠어요.. 설명에선 컨텐츠 크기가 1440이라서 라고 하셨는데 초보라서..완전히 이해를 못했어요.. 감사드립니다~수고하세요! ^^
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
lounge 플랙스-스페이스비트윈등이 않되요~
안녕하세요? 쌤, 아직은 초보라 질문이 좀 있습니다~ 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{ }
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
질문드려요~
- 강사님 이 영상을 2번째 보고있어요. 처음에 알려주신 그대로 적었을땐 잘 작동이 되었는데요. 이번에 class이름을 정할 때 '_' 가 아니라 '-' 로 통일해서 적어보고싶어서 해보다가요 visu.js 가 어디에 오류가 생겼는지 작동이 안되네요 ㅎㅎ 아직 js에 대한 지식이 많이 부족해서 도움을 요청해보아요~!
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
gnb에 submenu가 나올때
gnb에 submenu가 나올때요 '제품'의 submenu나오고나서 브랜드스토리로 마우스를 옮기면 submenu가 사라지지가 않아요 이건 어떻게 해결해야하는지 여쭤보아요 :)
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
Search 코딩
ㅠ 죄송합니다.. 계속 이어듣기로 듣고 있었는데 왜 그 영상만 건너뛰기 됐을까요..계속 찾았는데 안나오더라구요 죄송해요 알려주셔서 감사합니다
- 미해결쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
Search 부분 코딩
삭제된 글입니다