173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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;}
기쁜 돌고래
2023-03-08T14:18:55.718Z
댓글 1
좋아요 0
조회수 279
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
다음과 같이 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; }
lipper2501
2023-03-04T01:45:47.629Z
댓글 1
좋아요 1
조회수 551
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
안녕하세요, 에릭님! 강의를 듣다가 질문이 생겨 문의드립니다: 간혹 프레임 안에서 작업을 하다가, 어느순간 프레임을 움직일 때 안에 놓았던 개체들이 프레임과 분리되어 같이 움직이지 않는 경우가 생깁니다. 이렇게 프레임 안에서 잘 꾸미고 있다보면 가끔 어느 순간, 2. 프레임을 움직일 떄, 아래와 같이 프레임과 개체들이 분리되어 있습니다. 어떤 경우에 이렇게 되어버리는지와 다시 합칠 수 있는 방법을 알 수 있을까하여 문의드립니다. 강의가 도움이 정말 많이 되고 있습니다. 항상 정말 감사합니다.
웹-디자인 웹 디자인 모바일-디자인 figma 모바일-디자인
Miley
2023-02-25T10:51:02.832Z
댓글 1
좋아요 0
조회수 582
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
안녕하세요 에릭님! 수업을 듣다 질문이 있어 문의남깁니다. 오랫만에 다시 들으며 질문이 생겨서 남기는것인데, 혹시 다른 강의에서 설명해주셨던 부분이면 죄송합니다^^; 우선 첫번째로는, 아래 첨부한 이미지와 같이 텍스트를 입력하고 여백을 잴 때 텍스트박스 기준으로 사이즈를 재게 되는데, out stroke처리를 하는것과 텍스트박스 크기를 조정하는것에서 여백 차이가 발생합니다. 이럴때 처음에는 텍스트 박스로 작업을 하더라도, 최종 개발자에게 넘겨주기 전에는 스트로크 처리를 한 뒤에 여백이나 정렬을 다시 정리해야 하는걸까요? 두번째 질문은, 스타일 가이드를 잡을 때 보통 몇개정도의 스타일 가이드를 잡고 진행하는것이 좋을까요? 예를들어서 같은 26사이즈에, bold와 26사이즈 light가 있으면 각각 스타일을 등록해놔야 하는것인지 그리고 버튼에 들어가는 텍스트 스타일은 Heading이나 Body외에 Button으로 별도 스타일 네이밍을 해야하는것인지 궁금합니다. 같은 사이즈나 굵기여도, 글씨체가 달라진다면 그것도 별도 스타일로 지정해야하나요? 마지막으로 개발자에게 작업 시안을 넘길 때 현업에서 필수로 넘기는 정보가 있을까요? 예를들어 padding, margin값을 알 수 있는지 문의가 들어왔었는데, 이런것 외에도 색상코드나 텍스트 사이즈같은걸 사전에 스타일로 잡으면서 값을 다 정리해놓고 개발자분에게 전달해야하는것인지..? 궁금합니다. ^^ 처음에 강의를 들을땐 다 알것만 같았는데, 다시 실제 실습이나 작업을 해보며 강의를 재수강하니 까먹었던것이나 당시에 100%이해하지 못하고 넘어갔던것을 다시 학습하게 되어 좋기도 하고, 귀찮게 질문드려 죄송한 마음도 드네요. 좋은 강의와 답변에 늘 감사한 마음드립니다. 감사합니다!!
웹-디자인 웹 디자인 모바일-디자인 figma 모바일-디자인
Cloe
2023-02-20T03:47:20.103Z
댓글 2
좋아요 0
조회수 1672
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
오토 레이아웃은 각 아이템의 크기가 동일해야 사용할수있나요? 여러개의 버튼을 만들고 오토 레이아웃으로 정렬을 하려고 했는데 두개를 같이 묶을땐 오른쪽에 오토 레이아웃이 활성화되는데 세개나 그이상을 묶으면 사라져버립니다, 개수나 형식에 따라 제한이 있는지요? +아래 질문글에 올려주신 예제파일에서 메인버튼 5개를 묶으니 오토레이아웃이 뜨는데 제가 도형으로 만든 버튼은 안뜨네요
웹-디자인 모바일-디자인 모바일-디자인 figma 웹 디자인
SY
2023-02-17T10:02:29.302Z
댓글 1
좋아요 0
조회수 451
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 선생님:) 상단 네비 전체드롭다운에 사이사이 선들을 어떤방법으로 제거해야하나요? <!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()})
html/css jquery 웹-디자인 웹 디자인 HTML/CSS
기쁜 돌고래
2023-02-16T13:25:55.271Z
댓글 1
좋아요 1
조회수 407
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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')})
html/css HTML/CSS 웹-디자인 웹 디자인 jquery
기쁜 돌고래
2023-02-15T11:39:06.925Z
댓글 1
좋아요 1
조회수 375
미해결
애플 웹사이트 인터랙션 클론!
마지막 강의에서 올리신 js파일로 바꾸니 애니메이션이 들어가있는 section 0, 2에서 터치패드로 스크롤 시 멈추는 부분에서 몇프레임 앞뒤 왔다갔다 하는 현상이 좀 심하게 발생합니다. 이전만큼 부드럽게 진행이 되지 않고 좀 간격이 넓게 스크롤 되는 느낌입니다. 이미지 로딩 후 정렬 때문에 이렇게 되는건가요? 아니라면 혹시 팁을 좀 주실 수 있나요? 다시 확인해본 바 새로고침을 하면 이러한 문제가 사라지긴 합니다만 원인을 잘 모르겠네요. 좀 더 알아보겠습니다. 제가 진행한 파일입니다! https://leealvinlee.github.io/Leeum_Maurizio_Catellan/
html/css 인터랙티브-웹 웹-디자인 웹 디자인 javascript svg 인터랙티브-웹 HTML/CSS 클론코딩 클론코딩
fruitpigfoot
2023-02-14T13:17:47.939Z
댓글 2
좋아요 0
조회수 1062
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
html/css HTML/CSS jquery 웹-디자인 웹 디자인
HL5PFM
2023-02-12T06:32:29.625Z
댓글 1
좋아요 1
조회수 358
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 슬라이드가 안되서 확인 부탁드립니다 <!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할때 높이값을 기존 높이와 동일한 사이즈로 하면되는데 이미지는 왜 기존 높이 사이즈로 하면 안되는걸까요??
html/css 웹 디자인 웹-디자인 HTML/CSS jquery
기쁜 돌고래
2023-02-10T09:54:02.080Z
댓글 1
좋아요 1
조회수 328
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
안녕하세요. 1번과 같이 텍스트박스를 선택하고 옵션+쉬프트키를 누르고 크기를 조절하려고 하면 텍스트박스가 자꾸 저렇게 됩니다ㅠㅠ 고정을 센터로 했는데 어떤문제일까요?
웹-디자인 웹 디자인 모바일-디자인 모바일-디자인 figma
kshpwgrrkg
2023-02-07T11:58:41.968Z
댓글 1
좋아요 0
조회수 1472
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드가 되지 않습니다 ㅠ 어디부분이 잘못되었는지 확인부탁드립니다! <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="img/logo.png" alt=""></a> </div> <div class="nav"></div> </header> <div class="slide"> <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 class="items"> <div class="news"></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"> 서울특별시 동대문구 장안벚꽃로 279 한국산업인력공단 서울지역본부<br> 전화번호: 1644-8000 동대문구 휘경동 전동중학교 건너편. </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; border: 1px solid red;} header{ height: 100px;}header>div{ height: 100px; }.header-logo{ width: 200px; line-height: 130px; float: left;}.nav{ width: 800px; border: 1px solid wheat; float: right;} .slide{ position: relative; width: 1200px; height: 300px;}.slide>div{ 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; border: 1px solid darkmagenta; box-sizing: border-box;}.news{ width: 400px; border: 1px solid darkorange;}.banner{ width: 400px; }.shortcut{ width: 400px;} footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.footer-logo{ width: 200px; padding-top: 28px;}.copy{ width: 800px; text-align: center; padding-top: 29px;}.sns{ width: 200px; line-height: 140px; padding-left: 11px;}
html/css jquery 웹-디자인 HTML/CSS 웹 디자인
기쁜 돌고래
2023-02-07T11:55:33.773Z
댓글 1
좋아요 1
조회수 472
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
하단 홈바 픽스트포지션 할 때 안에 있는 오브젝트들(홈,카테고리 등 텍스트와 아이콘)은 픽스드포지션을 하지 않아도 탭바 사각형을 따라서 고정이 되는걸가요?
웹-디자인 모바일-디자인 모바일-디자인 웹 디자인 figma
kshpwgrrkg
2023-02-07T11:50:39.464Z
댓글 1
좋아요 0
조회수 539
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
안녕하세요 첨부된 그림과 같이 흰색배경의 그래프 배경을 그리고 그 안에 펜툴로 그래프를 그렸습니다 정밀한 작업을 위해 처음에 그래프를 크게 그리고 그 다음 실제 UI디자인 크기에 맞춰 축소시켜 사용하려고 하는데요 이때 그래프 배경은 의도대로 축소되었지만 그래프 내부 요소들은 축소되지 않고 그대로 남아있습니다 그래프 배경과 그래프 내부요소들이 원래와 같은 비율을 유지하면서 동시에 축소시킬 수 있는 방법이 있을까요? 감사합니다
웹-디자인 모바일-디자인 figma 모바일-디자인 웹 디자인
1024201a
2023-02-07T05:42:23.303Z
댓글 2
좋아요 0
조회수 4106
미해결
애플 웹사이트 인터랙션 클론!
setLayout 함수 끝에 들어가는 ${sceneInfo[i].scrollHeight}px ; 부분에서 따옴표로 잘못 작성해서 좀 해맸었습니다 ㅎㅎ; ${} 부분을 풀어 쓰면 정확하게 어떤식으로 표기가 되는건지.. 궁금합니다. 제 예상으로는 for문 안에 따로 변수를 선언하지 않고, 계산된 값을 바로 가져오기 위해 사용한 것 같은데 맞을까요..??
html/css HTML/CSS svg 웹-디자인 javascript 웹 디자인 인터랙티브-웹 클론코딩 인터랙티브-웹 클론코딩
꿀잠
2023-02-05T14:02:19.987Z
댓글 1
좋아요 0
조회수 513
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
강사님이 올려주신 파일 그대로 열었는데 이런식으로 깨집니다. 어떻게 해결해야하나요? <!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"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/assets/css/app.css"> <title>My Second Web</title> </head> <body> <header id="header" class="wrapper"> <section id="navTop" class="nav-top py-2 d-none d-md-block"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-3 text-start lead fast-counsel"> <a href="#" class="btn btn-outline-dark">Contact</a> </div> <div class="col-4 logo"> <a href="index.html" class="navbar-brand d-flex"> <img src="/assets/images/dummy-logo.png" alt="" class="img-fluid ms-auto" width="200px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My amazing website!!"> </a> </div> <div class="col-5 text-end socials"> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-phone.png" alt="Phone" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-kakao-channel.png" alt="Kakao Channel" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-facebook.png" alt="Facebook" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-twitter.png" alt="Twitter" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-youtube.png" alt="Youtube" width="40px" class="shadow-box"> </a> </div> </div> </div> </section> <nav id="navPrimary" class="navbar navbar-expand-md navbar-dark"> <div class="container-xxl"> <a class="navbar-brand d-block d-md-none" href="index.html"> <img src="/assets/images/dummy-logo.png" alt="Logo" class="img-fluid"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navPrimaryContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Intro </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="page.html">About us</a></li> <li><a class="dropdown-item" href="page.html">Find us</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Documents</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reservation</a> </li> <li class="nav-item"> <a class="nav-link btn btn-outline-secondary" href="#"><i class="fa fa-search"></i></a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <!-- Kakao map appkey here --> <script src="/assets/js/app.js"></script> </body> </html>
html/css HTML/CSS 웹 디자인 웹-디자인 javascript bootstrap
지루한 오리
2023-02-04T08:02:28.299Z
댓글 1
좋아요 0
조회수 1213
미해결
애플 웹사이트 인터랙션 클론!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } .sample-video { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <body> <div class="container"> <!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video> --> <video class="sample-video" src="../video/sample-high.mp4" muted></video> </div> <script> const videoElem = document.querySelector('.sample-video'); let videoDuration; videoElem.addEventListener('loadeddata', function() { console.log('비디오 로드 완료'); videoDuration = videoElem.duration; init(); }) let progress; let currentFrame; function init() { window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function() { videoElem.currentTime = videoElem.duration * progress; }) }); } </script> </body> </html> 복붙해서 사용하세요.
html/css HTML/CSS svg 웹-디자인 인터랙티브-웹 웹 디자인 인터랙티브-웹 클론코딩 javascript 클론코딩
mill
2023-01-30T00:52:30.300Z
댓글 0
좋아요 0
조회수 677
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프레젠트 버튼을 누르면 한 화면씩 나오는게 아니라 작업 대지까지 전체 화면이 나와버리네요.. 제가 어떤 실수를 하고 있는 걸까요? ㅜㅜ
웹-디자인 figma 모바일-디자인 웹 디자인 모바일-디자인
김규리
2023-01-29T08:52:42.899Z
댓글 2
좋아요 1
조회수 1673
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요-! 선생님께서 pageYOffset 을 사용하셨는데, 그 이유가 IE에서도 호환되기하기 위함이 맞을까요? IE를 고려하지 않는다면 scrollY 를 사용하는게 맞는지 궁금합니다.
html/css svg 웹-디자인 인터랙티브-웹 HTML/CSS 웹 디자인 인터랙티브-웹 클론코딩 javascript 클론코딩
wannabeing
2023-01-25T05:05:45.749Z
댓글 1
좋아요 0
조회수 769
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
잘 실행되는데요. 이렇게 작성해도 될까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>최종본 - D3</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header logo"></a> </div> <div class="navi"> <!-- Navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUBMENU-1-1</a> <a href="#none">SUBMENU-1-2</a> <a href="#none">SUBMENU-1-3</a> <a href="#none">SUBMENU-1-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUBMENU-2-1</a> <a href="#none">SUBMENU-2-2</a> <a href="#none">SUBMENU-2-3</a> <a href="#none">SUBMENU-2-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUBMENU-3-1</a> <a href="#none">SUBMENU-3-2</a> <a href="#none">SUBMENU-3-3</a> <a href="#none">SUBMENU-3-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUBMENU-4-1</a> <a href="#none">SUBMENU-4-2</a> <a href="#none">SUBMENU-4-3</a> <a href="#none">SUBMENU-4-4</a> </div> </li> <div class="sub-back"></div> </ul> <!-- Navigation --> </div> <div class="spot-menu"> <a href="#none">로그인</a> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none1"><img src="images/slide-d-01.jpg" alt="slide1"></a> <a href="#none2"><img src="images/slide-d-02.jpg" alt="slide2"></a> <a href="#none3"><img src="images/slide-d-03.jpg" alt="slide3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banner-01.png" alt="banner1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/shortcut-01.png" alt="shortcut thumnail"> <div class="shortcut-content"> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 한일외국어학원이 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> <b>기간: 2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut icon"></a> </div> <div class="news-gallery"> <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">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인 <b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법 <b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우 <b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"> <img src="images/gallery-01.png" alt="gallery1"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-02.png" alt="gallery2"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-03.png" alt="gallery3"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-04.png" alt="gallery4"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-05.png" alt="gallery5"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-06.png" alt="gallery6"> <span>Gallery title Text</span> </a> <a href="#none"> <img src="images/gallery-07.png" alt="gallery7"> <span>Gallery title Text</span> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">기업소개</a> <a href="#none">제휴 및 입점 문의</a> <a href="#none">이용약관</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <!-- Modal --> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br><br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <!-- Modal --> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div {} .left { width: 200px; } .right { flex: 1; } /* Header */ header {} header > div {} .header-logo { height: 100px; padding-top: 10px; box-sizing: border-box; } .navi { height: 150px; } /* Navigation */ .menu{ width: 90%; margin: 0 auto; margin-top: 10px; padding: 0; position: relative; } .menu li{ text-align: center; box-sizing: border-box; position: relative; } .menu li> a{ display: block; border: 1px solid black; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.5); color: #fff; } .sub-menu{ width: 1000px; height: 35px; position: absolute; top:0; left: 100%; display: none; z-index: 100; } .sub-menu a{ float: left; width: 150px; color: #fff; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } .sub-back{ width: calc(100vw - 190px); height: 135px; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 100%; top: 0; z-index: 90 ; display: none; } /* spot-menu */ .spot-menu { text-align: center; } .spot-menu a:after { content: '|'; margin-left: 5px; } .spot-menu a:last-child:after { display: none; } .spot-menu a:hover { text-decoration: underline; } /* Slide */ .slide { height: 400px; position: relative; } .slide > div {} .slide-image { height: 400px; } .slide-image-inner { height: inherit; } .slide-image-inner a { /* 실제로 움직이는 요소 */ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; height: inherit; width: 100%; } .slide-image-inner a:nth-child(1) { animation-delay: 0s; } .slide-image-inner a:nth-child(2) { animation-delay: 3.5s; } .slide-image-inner a:nth-child(3) { animation-delay: 7s; } .slide-image-inner a img { width: inherit; height: inherit; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { visibility: visible; /* 0% 구간에 visibility: hidden 상태를 보이는 상태로 전환 */ opacity: 1; } 35% { opacity: 1; } 40% { visibility: hidden; /* 보이는 구간이 끝났으니까 투명도 0과 함께 실제로도 보이지 않는 상태로 전환 */ opacity: 0; } 100% { opacity: 0; } } .slide-banner { position: absolute; top: 0; right: 0; } .slide-banner img { width: 150px; display: block; } /* Shortcut */ .shortcut { height: 200px; display: flex; align-items: center; margin: 0 15px; gap: 25px; } /* News & Gallery */ .items {} .items > div {} /* News & Gallery */ .news-gallery { /* border: 1px solid green; */ height: 250px; } .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; } .btn a.active { background-color: #fff; } .tabs {} .tab1 { border: 1px solid #000; padding: 0 15px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px dashed #bbb; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { display: none; border: 1px solid #000; height: 170px; text-align: center; padding-top: 20px; box-sizing: border-box; } /* ▼ D유형과 E유형 공개도면에 따라 약간의 수정 */ .tab2 a { display: inline-block; text-align: center; margin: 0 15px; } .tab2 a img { height: 120px; border-radius: 5px; } .tab2 a span { display: block; } /* Footer */ footer { display: flex; } footer > div { height: 120px; } .footer-logo { width: 200px; padding-top: 20px; box-sizing: border-box; /* display: flex; align-items: center; */ } .footer-content { flex: 1; } .footer-content div { height: 60px; box-sizing: border-box; /* display: flex; align-items: center; */ } .footer-link { padding-top: 30px; } .copyright { padding-top: 10px; } .footer-link a { color: royalblue; } .footer-link a:after { content: '|'; color: #ccc; margin: 0 5px; } .footer-link a:last-child:after { display: none; } .footer-link a:hover { text-decoration: underline; } /* Modal */ .modal { background-color: rgba(0, 0, 0, 0.19); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { width: 450px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* 이건 하면 좋고 안해도 괜찮습니다. */ .modal-content h2 { text-align: center; background-color: yellowgreen; color: #fff; padding: 7px; } .modal-content ol { padding-left: 18px; font-size: 14px; font-weight: 500; } /* Navigation */ // $('.menu li').mouseenter(function(){ // $('.sub-menu, .sub-back').stop().slideDown() // }) // $('.menu').mouseleave(function(){ // $('.sub-menu, .sub-back').stop().slideUp() // }) $('.menu li').mouseenter(function(){ $('.sub-menu, .sub-back').stop().fadeIn() }) $('.menu').mouseleave(function(){ $('.sub-menu, .sub-back').stop().fadeOut() }) /* Tab Menu */ $('.btn a:first-child').click(function () { $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function () { $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) /* Modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
html/css HTML/CSS 웹-디자인 웹 디자인 jquery
dancoffee
2023-01-23T10:59:26.771Z
댓글 1
좋아요 1
조회수 427
