묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
네비게이션 이 사진처럼 덜올라왓는데 커뮤니티쪽에만저런데 뭐가문제일까요 ㅠㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b실전</title> <link rel="stylesheet" href="css/b.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="headerlogo"></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> </div> </li> <li> <a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">공지사항</a> <a href="#none">참여게시판</a> <a href="#none">자료실</a> </div> </li> </ul> <div class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a 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> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery03.jpg" alt="gallery3"></a> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-1.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> </div> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a{ color: #222328; text-decoration: none; } .container{} .header-inner{ border: 1px solid blue; } header{ display: flex; width: 1200px; margin: auto; justify-content: space-between; position: relative; z-index: 10; } header > div{ height: 100px; } .header-logo{ width: 200px; line-height: 130px; } .navi{ width: 600px; } .content-inner{} .slide{ width: 1200px; margin: auto; } .slide > div{ height: 300px; } .items{ display: flex; width: 1200px; margin: auto; margin-top: 20px; box-sizing: border-box; } .items > div{ height: 200px; } .news{ width: 425px; } .gallery{ width: 425px; } .banner{ width: 350px; } .footer-inner{ border: 1px solid blue; } footer{ display: flex; width: 1200px; margin: auto; } footer > div{ height: 100px; border: 1px solid #000; } .copyright{ width: 1000px; } .copyright div{ height: 50px; border: 1px solid #000; } .family-site{ width: 200px; } /*slide*/ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide >div{ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{ left: 0; } 30%{ left: 0; } 35%{ left: -1200px; } 65%{ left: -1200px; } 70%{ left: -2400px; } 95%{ left: -2400px; } 100%{ left: 0; } } /*new & gallery*/ .tab-inner, .gallery-inner{ width: 97%; margin: auto; } .btn{} .btn span{ display: inline-block; width: 120px; border: 1px solid #000; text-align: center; padding: 5px; border-radius: 7px 7px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px; } .tab1,.tab2{ border: 1px solid #000; padding: 0 4px; height: 155px; } .tab1 a{ display: block; border-bottom: 1px solid #000; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ text-align: center; } .tab2 img{ width: 120px; padding-top: 18px; } .banner img{ width: 95%; } /*navigation*/ .menu{ list-style: none; padding: 0; padding-top: 53px; } .menu li{ display: block; width: 25%; float: left; box-sizing: border-box; } .menu li > a{ border: 1px solid #000; display: block; text-align: center; padding: 5px; transition: 1; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; text-align: center; color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color: #222328; } .sub-back{ position: absolute; left: 0; top: 100%; width: 1200px; height: 140px; background-color: #000; z-index: -1; }
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리 작성 후 메뉴가 내려 오지 않습니다.
A1 [최종본 제작] 가로 고정형(A1타입) – Part1에서style.css에.sub-menu{display: none; 후custom.js에$('.menu li').mouseenter(function(){$('.sub-menu').stop().slideDown()}) 하였는데 메뉴가 내려오지 않습니다.index.htmlstyle.csscustom.js파일 첨부가 되지 않아 화면 캡처해서 올립니다. 무엇이 잘 못 되었습니까?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
유효성검사에서오류가난거같은데 어떻케 수정을해야하나요 ,,,링크로첨부했습니다 ..
텍스트 입력 영역의 내용에 대한 결과 표시 - Nu Html Checker (w3.org)
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
<!DOCTYPE html> 없어도 상관없나요?ㅠㅠ
e유형 중인데html 제일 윗부분<!DOCTYPE html>이걸 넣으면 slide 사진이 사라지고 footer가 올라오고저것만 없애면 완벽하게 잘 작동하는데없애도 상관없나요? 시험때도 상관없을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D3 visibility: hidden; 이걸 없애면 슬라이드가 보이는 문제!...
다른건 아니오라 작업하다가 원래 fade in / fade out 슬라이드 형식대로 써봤는데..visibility: hidden; 을 주석처리 하는순간 슬라이드가 작동되는 현상은 처음이라 적어봅니다!...제가 뭘 잘못건드렸는지 확인 한번만 부탁드려요!<!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"> <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"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> </ul> </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-img"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-d-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-d-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-d-03.jpg" alt="slide 3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banner-01.png" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner 2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner 3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/shortcut-01.png" alt="shortcut 1"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <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 2"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none"><span>공지사항</span></a> <a href="#none"><span>갤러리</span></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="gallery 1"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery 2"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery 3"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery 4"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery 5"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery 6"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery 7"><span>퍼블리셔 취업</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> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 br사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br><br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br><br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. <br><br>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a href="#none"><div class="close-modal">닫기</div></a> </div> </div> <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: #333333; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid red; */ } .left { width: 200px; } header {} header > div { /* border: 1px solid blue; */ } .header-logo { height: 150px; line-height: 170px; } .navi { /* height: 400px; */ } .menu { list-style: none; width: 90%; margin: 20px auto; padding: 0; } .menu li { position: relative; } .menu li > a { padding: 7px; border: 1px solid black; display: block; transition: 0.5s; } .menu li:hover > a { background-color: #00000021; } .sub-menu { position: absolute; left: 100%; top: 0; width: calc(100vw - 209px); padding: 8px; background-color: #00000021; z-index: 10; display: none; } .sub-menu > a { width: 120px; display: inline-block; transition: 0.5s; text-align: center; } .sub-menu > a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:after { content: "|"; margin: 8px; } .spot-menu a:last-child:after { content: none; } .right { flex: 1; } .slide { position: relative; height: 400px; } .slide > div { /* border: 1px solid green; */ } .slide-img { height: 400px; } .slide-image-inner { height: inherit; } .slide-image-inner a { visibility: hidden; position: absolute; height: inherit; top: 0; left: 0; width: 100%; animation: slide 10s linear infinite; opacity: 0; } .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 { height: inherit; width: inherit; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } .slide-banner { top: 0; right: 0; position: absolute; width: 150px; height: 300px; float: right; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } .items {} .items > div { /* border: 1px solid pink; */ } .shortcut { /* border: 1px solid black; */ height: 200px; display: flex; align-items: center; gap: 25px; margin: 0 20px; } .shortcut > img {} .shortcut > a {} .shortcut h2 {} .shortcut p {} .shortcut p b {} .news { height: 250px; } .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { width: 100px; text-align: center; display: inline-block; border: 1px solid black; margin-right: -6px; border-bottom: none; border-radius: 5px 5px 0 0; background-color: #ddd; margin-bottom: -1px; padding: 4px; } .tabs {} .tabs > div {} .tab1 { background-color: #fff; border: 1px solid black; padding: 6px; } .tab1 a { border-bottom: 1px dashed black; padding: 6px; display: block; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { padding-right: 100px; float: right; font-weight: normal; } .tab2 { display: none; border: 1px solid black; padding: 20px; height: 140px; text-align: center; /* box-sizing: border-box; */ } .tab2 a { display: inline-block; text-align: center; margin: 0 15px; } .tab2 img { width: 200px; } .tab2 a span { display: block; } .btn a.active { background-color: #fff; } footer { display: flex; } footer > div { /* border: 1px solid blue; */ height: 120px; } .footer-logo { width: 200px; line-height: 180px; } .footer-content { flex: 1; } .footer-content > div { /* border: 1px solid green; */ height: 60px; /* box-sizing: border-box; */ /* padding: 0 20px; */ } .footer-link { padding-top: 30px; box-sizing: border-box; } .footer-link > a:hover { text-decoration: underline; color: blue; } .footer-link a::after { content: "|"; margin: 0 8px; color: #ccc; } .footer-link a:last-child:after { content: none; } .copyright { /* padding-top: -100px; */ } .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000003b; display: none; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 20px; width: 500px; } .close-modal { float: right; border: 1px solid black; padding: 2px; } $('.menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }); $('.menu li').mouseleave(function(){ $('.sub-menu').stop().fadeOut() }); $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.btn a:last-child').click(function(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
실전사이트 따라하고있는데 copyright부분 css에서 padding주면 사진첨부한거처럼 전체로 내려가는데 뭐가 문제일까요 ,,,??
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a실전연습</title> <link rel="stylesheet" href="css/실전a.css"> </head> <div class="container"> <header> <div class="heder-logo"> <a href="none"><img src="images/header-logo.PNG" alt="header logo"></a> </div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"> <img src="images/banner-1.jpg" alt="banner1"> </a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-2.jpg" alt="banner2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/SNS.png" alt=""></a> </div> </footer> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; } .container{ width: 1200px; border: 1px solid #000; margin: auto; } header{ display: flex; justify-content: space-between; } header > div{ height: 100px; border: 1px solid #000; } .heder-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide > div{ height: 300px; border: 1px solid #000; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ height: 100px; border: 1px solid #000; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*Image & Text */ .heder-logo,.footer-logo{ line-height: 130px; } .copyright{ text-align: center; margin-top: 30px; line-height: 20px; }
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리슬라이드제작
css로 슬라이드제작은 그래도 따라갈만한데 제이쿼리는 도통어렵네요,,, d형e형도 css로 슬라이드작업을하면 안되는걸까요 ?? d형e형 레이아웃강의도못들었는데 갑자기 d형으로 넘어가서 당황했어요 ,,, 어떤거부터 들어야하는게 좋을까요 ,,,? 그리고 시험장에가서도 css로 슬라이더 작업하면 안되는걸까요 ??
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
html과 css 구문 모두 똑같은데 sub-menu가 슬라이드 뒤에 숨어요ㅠ
해당 부분 html-<header> <article class="header-logo">로고</article> <article class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> </ul> </article> </header>해당 부분 css-.menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; color: #000; transition: 0.3s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; /* display: none; */ } .sub > a { display: block; color: #fff; padding: 5px; transition: 0.3s; } .sub a:hover { background-color: #000; color: #fff; }인터넷 찾아보고 z-index도 넣어봤는데 소용이 없습니다ㅠㅠ
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
안 좋은 UX 사례 과제 제출합니다.
배경: 국가에서 운영하는 HRD-Net 사이트 (직업기술을 배울 수 있는 목록 및 정보를 제공하는 곳 - 접속 URL: https://www.hrd.go.kr/hrdp/ti/ptiao/PTIAO0300L.do?pageId=2&bgrlInstYn=undefined&kDgtlYn=undefined&_csrf=b7996afd-d091-4265-9b99-c9720b70652d ) 를 낮은 의도를 가진 사용자의 입장에서 탐색하여 보았습니다. (예를 들면 OO분야에서 흥미가 있을만한 직업 훈련이 어떤 것이 있을까?로 접근해봤습니다.) 지역 및 대분류만 설정해 검색해보았는데요. 전체적으로 어떤 교육이 제공되는지 보고 싶었는데, 목록이 예상보다 많아 탐색하기가 어려웠던 경험이 있었습니다. 나쁜 점 1: NCS 직종 및 훈련유형이라는 낯선 단어NCS 직종은 국가에서 선정한 직업종류를, 훈련 유형은 기업에서 주도하는 것인지 혹은 일반인이 들을 수 있는 등의 훈련 유형을 의미하는 것 같다고 추측했습니다. 사실 직업교육을 처음 들으려는 사용자 입장에서는 두 단어가 상당히 낯설었습니다. 훈련 유형에는 알아볼 수 없는 유형도 많아서 어떤 걸 보아야 하는거지? 무엇은 들을 수 있고 안되는거지? 잘 모르겠었어요. 내부적으로 정보 설계는 잘 되어 있겠지만 이것이 사용자에게는 도달하지 못한 것 같습니다. (기준에 따라 사용자가 행동을 결정할테니, 행동 유도와도 비슷한 맥락이라고 생각이 들었습니다.) 이를 꼭 다 보여주어야 하는건가? 사용자별로 유형을 다르게 보여줄 수는 없나 생각이 들었습니다. 굳이 다 보여주어야 한다면 작게 툴팁을 두어 설명을 붙여놓았으면 더 좋았을 것 같습니다.나쁜 점 2: 직종 선택시의 불편함 대분류, 중분류, 소분류로 나누어져 있어 직업군에 대한 명확한 기준이 있구나 싶었습니다. 하지만 높은 의도를 가지거나, 낮은 의도를 가진 사용자 입장에서 팝업 상태에서 (이미 한 뎁스 들어가서) 일일히 소분류까지 필터로 설정하는 사용자가 있을까 의문이 들었어요. 해당 팝업에서 대분류에 비해 중, 소분류에 대한 클릭수가 낮다면 대분류의 내용을 아이콘으로 설정해 상위로 (퍼스트 뎁스로) 두는 방향도 괜찮을 것 같다는 생각이 들었습니다.나쁜 점 3: default 개강일자가 1년으로 설정된 것1개월, 3개월, 1년단위로 볼 수 있는데 1년이 기본 설정되어 있습니다. 내부적으로 이유는 있었겠지만, 기간에 따라 검색 목록의 양이 더 늘어나지 않았나 싶습니다. 3개월만 해도 충분하지 않을까 싶습니다.나쁜 점 4: 결과 목록에 대한 정보 설계결과 목록을 보면 매우 많은 정보를 볼 수 있습니다. (훈련기관, 훈련명, 훈련기간, 시간, 취업률, 가격 등등)각 훈련에 높은 의도를 가진 사용자는 세부 내용을 클릭해서 볼테니, 정말 필요한 정보만 뽑은 후 재배치하면 어떨까 싶었습니다. 또한 훈련 기간이 크게 강조되어 있는 것 보다, 훈련명이 더 중요한 정보가 아닐까 생각이 들었습니다. 정보제공에 대한 우선순위도 다시 세워야 할 필요가 있어보였어요.논외로검색시 게시판 목록의 숫자가 몇백 ~ 몇십개 정도 나오는 것을 보았는데요. 해당 류의 정보 제공 서비스 같은 경우, 사용자가 원하는 정보를 찾을 때 까지 목록을 알맞게 잘 탐색할 수 있게 필터링하는 것이 핵심 UX 설계인 것 같다는 생각이 들었습니다. 느낀점: 해당 과제는 제 나름의 기준을 잡아 문제점 제기하였고, 대안 의견까지 녹이긴 했지만 실무에서 정말 하라면(?) 까마득하다고 생각이 들었습니다. 문제점을 위한 근거를 찾는 것부터 가설(대안)에 대한 근거를 찾고 설득하는 것도 같이 생각해보려 했는데, 머리가 아파오더라구요 @@ 많은 공부와 연습이 필요하구나 생각이 들었습니다.질문: 해당 과제를 하면서 사용자의 정보 탐색 프로세스 관련하여 흥미가 생겼는데 혹시 관련해서 볼만한 논문이나 아티클이 있을까요? 혹은 해당 분야 외로도, 선생님이 평소에 보시는 UX관련 아티클 혹은 논문 사이트가 있으신지 궁금합니다!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
body 구문 형식 어떻게 작성해야 합니까?
[2. 레이어 팝업 제작 HTML+CSS 구조 만들기, 레이어 팝업 제이쿼리] 과정에서 body 구분 형식과 다른 강의 가로 고정형 레이아웃 HTML+CSS 구조만들기 등에서의 body 구문 형식이 조금 다른데 body 구문 어떤 식으로 작성해야 합니까?
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
참고자료
안녕하세요,pdf 192페이지 내용 "수강생 참고자료에서 다운받을 수 있습니다." 라고 나와있는데자료 압축 풀면 animation 폴더 빼고 나머지는 빈폴더인데, 제가 못찾는 걸까요?확인 부탁드립니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
레퍼런스 참고
dribble에서 캡쳐해서 따라서 제작하려 하는데요제작하려는 프레임 치수로 이미지의 사이즈를 변경해서 디자인 하면 되는건가요?? 이미지 픽셀도 많이깨지고, 레퍼런스 이미지마다 제품 테두리 디자인이 포함되있기도 해서 레퍼런스 참고 사이트들에서 캡처해서 따라하는 방법이 이방법이 맞는지 궁금합니다! 추가로 따라하려는 이미지상에 그리드를 표현하지는 못하는건가요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
뷰포인트 프레임
뷰포인트가핸드폰 캡처본만 필요시 되는거고 그 원리들은 PC모니터, 태블릿에는 적용이 안되는건가요?PC캡쳐본은 직접 해보니 동일한것같은데태블릿 도 뷰포인트 프레임에 디자인하는게 맞나요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
핸드오프 관련해서 궁금한 점이 있습니다.
안녕하세요. 강의를 보던 와중에 헷갈리는 부분이 있어서 질문드립니다.개발자에게 핸드오프 공 유시 특정 스크린만 공유하고 싶을 때는 스크린을 선택하여 링크를 보내면 된다고 하셨는데요.강의로 볼 때는 전체가 다 공유된 것 같은데 특정 스크린만 선택하여 공유하여도 다른 화면도 같이 보이게 되는 걸까요?그럼 특정 스크린과 전체 스크린을 공유할 때 개발자가 보는 화면에서 어떤 차이점이 있는지 궁금합니다.감사합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
하단바 프레임
안녕하세요 질문드립니다.올려주신 ios키트 에서 강의에서 사용하신 하단바는 아니지만다른 하단바를 가져와서 연습중입니다. 하단바를 제작할때 그룹을 짓거나 하지않고하단바의 아이콘과 텍스트를 각각 묶어서 프레임을 지어놓으시더라고요.이유가 무엇인가요?그룹지어서 놓는게 더 편할꺼같은데디자이너분들이 프레임으로 묶어놓는 이유가 있나요? 그리고저 분홍색 부분이 배경 컬러를 넣으신게 아니라하단바 자체를 그리드위에 만들어 놓았던데굳이 그렇게 할 이유가 있는건가요? 어떤상황에는 프레임으로 묶고, 어떤상황에는 그룹으로 묶어서 정리하는지 정확히 잘모르겠습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D3 유형 우측 메가 메뉴 질문
안녕하세요저는 전에 배우던 스타일이 있어서메뉴 만들때.menu를 .gnb로 하고.sub-menu를 div로 대신 ul로 해서 .lnb로 만듭니다.이대로 스타일 적용하고 메가 메뉴 만들 때 혹시 주의 사항이 있는지, 시험 때 이대로 풀어도 되는지 궁금합니다.이대로 적용했을 때는 브라우저에 결과는 잘 나왔었습니다. html css js 저는 와이어프레임 만들 때 border를 사용하지 않고background-color로 사용하였습니다. 혹시 문제가 있는지 여쭈어봅니다. 코드 복사해서 수정합니다. html<div class="navi"> <ul class="gnb"> <li><a href="#">OnSale</a> <ul class="lnb"> <li><a href="#">할인행사</a></li> <li><a href="#">덤증정</a></li> </ul> </li> <li><a href="#">기획전</a> <ul class="lnb"> <li><a href="#">봄 먹거리</a></li> <li><a href="#">여름 먹거리</a></li> <li><a href="#">가을 먹거리</a></li> <li><a href="#">겨울 먹거리</a></li> </ul> </li> <li><a href="#">푸른마을 레시피</a> <ul class="lnb"> <li><a href="#">메인요리</a></li> <li><a href="#">밑반찬</a></li> <li><a href="#">간식</a></li> <li><a href="#">브런치</a></li> </ul> </li> <li><a href="#">매장안내</a> <ul class="lnb"> <li><a href="#">신규매장</a></li> <li><a href="#">추천매장</a></li> <li><a href="#">공지사항</a></li> </ul> </li> </ul> </div>css.navi { width: 90%; margin: 20px auto; background-color: greenyellow; } .gnb {} .gnb>li { text-align: center; position: relative; } .gnb>li>a { display: block; padding: 5px; border: 1px solid black; background-color: #fff; transition: 0.5s; } .gnb>li:hover>a { background-color: gray; } .lnb { display: none; position: absolute; top: 0; left: 100%; width: calc(100vw - 210px); padding: 6px; background-color: rgba(0, 0, 0, 0.5); } .lnb>li { float: left; } .lnb>li>a { display: inline-block; width: 120px; transition: 0.5s; } .lnb>li>a:hover { color: white; background-color: gray; }js$('.gnb>li').mouseenter(function(){ $('.lnb').stop().fadeIn() }); $('.gnb>li').mouseleave(function(){ $('.lnb').stop().fadeOut() });
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
디자인 씽킹이라는 과정이 제품출시를 위한 과정인가요?
공감하기 정의하기 부분의 설명을 보고 조금 혼동되어서 질문을 올립니다.공감하기 정의하기 부분은 Product가 나오고 나서 사용자들의 피드백을 받고 진행하는 부분인가요?아니면 시장조사를 하고 제작자들이 이미 시중에 나와있는 페이지를 봤을때 문제점을 집어서 해당 문제를 보안하는 페이지를 만드는 것을 목표하는 부분인가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
저는 잘 만들었다고 생각했는데 Tab키로 옵젝전환을 시켜보니..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JUST 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="headerlogo 1"></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> </div> </li> <li> <a href="#none">후원하기</a> <div class="sub-menu"> <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> </div> </li> <li> <a href="#none">스토리</a> <div class="sub-menu"> <a href="#none">웹진</a> <a href="#none">보고서</a> <a href="#none">나의 후원</a> </div> </li> </ul> </div> <div class="sub-back"></div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide 3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <span>공지사항</span> <div class="tab1"> <a class="open-modal" href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>휴대폰 인증 서비스 개선 작업 기간 연장</em><b>2020.01.07</b></a> <a href="#none"><em>카드사 부분 무이자 할부 이벤트</em><b>2019.12.31</b></a> <a href="#none"><em>올앳 시스템 작업 안내</em><b>2019.12.20</b></a> <a href="#none"><em>휴대폰 결제 시스템 작업이 완료되었습니다.</em><b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <span>갤러리</span> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery 1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery 2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery 3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner 2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footerlogo 1"></a> </div> <div class="copyright"> <a href="#none">법적고지</a> <a href="#none">개인정보취급방침</a> <a href="#none">개인정보처리방침</a> <p> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </p> </div> <div class="familysite"> <select> <option value="">Familysite</option> <option value="">연습용입니다</option> <option value="">이쪽도 재밌어요</option> <option value="">저쪽은 낭떠러지</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p> 안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다.<br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다.<br> 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <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: #333333; font-size: 15px; } a { text-decoration: none; color: #333333; } .container { margin: auto; /* border: 1px solid red; */ width: 1200px; } header { height: 100px; position: relative; z-index: 10; } header > div { height: 100px; /* border: 1px solid green; */ } .header-logo { width: 200px; float: left; } .header-logo > a { line-height: 130px; } .navi { width: 600px; float: right; } .menu { padding: 0; width: 600px; } .menu li { text-align: center; list-style: none; float: left; width: 25%; padding-top: 55px; } .menu li > a{ border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { position: relative; display: none; } .sub-menu > a{ display: block; padding: 8px; transition: 0.5s; color: #fff; } .sub-menu > a:hover { background-color: #fff; color: #333333; } .sub-back { display: none; width: 100%; height: 150px; top: 100%; left: 0; background-color: #000; position: absolute; z-index: -1; } .slide { height: 300px; width: 1200px; position: relative; overflow: hidden; } .slide > div { position: absolute; width: 3600px; /* border: 1px solid black; */ left: 0; top: 0; height: 300px; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } .items { overflow: hidden; margin-top: 10px; } .items > div { /* border: 1px solid blue; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .tab-inner { width: 95%; margin: auto; } .tab-inner span { border: 1px solid black; border-radius: 5px 5px 0 0; display: inline-block; width: 80px; padding: 8px; text-align: center; background-color: #fff; border-bottom: 0; } .tab1 { border: 1px solid black; padding: 0 4px; height: 150px; background-color: #fff; margin-top: -2px; } .tab1 em { width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; position: relative; } .tab1 b { float: right; } .tab1 a { display: block; border-bottom: 1px solid black; padding: 2.5px; } .tab1 a:last-child { border-bottom: 0px; } .tab1 a b{ font-weight: normal; } .tab2 { background-color: #fff; margin-top: -2px; border: 1px solid black; text-align: center; padding-top: 20px; height: 130px; } .tab2 img { width: 120px; } .banner { width: 350px; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-logo > a { line-height: 130px; } .copyright { width: 800px; text-align: center; padding-top: 10px; overflow: hidden; } .copyright > a { box-sizing: border-box; } .copyright > p { padding-bottom: 10px; } .familysite { width: 200px; text-align: center; padding-top: 35px; } .modal { position: absolute; background-color: #00000049; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { position: absolute; transform: translate(-50%,-50%); width: 350px; background-color: #fff; top: 50%; left: 50%; padding: 20px; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.356); } .modal-content span { } .close-modal { float: right; border: 1px solid black; padding: 5px; } $('.menu li').mouseenter(function(){ $('.sub-menu,.sub-back').stop().slideDown() }); $('.menu li').mouseleave(function(){ $('.sub-menu,.sub-back').stop().slideUp() }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });이게 이렇게해서 Html, css ,jQuery 3개 잘 만들어 보았으나, 직접 웹 페이지에서 탭키로 누르려고하면 아이템 부분의 공지사항이랑 갤러리가 없어져버립니다.. 왜 이렇게 되는걸까요!..
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프레임 질문 입니다.
프레임상에 그리드를 두고 디자인을하면반응형 웹디자인으로서핀터레스트 웹사이트 예시 처럼 웹사이트의 크기를 줄여나가면 컨텐츠들이그 웹사이트 조정한 크기에 맞게 변하는것 처럼.그리드 상에 디자인을 하면 화면 픽셀 단위 에 맞게 컨텐츠들이 조정된다고 이해를 하였습니다.모바일 반응형 디자인을 한다고 가정했을때모바일용 프레임 비율 한가지에다가 그리드 위에 디자인을 하면모바일 모든 디바이스에 디자인이 각 디바이스 해상도에 맞게 조정 되는것으로 이해를 했습니다.그렇다면피그마 상에서 위 사진처럼 모바일 디바이스별 프레임을 분류를 해놓는데제가 사진 위에 설명처럼 이해를 한다면,아이폰8 디바이스 프레임을 선택해서 그리드위에 디자인을 한다고 가정했을때그 디자인한 앱을아이폰11, 또는 아이폰12 등등 을 사용해도똑같은 디자인으로 결과값이 도출되는지가 궁금합니다.또한 아이폰 8 디바이스 프레임을 선택해서 그리드 위에 디자인한 앱과아이폰 11 디바이스 프레임을 선택해서 그리드 위에 디자인한 앱과똑같은 결과값이 나오는건가요?즉 그리드 를 사용해서 디자인을 한다면모바일 프레임이라면 어떤 프레임을 사용해도 상관이 없는건가요?또한그리드상 위에 디자인을하면 반응형으로서 각 디바이스 해상도에 맞게 조정이 되는것이라면왜 모바일용 해상도 프레임 or PC용 해상도 프레임 이런식으로 통일하지않고위 사진처럼 각 디바이스별로 프레임 해상도를 분류해놓는것인가요?모바일 프레임이라면 어떤 프레임을 선택해도 모든 모바일 디바이스상에 결과값이 동일한가요?질문이 많아서 불편드려 죄송합니다!위의 모든 질문은 디자인을 할시에어떤 프레임 상에 디자인을 해야되는지 궁금증에서 나왔으며어떤 프레임상에 디자인을 해도 결과값이 모두 동일한지 궁금증이 해결되지않습니다!저 많은 디바이스별 프레임중에 어떤 프레임에다가 디자인을 해야되는건가요?PC용 디자인을 하더라도 디자이너 분마다 디자인을 하게되는 프레임의 해상도 비율값이전부 다르시고 추천하시는 프레임 해상도 비율값도 전부 다르신데이 프레임의 해상도 비율값이 달라도 그리드 상에 디자인을 하면모두 동일한 디자인값이 나오는지가 궁금합니다!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
웹 또는 앱 디자인 따라할때 질문.
실제 웹 따라할때 실제 픽셀 과 오브젝트 사이의 픽셀크기들 , 글꼴의 크기 어떻게 아는건가요??따라하려는 사이트 화면 확대축소 비율 100%로 캡처한후에피그마로 사진 가져온후 피그마 상의 확대비율 100%로 맞추면동일한 픽셀인것인가요? 추가로 만약 따라해서 제작한후에 피그마상에서 실제 사이트처럼 구현되는것을 확인할수있는 방법이 있을까요?
