묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
팝업창이 열리지 않습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E3</title> <link rel="stylesheet" href="css/E3.css"> </head> <body> <div class="container"> <div class="maincontent"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU1</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU2</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU3</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU4</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU5</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="items"> <div class="shortcut"></div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.12.20</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.12.20</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우!</em><b>2022.12.20</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.12.20</b></a> </div> </div> </div> <div class="gallery"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-e-01.jpg" alt="슬라이드1"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="슬라이드2"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="슬라이드3"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <div class="close-modal" href="none">X 닫기</div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/E3.js"></script> </body> </html>@charset "utf-8"; body { font-size: 15px; background-color: #fff; color: #000; margin: 0; } a { color: #000; text-decoration: none; } .container { border: 1px solid seagreen; } .maincontent { border: 1px solid sandybrown; display: flex; } .left { width: 200px; } .center { width: 400px; } .right { flex: 1; } header {} header > div { border: 1px solid aqua; } .header-logo { height: 100px; } .navi { height: 500px; } /* NAVIGATION */ .menu { width: 90%; margin: auto; padding: 0; list-style: none; } .menu li { position: relative; text-align: center; } .menu li > a { display: block; border: 1px solid #000; padding: 5px; transition: 0.3s; } .menu li:hover > a { background-color: lightgray; } .sub-menu { display: none; position: absolute; top: 0; left: 100%; width: 100%; } .sub-menu a { display: block; background-color: #00000050; padding: 5px; } .sub-menu a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; } .items {} .items > div { border: 1px solid lightcoral; } .shortcut { height: 150px; } .news { height: 250px; } .gallery { height: 250px; } /* news-gallery */ .tab-inner { box-sizing: border-box; overflow: hidden; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; background-color: lightgray; margin-bottom: -1px; border-bottom: none; } .tab1 { border: 1px solid #000; } .tab1 a { width: 95%; margin: auto; overflow: hidden; padding: 5px; display: block; border-bottom: 1px dashed lightgray; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 70%; } .tab1 a b { float: right; } /* .tab-inner { width: 95%; margin: auto; } .btn {} .btn > a { border: 1px solid #000; padding: 5px; width: 100px; display: inline-block; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: gainsboro; } .tab1 { border: 1px solid #000; } .tab1 a { display: block; overflow: hidden; padding: 5px; border-bottom: 1px solid #000; width: 95%; margin: auto; } .tab1 > a:last-child { border-bottom: none; } .tab1 > a em { font-style: normal; width: 70%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 > a > b { font-weight: normal; float: right; } */ /* slide-image */ .slide-banner { /* height: 150px; */ display: flex; } .slide-banner a img { width: 100%; } /* Slide */ .slide {} .slide-image { height: calc(100vh - 120px); } /* Slide */ .slide { display: flex; } .slide-image { flex: 1; position: relative; overflow: hidden; } .slide-image-inner { /* 실제로 움직이는 요소 */ font-size: 0; width: 300%; height: inherit; position: absolute; animation: slide 10s linear infinite; } .slide-image-inner a { /* 움직이는 .slide-image-inner에 포함된 요소 */ display: inline-block; height: inherit; width: calc(100% / 3); } .slide-image-inner a img { width: 100%; height: inherit; object-fit: cover; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -100%; } 65% { left: -100%; } 70% { left: -200%; } 95% { left: -200%; } 100% { left: 0; } } /* 좌우 슬라이드 */ /* .slide-image-inner { top: 0; left: 0; font-size: 0; width: 100%; height: inherit; position: absolute; animation: slide 10s linear infinite; } .slide-image-inner a { width: inherit; height: inherit; } .slide-image-inner a img { object-fit: cover; width: inherit; height: inherit; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -100%; } 65% { top: -100%; } 70% { top: -200%; } 95% { top: -200%; } 100% { top: 0; } } */ footer { display: flex ; } footer > div { border: 1px solid saddlebrown; height: 100px; } .footer-logo { width: 200px; } .copyright { flex: 1; } .sns { width: 250px; } /* modal */ .modal { display: none; position: absolute; background-color: #0000004f; top: 0; left: 0; width: 100%; height: 100%; } .modal-content { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; background-color: #fff; padding: 15px; width: 400px; height: 450px; } .modal-content h2 { text-align: center; background-color: #000; padding: 5px; color: #fff; } .modal-content p {} .close-modal { float: right; border: 1px solid #000; padding: 5px; width: 50px; }// navigation $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) // modal $('.open-modal').click(function(){ ('.modal').fadeIn() }) $('.close-modal').click(function(){ ('.modal').fadeOut() })안녕하세요! 공지사항 첫째 줄 글을 클릭했을 때 팝업창이 떠야 하는데 왜 안 뜨는 건지 코드를 봐도 잘 모르겠어서 질문 남깁니다. 왜 안뜨는 걸까요...? 완성본 코드와 비교했을 때 틀린 부분은 없는 것 같아서요.
-
해결됨피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
버튼 생성 시 Frame과 Rectangle의 차이
안녕하세요.[스플래시 UI화면 디자인하기]를 실습중입니다.버튼을 만들 때 Rectangle과 Text를 그룹으로 알려주셨습니다. Rectangle 대신 Frame을 사용해도 되는지, 된다면 차이점이 무엇인지 질문드립니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
span텍스트 아래로 안가져요 ㅠㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D-4</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">menu1</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu2</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu3</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu4</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-images"> <div class="slide-images-inner"> <a href="#"><img src="images/slide-d-01.jpg" alt=""></a> <a href="#"><img src="images/slide-d-02.jpg" alt=""></a> <a href="#"><img src="images/slide-d-03.jpg" alt=""></a> </div> </div> </div> <div class="banner"> <a href="#"><img src="images/banner-01.png" alt="banner-01"></a> <span>배너1</span> <a href="#"><img src="images/banner-02.png" alt="banner-02"></a> <span>배너2</span> <a href="#"><img src="images/banner-03.png" alt="banner-03"></a> <span>배너3</span> <a href="#"><img src="images/banner-04.png" alt="banner-04"></a> <span>배너4</span> <a href="#"><img src="images/banner-05.png" alt="banner-05"></a> <span>배너5</span> <a href="#"><img src="images/banner-06.png" alt="banner-06"></a> <span>배너6</span> <a href="#"><img src="images/banner-07.png" alt="banner-07"></a> <span>배너7</span> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#">외국인과 영어로 네이티브처럼 대화하는 노하우!<b>2022.08.09</b></a> <a href="#">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> </div> </div> <div class="gall"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#"><img src="images/gallery-01.png" alt="images/gallery-01"></a> <span>갤러리1</span> <a href="#"><img src="images/gallery-02.png" alt="images/gallery-02"></a> <span>갤러리2</span> <a href="#"><img src="images/gallery-03.png" alt="images/gallery-03"></a> <span>갤러리3</span> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/footer-logo.png" alt="footer-logo"> </a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#">기업소개 제휴 및 입점 문의</a> <span>ㅣ</span> <a href="#">이용약관</a> <span>ㅣ</span> <a href="#">개인정보처리방침</a> <span>ㅣ</span> <a href="#">이메일무단수집거부</a> <span>ㅣ</span> <a href="#">사이트맵</a> <span>ㅣ</span> <a href="#">인재채용</a> <span>ㅣ</span> <a href="#">기업소개 제휴 및 입점 문의</a> </div> <div class="copy"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장<br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> <div class="family-site"> <select> <option value="">family site</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </div> </footer> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> </p> <a class="close-modal" href="#">닫기</a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom4.js"></script> </body> </html>@charset "utf-8"; body{ background-color: #fff; color: #333; margin: 0; } a{ text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content>div{ } .left{ width: 200px; } .right{ flex: 1; } header{} header>div{ } .header-logo{ height: 100px; padding-top: 10px; box-sizing: border-box; } .navi{ height: 400px; width: 90%; margin: auto; } .menu{ padding: 0; } .menu li{ list-style: none; } .menu li>a{ width: 94%; border: 1px solid #000; display: inline-block; padding: 5px; margin: auto; text-align: center; transition: 0.5s; } .menu li>a:hover{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; border: 1px solid #000; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } .slide{ height: 400px; position: relative; overflow: hidden; } .slide-images{ height: 400px; } .slide-images-inner{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{top:0} 30%{top:0} 35%{top:-400px} 65%{top:-400px} 70%{top:-800px} 95%{top:-800px} 100%{top:0} } .slide-images-inner a{ } .slide-images-inner img{} .banner{ height: 150px; display: flex; align-items: center; } .banner a{ margin: auto; display: block; } .banner a img{ width: 120px; } .banner a img span{ } .items{ height: 250px; display: flex; } .items>div{ height: 250px; flex: 1; } .news{} .gall{} .tab-inner{} .btn{} .btn span{ border: 1px solid #000; display: inline-block; padding: 10px; width: 150px; text-align: center; border-radius: 5px 5px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px; } .tab1{ border: 1px solid #000; height: 168px; width: 98%; } .tab1 a{ width: 95%; margin: auto; display: block; border-bottom: 1px solid #000; padding: 5px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ font-weight: normal; float: right; } .tab2{ width: 98%; border: 1px solid #000; height: 168px; display: flex; } .tab2 a{ margin: auto; } .tab2 a img{ width: 120px; display: inline-block; } .tab2 span{ display: block; } footer{ display: flex; height: 100px; align-items: center; } footer>div{ } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content>div{ display: flex; align-items: center; height: 50px; } .footer-link{ } .footer-link a:hover{ text-decoration: underline; color: skyblue } .copy{} .family-site{ text-align: center; width: 230px; } .modal{ background-color: #000; top: 0; position: absolute; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none; } .modal-content{ position: absolute; background-color: #fff; width: 600px; padding: 20px; border-radius: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h3{ background-color: black; padding: 10px; color: #fff; } .modal-content p{} .modal-content a{ border: 1px solid #000; padding: 5px; float: right; }$('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) $('.menu>li').mouseover(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu>li').mouseout(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃 B타입 만들기 footer-inner 작동오류
index.html<div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> style sheet.footer-inner{ background-color: beige;}footer{ border: 1px solid green; width: 1200px; margin: auto;}footer > div { height: 100px; box-sizing: border-box; float: left;}.footer-logo{ border: 1px solid pink; width: 200px;}.copyright{ width: 1000px;}.copyright > div { border: 1px solid black; height: 50px; } footer-inner 부분만 먹히지 않아요... background-color를 줘도 실행이 안됩니다ㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
전체레이아웃 E형 _ 브라우져 가로스크롤 생성이 됩니다.
안녕하세요 강좌를 듣고 큰 도움을 얻고 있습니다. 강의 듣고 따라 하는중 궁금사항이 있어 문의드립니다. - 전체레이아웃 E형 강의 듣고 따라 하여 모두 정상적으로 잘 레이아웃이 작성되었습니다. ( 강좌명 : E유형(HTML 전체 레이아웃 제작 with Flex) – E1) 그런데 , 브라우져의 세로 스크롤이 생성됩니다. 세로 스크롤을 안생기게 하려면 어떻게 해야 할까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
넣지 않은 패딩이 있고 해당부분을 해결할 수 없어요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.<보고 있던 강의제목>3. 상단 드롭다운 네비게이션(3가지 타입) – HTML+CSS+JQUERY강의시점 23:09아래는 작성한 cssbody { display: flex; justify-content: center; } .container { border: 1px solid #000; width: 1200px; } header { display: flex; justify-content: space-between; position: relative; } header>div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide div { border: 1px solid #000; height: 300px; } .items { display: flex; } .items>div { border: #000 1px solid; height: 200px; } .news { width: 400px; } .banner { width: 400px; } .shortcut { width: 400px; } footer { display: flex; } footer>div { border: #000 1px solid; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* navi */ .menu { list-style: none; margin-top: 67px; } .menu li { /* border: #000 1px solid; */ float: left; width: 25%; box-sizing: border-box; text-align: center; } .sub-menu { border: #000 1px solid; /* display: none; */ } .sub-menu a { display: block; text-decoration: none; padding: 5px; background-color: #fff; transition: 0.5s; } .sub-back { width: 100%; height: 200%; background-color: #000; position: absolute; right: 0; } .sub-menu a:hover { background-color: #000; color: #fff; } .menu li>a { border: #000 1px solid; display: block; padding: 5px; text-decoration: none; } .menu li:hover>a { background-color: #000; color: #fff; }
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달팝업창이 height 100% 가 body 가 아닌 .container div 로 인식해서 올라갑니다
안녕하세요 선생님! 우선 좋은 강의 정말 잘 보고 있습니다!23년도 들어서 새로 출시된 유형도 빠르게 반영해주셔서 정말 좋습니다. 문제점: 모달팝업창에 height 100% 주고 position 속성도 .modal 과 body에 넣어주었는데,모달팝업이 높이를 .containter 에 맞춰지네요 (캡쳐본)--<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>A-1 유형 복습. 탭 뭉쳐있는거</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-a1-header.png" alt="logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">탑</a> <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li> <a href="#none">아우터</a> <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li> <a href="#none">팬츠</a> <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li> <a href="#none">악세서리</a> <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="content"> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class='open-modal' href="#none">SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-a1-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-a1-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-a1-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banne-a1-02.jpg" alt="banner"> </a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-a1-01.jpg" alt="shortcut"> </a> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"> <img src="images/logo-a1-footer.png" alt="footer-logo"> </a> </div> <div class="copyright"> <a href="#none">법적고지</a> <a href="#none">개인정보취급방침</a> <a href="#none">개인정보처리방침</a> <br><br> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="facebook"></a> <a href="#none"><img src="images/sns-02.png" alt="twitter"></a> <a href="#none"><img src="images/sns-03.png" alt="instagram"></a> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. <br><br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a class="close-modal" href="#none">Close</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { color: #333333; background-color: #fff; height: 100%; width: 100%; position: relative; } a { color: #333333; text-decoration: none; } .container { border: 1px solid red; width: 1200px; margin: auto; } header { height: 100px; position: relative; z-index: 1; } header > div { height: 100px; } .header-logo { float: left; width: 200px; } .navi { width: 600px; float: right; } .content { } .slide { height: 300px; border: 1px solid blue; } .items { height: 200px; display: flex; } .items > div { border: 1px solid #000; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* Navigation */ .menu { list-style: none; padding: 0; margin-top: 66px; } .menu li { float: left; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 3px; transition: 0.5s; } .sub-menu { border-bottom: 1px solid black; } .menu li:first-child > .sub-menu { border-left: 1px solid black; } .menu li:last-child > .sub-menu { border-right: 1px solid black; } .sub-menu { background-color: #fff; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: black; color: white; } .sub-menu a:hover { background-color: black; color: white; } /* Navigation */ /* Image Slide */ .slide { width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide > div { font-size: 0; animation: slide 5s linear infinite; position: absolute; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; } } /* Image Slide */ /* Tab Menu */ .tab-inner { width: 96%; margin: auto; position: relative; } .btn { } .btn > a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; border-radius: 5px 5px 0 0; padding: 2px 6px; background-color: #ddd; margin-bottom: -1px; border-bottom: none; } .btn > a:nth-child(2) { margin-left: -6px; } .btn a.active { background-color: white; } .tabs { } .tabs > div { border: 1px solid #000; height: 165px; width: 100%; position: absolute; box-sizing: border-box; background-color: #fff; } .tab1 { } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid black; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; padding-top: 20px; display: none; } .tab2 a { } .tab2 a img { width: 120px; } /* Tab Menu */ /* 모듈외 콘텐츠 */ .header-logo, .footer-logo, .sns { line-height: 130px; } .copyright { text-align: center; padding-top: 10px; box-sizing: border-box; } .copyright a:hover { color: dodgerblue; text-decoration: underline; } .sns { text-align: center; } /* 모듈외 콘텐츠 */ /* Modal */ .modal { background-color: rgba(0, 0, 0, 0.25); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; } .modal-content { background-color: #fff; width: 450px; height: 500px; padding: 25px; text-align: center; border-radius: 15px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.418); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 {} .modal-content p {} .modal-content a { float: right; border: 1px solid #000; padding: 2px 8px; border-radius: 5px; } /* Modal */
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드가 안먹혀요 ㅠ
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style8.css"></head><body><div class="cotainer"><div class="haeder-inner"><header><div class="header-logo"><a href="#"><img src="img/logo-header.png" alt=""></a></div><div class="navi"></div></header></div><div class="con-inner"><div class="slide"><div class="slide-items"><a href="#"><img src="img/slide-01.jpg" alt=""></a><a href="#"><img src="img/slide-02.jpg" alt=""></a><a href="#"><img src="img/slide-03.jpg" alt=""></a></div></div><div class="items"><div class="news"></div><div class="banner"></div><div class="shortcut"></div></div></div><div class="footer-inner"><footer><div class="right"><div class="copy"></div><div class="copy-2"></div></div><div class="family-site"><select><option value="">family site</option><option value="">family site2</option><option value="">family site3</option><option value="">family site4</option></select></div></footer></div></div><script src="script/jquery-1.12.4.js"></script><script src="script/custum8.js"></script></body></html> @charset "utf-8";body{ background-color: #fff; color: #333; padding: 0; margin: 0;}a{ text-decoration: none; color: #333;}ul{ list-style: none;}.cotainer{ width: 100%; margin: auto;}.haeder-inner{ width: 100%; background-color: antiquewhite; height: 100px;}header{ width: 1200px; margin: auto; height: 100px;}header>div{ height: 100px;}.header-logo{ width: 200px; float: left; line-height: 130px;}.navi{ width: 600px; float: right;}.slide{ margin: auto; overflow: hidden; height: 300px; width: 1200px; position: relative;}.slide-items{ width: 3600px; position: absolute; top: 0; left: 0; height: 200px; font-size: 0;}.items{ width: 1200px; margin: auto; overflow: hidden;}.items>div{ border: 1px solid red; height: 200px; float: left; box-sizing: border-box;}.news{ width: 450px;}.banner{ width: 450px;}.shortcut{ width: 300px;}.footer-inner{ width: 100%; height: 100px; background-color: bisque;}footer{ width: 1200px; margin: auto; overflow: hidden;}footer>div{ height: 100px; border: 1px solid red; width: 1200px; float: left; box-sizing: border-box;}.right{ width: 1000px; overflow: hidden;}.right>div{ height: 50px; border: 1px solid red;}.family-site{ width: 200px; line-height: 100px; text-align: center;}.copy{}.copy-2{} setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500);
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
게시판을 추가할 수 있는 방법이 있을까요?
좋은 강의 감사 드립니다.홈페이지 기능은 이제 이해가 되었습니다.저는 게시판 기능을 추가하고 싶은데요.무료로 제공되는 게시판이나 추천해 주실 수 있는 게시판이 있을까요?아님 네이버 모두에 있는 무료게시판을 연동할수 있을까요?감사합니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 갤러리가 안먹혀요 ㅠ
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style8.css"></head><body><div class="container"><div class="left"><header><div class="header-logo"><a href="#"><img src="images/logo-header.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li></ul></div></header></div><div class="right"><div class="slide"><div><a href="#"><img src="images/slide-01.jpg" alt=""></a><a href="#"><img src="images/slide-02.jpg" alt=""></a><a href="#"><img src="images/slide-03.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><a href="#">공지사항</a></div><div class="tab1"><a href="#">운영위원장 후보자 추천을 받고 있습니다.<b>2020.01.09</b></a><a href="#">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a><a href="#">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a><a href="#">보안강화 시스템 작업 안내 공지<b>2019.12.20</b></a><a href="#">부여 가을연꽃축제 10주년 콘서트 축제<b>2019.12.20</b></a></div></div></div><div class="gallery"><div class="tab-inner"><div class="btn"><a href="#">갤러리</a></div><div class="tab2"><a href="#"><img src="images/gallery-01.jpg" alt=""></a></div></div></div><div class="shortcut"><a href="#"><img src="images/shortcut.jpg" alt=""></a></div></div><footer><div class="copy">(주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니</div><div class="sns"><div><a href="#"><img src="images/sns-01.png" alt=""></a><a href="#"><img src="images/sns-02.png" alt=""></a><a href="#"><img src="images/sns-03.png" alt=""></a></div><div><select><option value="">여주군청 홈페이지</option><option value="">한국관광공사</option><option value="">여행자보험가입</option></select></div></div></footer></div></div><script src="script/jquery-1.12.4.js"></script><script src="script/custum8.js"></script></body></html> @charset "utf-8";body{font-size: 15px;}a{color: #000;text-decoration: none;}.container{}.container>div{ height: 650px; float: left;}.left{ width: 200px;}.right{ width: 800px;}header{}header>div{}.header-logo{ height: 100px; line-height: 130px;}.navi{ margin-top: 30px;}.menu{ padding: 0; width: 90%; margin: auto;}.menu li{ list-style: none; text-align: center; }.menu li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu li:hover>a{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; display: none;}.sub-menu a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu a:hover{ background-color: #000; color: #fff;}.slide{ width: 800px; position: relative; height: 350px; }.slide>div{ font-size: 0;}.slide>div a{ position: absolute; top: 0; left: 0; opacity: 0; animation: slide 10s linear infinite;}.slide>div a:nth-child(1){ animation-delay: 0;}.slide>div a:nth-child(2){ animation-delay: 3.5s;}.slide>div a:nth-child(3){ animation-delay: 7s;}@keyframes slide{ 0%{opacity: 0;} 5%{opacity: 1;} 35%{opacity: 1;} 40%{opacity: 0;} 100%{opacity: 0;}}.items{ overflow: hidden;}.items div{ height: 200px; float: left; box-sizing: border-box;}.news{ width: 300px;}.tab-inner{}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; padding: 5px; width: 130px; text-align: center; border-radius: 5px 5px 0 0;}.tab1, .tab2{ border: 1px solid #000; height: 160px;}.tab1 a{ display: block;}.tab2 img{ width: 100px;}.gallery{ width: 300px;}.shortcut{ width: 200px;}footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.copy{ width: 600px; text-align: center; padding-top: 30px;}.sns{ width: 200px;}.sns div{ text-align: center;}.sns div:first-child{ padding-top: 5px; }.sns div:last-child{ text-align: center; line-height: 35px;}
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
box-sizing을 전체선택자에 주면 안되나요
다음과 같이 box-sizing을 전체선택자에 줄경우크롬에선 적용이 되고엣지에선 적용이 안되는데*{ margin: 0; padding: 0; box-sizing: border-box; }(각 div 영역에 box-sizing:border-box줄때는 됩니다.) 웹디자인 기능사에선 크롬,엣지,익스플로러(이제 익스플로러는 퇴출이겠지만..?) 동일하게 출력되어야 할거 같은데.... 결론적으로 전체선택자에 box-sizing:border-box를 주면 안되는걸까요?아래 캡처화면은 크롬과 엣지에서 실행시킨 결과입니다.엣지 화면 크롬 화면 전체 코드입니다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="logo"> </div> <nav> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </nav> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="notice"> </div> <div class="banner"> </div> <div class="link"> </div> </div> <footer> <div class="logo2"> </div> <div class="copyright"> </div> <div class="sns"> </div> </footer> </div> <!-- <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> --> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ border: 1px solid hotpink; width: 1200px; height: 700px; margin: auto; } header{ width: 1200px; height: 100px; border: 1px solid green; } header .logo{ width: 200px; height: 100px; border: 1px solid yellow; float: left; } header nav{ width: 600px; height: 100px; border: 1px solid blue; float: right; } header nav ul { } .slide{ } .slide div{ border: 1px solid green; height: 300px; } .items{ overflow: hidden; } .items div{ border: 3px solid purple; height: 200px; float: left; box-sizing: border-box; } .notice{ width: 500px; } .banner{ width: 350px; } .link{ width: 350px; } footer{} footer div{ border: 2px solid blue; height: 100px; float: left; box-sizing: border-box; } .logo2{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; }
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프레임과 분리되는 현상
안녕하세요, 에릭님!강의를 듣다가 질문이 생겨 문의드립니다:간혹 프레임 안에서 작업을 하다가, 어느순간 프레임을 움직일 때 안에 놓았던 개체들이 프레임과 분리되어 같이 움직이지 않는 경우가 생깁니다.이렇게 프레임 안에서 잘 꾸미고 있다보면 가끔 어느 순간,2. 프레임을 움직일 떄, 아래와 같이 프레임과 개체들이 분리되어 있습니다.어떤 경우에 이렇게 되어버리는지와 다시 합칠 수 있는 방법을 알 수 있을까하여 문의드립니다. 강의가 도움이 정말 많이 되고 있습니다. 항상 정말 감사합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
스타일 및 텍스트박스 관련 문의드립니다.
안녕하세요 에릭님! 수업을 듣다 질문이 있어 문의남깁니다.오랫만에 다시 들으며 질문이 생겨서 남기는것인데, 혹시 다른 강의에서 설명해주셨던 부분이면 죄송합니다^^;우선 첫번째로는, 아래 첨부한 이미지와 같이 텍스트를 입력하고 여백을 잴 때 텍스트박스 기준으로 사이즈를 재게 되는데, out stroke처리를 하는것과 텍스트박스 크기를 조정하는것에서 여백 차이가 발생합니다.이럴때 처음에는 텍스트 박스로 작업을 하더라도, 최종 개발자에게 넘겨주기 전에는 스트로크 처리를 한 뒤에 여백이나 정렬을 다시 정리해야 하는걸까요?두번째 질문은, 스타일 가이드를 잡을 때 보통 몇개정도의 스타일 가이드를 잡고 진행하는것이 좋을까요?예를들어서 같은 26사이즈에, bold와 26사이즈 light가 있으면 각각 스타일을 등록해놔야 하는것인지그리고 버튼에 들어가는 텍스트 스타일은 Heading이나 Body외에 Button으로 별도 스타일 네이밍을 해야하는것인지 궁금합니다. 같은 사이즈나 굵기여도, 글씨체가 달라진다면 그것도 별도 스타일로 지정해야하나요? 마지막으로 개발자에게 작업 시안을 넘길 때 현업에서 필수로 넘기는 정보가 있을까요? 예를들어 padding, margin값을 알 수 있는지 문의가 들어왔었는데, 이런것 외에도 색상코드나 텍스트 사이즈같은걸 사전에 스타일로 잡으면서 값을 다 정리해놓고 개발자분에게 전달해야하는것인지..? 궁금합니다. ^^처음에 강의를 들을땐 다 알것만 같았는데, 다시 실제 실습이나 작업을 해보며 강의를 재수강하니 까먹었던것이나 당시에 100%이해하지 못하고 넘어갔던것을 다시 학습하게 되어 좋기도 하고, 귀찮게 질문드려 죄송한 마음도 드네요.좋은 강의와 답변에 늘 감사한 마음드립니다. 감사합니다!!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
오토 레이아웃 질문입니다
오토 레이아웃은 각 아이템의 크기가 동일해야 사용할수있나요?여러개의 버튼을 만들고 오토 레이아웃으로 정렬을 하려고 했는데 두개를 같이 묶을땐 오른쪽에 오토 레이아웃이 활성화되는데 세개나 그이상을 묶으면 사라져버립니다, 개수나 형식에 따라 제한이 있는지요?+아래 질문글에 올려주신 예제파일에서 메인버튼 5개를 묶으니 오토레이아웃이 뜨는데 제가 도형으로 만든 버튼은 안뜨네요
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비 상단
안녕하세요 선생님:)상단 네비 전체드롭다운에사이사이 선들을 어떤방법으로 제거해야하나요? <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style3.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">탑</a><div class="sub-menu"><a href="#">블라우스</a><a href="#">티</a><a href="#">셔츠</a><a href="#">니트</a></div></li><li><a href="#">아우터</a><div class="sub-menu"><a href="#">자켓</a><a href="#">코트</a><a href="#">가디건</a><a href="#">머플러</a></div></li><li><a href="#">팬츠</a><div class="sub-menu"><a href="#">청바지</a><a href="#">짧은바지</a><a href="#">긴바지</a><a href="#">레깅스</a></div></li><li><a href="#">악세서리</a><div class="sub-menu"><a href="#">귀고리</a><a href="#">목걸이</a><a href="#">반지</a><a href="#">팔찌</a></div></li></ul></div></header><div class="slide"><div><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><a href="#" class="actvie">공지사항</a><a href="#">갤러리</a></div><div class="tabs"><div class="tab1"><a class="open-modal" href="#">3월 재입고 품목을 알려드립니다.<b>2020.03.14</b></a><a href="#">반품/환불 규정에 대해 알려드립니다.<b>2020.03.14</b></a><a href="#">S/S 시즌 신규 의류 신상품 안내<b>2020.03.14</b></a><a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a><a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a></div><div class="tab2"><img src="img/gallery1.jpg" alt=""><img src="img/gallery2.jpg" alt=""><img src="img/gallery3.jpg" alt=""></div></div></div></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</div><div class="sns"><a href="#"><img src="img/sns1.png" alt=""></a><a href="#"><img src="img/sns2.png" alt=""></a><a href="#"><img src="img/sns3.png" alt=""></a></div></footer></div> <div class="modal"> <div class="modal-con"> <h3>이벤트 안내</h3> <p>안녕하세요! JUST쇼핑몰입니다. 고객님들의 성원에 보답하는 JUST쇼핑몰이 되고자 신규회원 20% 할인 이벤트를 실시하고 있습니다. 웹과 모바일 가입회원 대상이며, 서비스만족을 위해 꾸준히 노력하겠습니다.</p> <a class="close-madal" href="#">x 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script></body></html> @charset "utf-8";body{background-color: #fff;color: #333;}a{text-decoration: none;color: #333;}.container{width: 1200px;margin: auto;}header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid #000; /}.header-logo{ float: left; width: 200px; line-height: 130px;}.navi{ width: 600px; float: right;}.menu{ / border: 1px solid #000; / padding: 0; list-style: none;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center; margin-top: 15px;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li>a:hover{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;}.slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid #000; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite;}@keyframes slide{ 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;}}.items{ overflow: hidden;}.items>div{ height: 200px; / border: 1px solid #000; / float: left; width: 400px; box-sizing: border-box;}.news{}.tab-inner{ width: 95%; margin: auto; padding: 6px;}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; width: 120px; padding: 5px; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px;}.btn>a.actvie{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px; padding: 0 10px;}.tab1{ }.tab1 a{ border-bottom: 1px solid #000; display: block; padding: 6px;}.tab1 a:last-child{ border-bottom: none;}.tab1 a b{ float: right; font-weight: normal;}.tab2{ display: none; text-align: center;}.tab2 img{ width: 100px; padding-top: 30px;}.banner{}.shortcut{}footer{}footer>div{ height: 100px; / border: 1px solid #000; / float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;}.modal{ background-color: #000; position: absolute; / 너비값 잃음 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none;}.modal-con{ background-color: #fff; width: 400px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px;}.modal-con h3{ background-color: #000; color: #fff; padding: 5px;}.modal-con p{ line-height: 1.6em;}.modal-con a{ border: 1px solid #000; padding: 5px; float: right;} $('.menu>li').mouseover(function(){ $('.sub-menu').stop().slideDown()})$('.menu>li').mouseout(function(){ $('.sub-menu').stop().slideUp()})$('.btn>a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')})$('.btn>a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')})$('.open-modal').click(function(){ $('.modal').fadeIn()})$('.close-madal').click(function(){ $('.modal').fadeOut()})
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
탭메뉴가 실행이 안됩니다 ㅠ
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style2.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">MENU-1</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-2</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-3</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-4</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li></ul></div></header><div class="slide"><div><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><span class="active">공지사항</span><span>갤러리</span></div><div class="tabs"><div class="tab1">공지사항</div><div class="tab2">갤러리</div></div></div></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</div><div class="sns"><a href="#"><img src="img/sns1.png" alt=""></a><a href="#"><img src="img/sns2.png" alt=""></a><a href="#"><img src="img/sns3.png" alt=""></a></div></footer></div><script src="script/jquery-1.12.4.js"></script><script src="script/custom.js"></script></body></html> @charset "utf-8";.container{ width: 1200px; margin: auto;}a{ text-decoration: none; color: #333;}header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid red; /}.header-logo{ width: 200px; float: left;}.navi{ width: 800px; float: right;}.menu{ margin-top: 30px; list-style: none; / border: 1px solid #000; / padding: 0;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li:hover>a{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;}.slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid red; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite;}@keyframes slide { 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;}}.items{ overflow: hidden;}.items>div{ height: 200px; float: left; / border: 1px solid red; / box-sizing: border-box;}.news{ width: 400px;}.tab-inner{ width: 95%; margin: auto;}.btn{}.btn>span{ border: 1px solid #000; padding: 5px; width: 130px; display: inline-block; text-align: center; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px; cursor: pointer;}.btn>span:active{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px;}.tab1{}.tab2{ display: none;}.banner{ width: 400px;}.shortcut{ width: 400px;}footer{}footer>div{ height: 100px; / border: 1px solid red; */ float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;} $('.menu>li').mouseover(function(){ $(this).children('.sub-menu').stop().slideDown()})$('.menu>li').mouseout(function(){ $(this).children('.sub-menu').stop().slideUp()})$('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active')})$('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active')})
-
미해결애플 웹사이트 인터랙션 클론!
마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?
마지막 강의에서 올리신 js파일로 바꾸니 애니메이션이 들어가있는 section 0, 2에서 터치패드로 스크롤 시 멈추는 부분에서 몇프레임 앞뒤 왔다갔다 하는 현상이 좀 심하게 발생합니다. 이전만큼 부드럽게 진행이 되지 않고 좀 간격이 넓게 스크롤 되는 느낌입니다. 이미지 로딩 후 정렬 때문에 이렇게 되는건가요? 아니라면 혹시 팁을 좀 주실 수 있나요?다시 확인해본 바 새로고침을 하면 이러한 문제가 사라지긴 합니다만 원인을 잘 모르겠네요. 좀 더 알아보겠습니다. 제가 진행한 파일입니다!https://leealvinlee.github.io/Leeum_Maurizio_Catellan/
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드
안녕하세요 슬라이드가 안되서 확인 부탁드립니다<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="navi"></div> </header> <div class="slide"> <a href="#"><img src="images/img1.png" alt="img1"></a> <a href="#"><img src="images/img2.png" alt="img2"></a> <a href="#"><img src="images/img3.png" alt="img3"></a> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#"><img src="images/shortcut.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="copy"> <span>COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</span> </div> <div class="sns"> <a href="#"><img src="images/sns1.jpg" alt="sns1"></a> <a href="#"><img src="images/sns2.jpg" alt="sns2"></a> <a href="#"><img src="images/sns3.jpg" alt="sns3"></a> </div> </footer> </div> </body> </html>@charset "utf-8"; .container{ width: 1200px; margin: auto; border: 1px solid red; } header{ height: 100px; } header>div{ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ height: 300px; position: relative; overflow: hidden; } .slide>div{ font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;} } .items{ overflow: hidden; } .items>div{ height: 200px; float: left; width: 400px; box-sizing: border-box; } .news{} .banner{} .shortcut{} footer{ overflow: hidden; } footer>div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; } .copy{ width: 800px; line-height: 100px; text-align: center; } .sns{ width: 200px; line-height: 140px; text-align: center; }그리고 푸터 부분에텍스트는 line-height할때 높이값을 기존 높이와 동일한 사이즈로 하면되는데 이미지는 왜 기존 높이 사이즈로 하면 안되는걸까요??
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
텍스트박스 크기변경할때
안녕하세요.1번과 같이 텍스트박스를 선택하고옵션+쉬프트키를 누르고 크기를 조절하려고 하면텍스트박스가 자꾸 저렇게 됩니다ㅠㅠ고정을 센터로 했는데 어떤문제일까요?
