묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프로토타입 프레젠트 부분에서 문제가 있습니다.
프레젠트 버튼을 누르면 한 화면씩 나오는게 아니라 작업 대지까지 전체 화면이 나와버리네요..제가 어떤 실수를 하고 있는 걸까요? ㅜㅜ
-
미해결애플 웹사이트 인터랙션 클론!
pageYOffset || scrollY
안녕하세요-!선생님께서 pageYOffset을 사용하셨는데, 그 이유가 IE에서도 호환되기하기 위함이 맞을까요?IE를 고려하지 않는다면 scrollY를 사용하는게 맞는지 궁금합니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
.sub-menu를 ABC형의 위치에 놓고 CSS를 작성했습니다.
잘 실행되는데요.이렇게 작성해도 될까요?<!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()})
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
질문있습니다
제가 선생님께서 만드신 웹사이트에서 테마를 변경 후제 개인포트폴리오 웹사이트에 응용해보려고 하는데요현재강의에서 선생님께서 만드신 웹사이트랑 유사하거나 응용해볼만한 사이트가 있을까요?
