묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달창이 안되는데 뭐가문제인걸까요 ,,,??
<!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"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none"class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-madal" href="#none">핸드폰수리일정안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 택배일정 안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 현금영수증안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 주문시안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 환불및교환 안내입니다.<b>2022.07.24</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <!--modal--> <div class="modal"> <div class="modal-content"> <h2>sns비회원주문하기 종료 안내</h2> <p>안녕하세요 just쇼핑몰 md 홍길동입니다.안타깝게도 비회원주문하기서비스가 한달뒤 종료될 예정입니다 회원가입없이 sns계정을 이용해 그동안 제품주문을 하실수있엇는데 금번 강화된 개인정보보호법 시행령 제 9조 의거, sns를 이용한상품주문/ 결제등이 근래에 많은 부안잇슈로 문제가 되고 있음에 따라 kisa의 권교조치의 일환으로 했습니다 따라서 한달뒤인 2022.05.07일 이후 모든 비회원 고객님들께서는 회원가입으로 전환후 실명인증 하여야하며 모든쇼핑몰 오픈마켓등의 전자상거래서비스의 공통된 사항이라는점 안내해드립니다. </p> <a class=close-modal href="#none">x 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } 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: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*tab-inner*/ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ display: inline-block; border: 1px solid #000; width: 120px; text-align: center; border-radius: 5px 5px 0 0; padding: 5px; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; cursor: pointer; } .btn a.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1{ } .tab1 a{ display: block; color: #000; text-decoration: none; border-bottom: 1px solid #333; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; text-align: center; } .tab2 img{ width: 120px; margin-top: 20px; } /*modal*/ .modal{ background-color:rgba(0, 0, 0, 0.9)); position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; } .modal-content{ background-color: #fff; width: 350px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 10px; } .modal-content h2{ background-color: #000; color: #fff; padding: 5px; text-align: center; } .modal-content p{ line-height: 1.5em; } .close-modal{ border: 1px solid#000; padding: 3px 7px; float: right; } /*modal*/ $('.open-modal').click(function(){ $('.modal').show() $('.close-modal').click(function(){ $('.modal').hide() }) })모달창이 안떠서요 ,,,뭐때매안뜨는지 아무리 봐도 모르겠서요..,.,.ㅜㅜㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
추가영상에서 span을 a태그로변경하라하셔서 했는데 이렇케 뜨는게 맞을까요?
<!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"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none"class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none">핸드폰수리일정안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 택배일정 안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 현금영수증안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 주문시안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 환불및교환 안내입니다.<b>2022.07.24</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } 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: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*tab-inner*/ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ display: inline-block; border: 1px solid #000; width: 120px; text-align: center; border-radius: 5px 5px 0 0; padding: 5px; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; cursor: pointer; } .btn a.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1{ } .tab1 a{ display: block; color: #000; text-decoration: none; border-bottom: 1px solid #333; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; text-align: center; } .tab2 img{ width: 120px; margin-top: 20px; } /*tab content*/ $('.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') })추가영상에서 span을 a태그로변경하라하셔서 했는데 브라우저에 공지사항 갤러리 밑에 밑줄이 표시되는데 이렇케 뜨는게 맞을까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
js작동이 안되는데 머가문제일까요 ㅠㅠ
<!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"></div> <div class="navi"></div> </header> <div class="slide"> <div></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">tab1</div> <div class="tab2">tab2</div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } 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: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /* tab-content */ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn span{ border: 1px solid #000; display: inline-block; padding: 10px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ddd; width: 100px; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 150px; } .tab1{} .tab2{ display: none; }/*tab content*/ $('.btn span:frist-child').click(function(){ $('.tab1').show() $('.tab2').hide() }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() })js가작동이안되는거같아요 ,,, 일단 따라하고있는데 script 소스가 문제인걸까요 ??
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
텝메뉴 색상이 변경이 이상합니당 ㅠㅠ
처음 화면에는 이렇게 잘 뜨는데,갤러리를 누르면 두개 다 흰색으로변경되고 이후에 쭉두 메뉴 모두 흰색텝으로만 뜨는데 왜이러는걸가용?ㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="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">탑</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="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide-01"> </a> <a href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide-03"></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="tab"> <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">카드사 부분 무이자 할부 이벤트 <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-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"> </a> </div> <div class="copy"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <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> <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: #333333; margin: 0; font-size: 15px; } a { color: #333333; text-decoration: none; } /* 기본구도잡기 */ .container { /* border: solid 1px red; */ width: 1200px; margin: auto; } header { height: 100px; } header > div { /* border: 1px solid blue; */ height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide {} .slide > div { /* border: 1px solid green; */ height: 300px; } .items { overflow: hidden; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { /* border: 1px solid purple; */ height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copy { width: 800px; } .sns { width: 200px; } /* 이미지와 텍스트 */ header { position: relative; z-index: 10; } .header-logo { line-height: 130px; } .slide { margin-bottom: 20px; } .footer-logo { line-height: 130px; } .copy { text-align: center; padding-top: 30px; } .sns { padding-top: 20px; text-align: center; } /* 슬라이드 */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; font-size: 0; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; } } /* 네비게이션 */ .menu { list-style: none; padding: 0; padding-top: 20px; /* border: 1px solid red; */ } .menu li { /* border: 1px solid #000; */ float: left; width: 25%; box-sizing: border-box; text-align: center; } .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 { background-color: #fff; border: 1px solid black; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; color: #fff; } /* 뉴스와 갤러리 텝메뉴 */ .tab-inner { width: 95%; margin: auto; } .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; } .tab {} .tab1 { border: 1px solid #000; padding: 0 10px; /* display: none; */ } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; height: 169px; text-align: center; padding-top: 20px; box-sizing: border-box; display: none; } .tab2 img { width: 130px; } // 네비게이션 $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) // $('.menu li').mouseenter(function(){ // $(this).children('.sub-menu').stop().slideDown() // }) // $('.menu li').mouseleave(function(){ // $(this).children('.sub-menu').stop().slideUp() // }) // 텝메뉴 $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') })
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님처럼 했는데 창이이상하게 그림이 계속 떨어지네요 ,,,
/*tab-inner*/ .tab-inner, .gallery-inner{ width: 95%; margin: auto; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span{ border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .gallery-inner .tab{ border: 1px solid #000; padding: 0 10px; height: 155px; } .tab-inner .tab a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #333; padding: 4px; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } .gallery .tab img{ width: 100px; } .gallery .tab{ text-align: center; padding-top: 30px; box-sizing: border-box; }소스는 똑같이한거같은데 사진이 문제인가 저렇케 내려와서요 뭐가 문제일까요 /...???
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리가 작동하지 않는데 이유를 모르겠어요ㅠㅠ
제이쿼리가 작동하지 않는데 이유를 못찾겠습니다 ㅠㅠㅠㅠ... 밑에 누르면 이런게 뜨는데 이거랑 연관이 있는걸까요?
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX/UI 와 나쁜 UX/UI - 세줄일기/개인작업어플
관점 측면 : 행동유도성, 대응의 원리좋은 UX/UI세줄일기 : 사용자가 어디에 사진을 넣어야하는지, 어디에 어떤 내용을 적어야하는지 정확하게 알려줌 나쁜 UX/UI개인작업 어플 : 깔끔한 디자인에만 치우쳐 사용자가 어디를 어떻게 조작해야하는지 편의성이 떨어짐.(실제로 테스트 결과 불폄함을 호소하는 사용자들 있었음)+화면은 추후에 피드백을 받고 글씨를 넣은 모습입니다
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX/UI 사례 분석 과제 - 유튜브
주제: 유튜브 - 재생 목록 내 영상 시청 화면의 UX/UI 분석분석 배경: 재생 목록 요소가 같이 보이게끔 유튜브 영상을 시청한 적이 있습니다. 소소하지만 현 상태를 나타내는 UI 아이콘이 눈에 띄었고, (우측 재생 목록 요소 내, 재생 중 애니메이션과 좋아요 버튼이 표시됨) 사용자를 위한 세심한 배려로써 느껴져 좋은 경험을 받았던 것 같습니다. 또한 수업에서 배운 원리들도 몇 가지 보여 분석하면 좋겠다고 생각했습니다.좋은 UX/UI 사례1. 일관적인 재생 목록: 재생 목록 내 UI 요소들이 동일하게 디자인 되어 있습니다. 사용자는 재생 목록을 스크롤하여 올리거나 내리면서 이전/이후 목록 확인이 가능한 것을 쉽게 예측할 수 있습니다. 2. 재생 영상과 재생 목록 별 유사성의 원리:왼쪽의 경우 현재 재생중 영상이 전체 화면의 80% 채웠고, 나머지 부분은 재생목록으로 표시되어 있습니다. 화면상의 비율뿐 아니라 각각 제공되는 기능이 다르기에 UI상에서도 차이가 보입니다.사용자는 재생 영상 혹은 재생 목록 관련 영역을 구분하여 필요한 기능을 찾아갈 수 있습니다.3. 현재 상태를 알려주는 UI:왼쪽 재생 영상이 실제로 재생중이라면 우측 재생목록에서는 재생중 애니메이션이, 좋아요 버튼을 눌렀다면 해당 아이콘이 표시됩니다. 사용자는 현 영상 상태를 UI 상에서 확인 가능합니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
브라켓에서는 a 태그 #none을 해노면 안되는데 비주얼코드에서는 none이안먹히는거같아서요..
사진처럼 링크 된거처럼 보이는데 비주얼코드에서는 #none 해놓으면 안먹히는거같은데 ,,아닌가요 ? 저런경우에는text-decoration:none 을 해야할까요 ? ㅠ
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UX 리서처 관련하여 질문드립니다.
"UX리서처" 직업 설명 중 사용자 리서치에 대한 룰을 만들거나 직접하는 역할을 수행한다고 나와있는데, 혹시 룰이라면 어떤 것을 말하는 걸까요?! 사례를 들어 설명해주실 수 있을까요?! (회사에서는 어떻게 룰을 정의하는지 궁금해서 여쭤봅니다 :))
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
피그마 작업 후 WPF로 불러와질수있나요?
별개의 질문인데, 전혀 몰라서 여기에 질문남겨봐요,,ㅠ회사에서 피그마 쓸지 말지를 WPF환경에서 호환되냐 안되냐고 결정하신다는데,, 전혀 문외한이라 여기에 여쭤봅니다,,,
-
해결됨애플 웹사이트 인터랙션 클론!
섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.
섹션2 번째 내용입니다.해당과정을 리액트에서 적용하면서 따라가고 있습니다. 돔접근에 대해서는 useRef를 사용해서 잘 따라가고 있는데, scrollSection1 의 부분에서 scrollSection1Msg1~scrollSection1Msg4 의 opacity 부분에서 아래와 같이 작업했습니다. 그런데 화면에 잔상이 남습니다. 완전히 opacity=0 가 되지 않는 것처럼 희미하게 글자들이 중첩되며 남아 있습니다. (맥북 M1) values : { selectionMsgA_opacity : [0 ,1, {start: 0.1, end:0.2}], selectionMsgA_opacity_out : [1 ,0, {start: 0.25, end:0.3}], else if (scrollRatio <= 0.3) { obj.Section1Msg1.current.style.opacity = calcValues(values.selectionMsgA_opacity_out, currentYoffset) obj.Section1Msg1.current.style.transform = `translateY(${ calcValues(values.selectionMsgA_translateY_out, currentYoffset)}%)`
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
beauty 익스텐션이 설치가 안됩니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. 첨부와같이 나오는데 설치가 안되어도 하나씩 입력하면 되기는 하지만 설치가 안되어도 상관없겠죠?아니면 대체하는 익스텐션이 있는걸까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
교재와 강의 순서 매치오류
코딩웍스 교수님 안녕하세요!필기시험 합격후 실기 시험 대비하여 수업을 듣고 있는 수강생입니다.저는,섹션 00. 부터 시작해서 섹션01.섹션02.를 수강하고 있는데요.수강하기 전에 미리 섹션13.에 있는 핵심이론 PDF교재를출력해서 준비한 후에 섹션02.수업을 듣고있습니다.그런데 강의 순서와 교재 순서도 맞지 않고,,HTML교재에는 이미지맵, 유튜브다운로드, 멀티미디어, 표만들기, 폼 요소등 더 많은 내용이 실려있는데강의목록에는 보이지않고... 다루지 않는 것 같아서의문이 생겨 질문 남깁니다.교재에는 있지만 강의목록에는 없는 부분들은혼자서 독학해야되는 부분인건가요? 비전공자라서 아예 처음이라 이 강의를 큰맘먹고 결제 후 차근차근 따라가며 실기준비를 하고자했는데강의에서는 다 다루지않아서....어떻게 준비를 해야되는건지 막막합니다. 그리고수업순서는 섹션00부터 차례대로 수강해나가면서실습을 같이 따라하면서 준비하면 실기 합격과 가까워지는 것은 맞는걸까요?? 바쁘신 와중에 질문 읽어주셔서 감사합니다.답변 부탁드립니다. 감사합니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
코딩암기?하는건가요?
웹디자인실기를 보려고하는데요 강의의 코딩하는것들을 여러 유형별로 암기하는건가요?제작하는 과정을 외워질때까지 몇번이고 만들어보면 될까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer에 사진처럼 일자로 되어있는데 똑같이 따라했는데 뭐가문제일까요 ,,
푸터부분에 일자로 되어서 강의처럼 안되는데 뭐가문제일까요 ,,선생님이 하신대로따라했는데 계속 저부분이 안되서 문의드립니다 ...ㅠㅠㅠㅠ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프러그인 - 아이콘에서 가져 온 아이콘 수정하는 방법
프러그인 - 아이콘에서 가져온 아이콘을 수정할 수 있는지 궁금합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
강의 후기 작성하는 곳
강의 후기 작성은 어디에 하면 될까요??
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프로토타입 질문
항상 친절하게 답변해주셔서 감사합니다.프레임을 만들고 프로토타입을 실행해서 보는데 특정 아이콘이 안 보이거나 특정아이콘이 화면에 고정되어서 보이는(아래 캡처사진, 돋보기 아이콘) 등의 문제가 생겼습니다.이럴경우, 어떻게 해결해야 하는지 모르겠습니다.
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
CTA 테스트 관련하여 질문이 있습니다!
선생님 안녕하세요!사용자에게 다음 단계의 행동을 유도할 수 있는 것을 CTA라 이해했고, 이와 관련된 테스트도 20 ~ 30%로 한다고 하셨습니다. 혹시 회사에서 진행하셨던 테스트의 과정 및 결론이 어떻게 도출되는지 여쭤봐도 될까요?!(보통 내부 팀원 대상으로 테스트를 하여 정성적인 방식인 1:1 or n:1 인터뷰를 하시는걸까요?!)
