묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
완강하고 수료증은 어떻게 받나요?
완강했습니다~!드디어 수업을 다 들었어요 그런데 제가 직장인도 학생도 아닌 신분이어서 수료 인증을 못하고 있어요 그래도 수료증은 따로 나오나요? 정말 받고 싶은데 어떻게 받는지 모르겠어요 ㅠㅜ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프로토타입 질문입니당!
Prototype과 애니메이션안녕하세요. 항상 강의 잘 듣고 있습니다! 선생님께서 말씀해주신 대로 모작 연습을 열심히 하고 있어요! 가로 스크롤이 가능한 배너를 제작하려고 하는데 어떻게 해야 할 지 막막해서 질문드려요!잘 보이실 지 모르겠지만 현재 제가 만들고 있는 작업물에서는 배너를 좌우로 드래그할 때 몇 번째 페이지인지 보여주는 점이 교차되면서 위치가 바뀌는 상태에요. 저는 점이 서로 바뀌는 게 아니고 Stroke 서클이 Filled 서클로 바뀌었으면 좋겠습니다. 예를 들면 이렇게 말이죵Figma 직접가서 보기
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
scrollTimeline polyfill 에 관해서
안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 scroll-timeline polyfill repo 에서 찾아보니 강의에서 사용했던 scrollOfsets을 앞으로는 사용하지 않는 것 같았습니다. 이러한 부분에 대해서 다른 해결법이 또 있을까요? 아래의 링크에 방법이 있긴 합니다만 조금 더 효율적인 방법이 있는지 궁금했습니다! 추가로 react에서도 사용하려고 했지만 Npm에서는 관련한 패키지가 없는 것 같아서 혹시 react에서 적용해보신 적이 있으실까요?!https://github.com/flackr/scroll-timeline/issues/64
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
아직 강의를 보진 않았는데
1년동안 쇼핑몰 인하우스 간단한 퍼블 업무하다가 이직 준비하면서 공부중인데 궁금한점이있어서요 스크롤 애니메이션할때 간단한 효과는 aos, 디테일한건 gsap을 많이 쓴다고 들었거든요 이 강의의 web api 애니메이션을 습득하면 실무에서 gsap 으로 할수있는건 대부분 할 수 있는건가요? 물론 완전히 대체는 안되겠지만 왠만한건 가능한건가요 제가 gsap도 아직 공부할 예정이라 자세히 몰라서 질문드립니다ㅎ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
오토 레이아웃 질문이에요!
오토 레이아웃을 이용해서 버튼을 만들고 있습니다. 그런데 상자 안에 텍스트를 입력한 후에 상자의 크기를 조정하면 텍스트가 중앙 정렬이 안 되고 왼쪽 간격을 유지합니다. 이때 아래 사진처럼 상자와 텍스트 간의 간격을 바꾸는 방법 외에 항상 상자 가운데에 위치하도록 할 수 있는 방법이 있을까요?Figma Link
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문있습니다!
그 포토샵으로 이미지 사이즈 조절할때a,b,c유형은 픽셀이 정해져있어서 문제가 없긴한데d,e유형에선 가로 혹은 세로 사이즈가 100%다보니 임의로 지정한 상태에서 늘리면 되긴할텐데 d,e유형에서 이미지를 적당히 얼마정도로 세팅하면 좋을까요..??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
안녕하세요. 탭 부분 보더가 이상합니다.
선생님 안녕하세요. 탭 메뉴를 만들고 있는데공지사항에서는 보더가 없어지는데갤러리는 보더가 안없어집니다ㅠㅠ 왜이러는걸까요?알려주시면 감사하겠습니다. html 입니다.<!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>D-1 실전연습</title> </head> <body> <div class="container"> <div class="container-inner"> <div class="left"> <div class="header"> <div class="logo"><img src="images/header-logo.png"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> </ul> </div> <div class="login"> <a href="#none">Login</a> <b>l</b> <a href="#none">Logout</a> </div> </div> </div> <div class="right"> <div class="banner"> <div class="image-slide"> <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 class="image-banner"> <a href="#none"><img src="images/banner-01.png"></a> <a href="#none"><img src="images/banner-02.png"></a> <a href="#none"><img src="images/banner-03.png"></a> </div> </div> <div class="shortcut"> <div class="shortcut-inner"> <a href="#none" class="shortcut-left"><img src="images/shortcut-01.png" alt="shortcut"></a> <div class="shortcut-center"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^</p> <em>기간: 2022년 12월 18일 ~ 12월 25일</em> </div> <div class="shortcut-right"> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut arrow"></a> </div> </div> </div> <div class="items"> <div class="items-inner"> <div class="tab"> <a href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="content1"> <a href="#none" class="open-modal"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> </div> <div class="content2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery"><span>안녕하세요</span></a> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="logo"><a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a></div> <div class="copy"> <b><a href="#none">기업소개 제휴 및 입점 문의, </a> <a href="#none">이용약관, </a> <a href="#none">개인정보처리방침, </a> <a href="#none">이메일무단수집거부, </a> <a href="#none">사이트맵, </a> <a href="#none">인재채용, </a> </b> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p> </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="twitter"></a> <a href="#none"><img src="images/sns-02.png" alt="facebook"></a> <a href="#none"><img src="images/sns-03.png" alt="kakaostory"></a> </div> </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로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.</p> <a href="#none" class="close-modal">X 닫기</a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> css 입니다. @charset "utf-8"; * {margin: 0; padding: 0;} a {text-decoration: none; color: #333;} li,ul {list-style: none;} .container .container-inner {width: 100%; display: flex;} .left { width: 200px; flex: 1;} .right {width: calc(100vw - 200px); padding-right: 20px;} .header .logo {width: 200px; height: 100px;} .header .navi {width: 90%; margin: auto; } .menu {position: relative; z-index: 1000;} .menu > li > a { padding: 10px; display: block; text-align: center; border: 1px solid #000; transition: 0.5s;} .menu > li:hover > a { background-color: rgba(0, 0, 0, 0.5);} .sub-menu {display: none; border: 1px solid #000;} .sub-menu > a { padding: 5px; display: block; text-align: center; transition: 0.5s;} .sub-menu > a:hover { background-color: rgba(0, 0, 0, 0.5);} .login {text-align: center; margin-top: 20px;} .login a:hover {text-decoration: underline;} .login b {color: #ddd;} /* 슬라이드 배너 */ .banner { width: inherit; height: 400px; overflow: hidden; } .banner .image-slide {width: inherit; height: 3600px; font-size: 0; animation: slide 10s linear infinite; } .banner .image-slide a:nth-child(1) {animation-delay: 0s;} .banner .image-slide a:nth-child(2) {animation-delay: 3.5s;} .banner .image-slide a:nth-child(3) {animation-delay: 0s;} @keyframes slide { 0% {top: 0px;} 5% {top: -1200px;} 35% {top: -1200px;} 40% {top: -2400px} 70% {top: -2400px;} 100% {top: 0px;} } .image-banner {position: absolute; right: 0; top: 0; width: 200px} .image-banner a img { width: 180px; margin-top: 7px;} /* 바로가기 */ .shortcut {width: inherit; height: 200px; margin-top: 13px; margin-left: 20px;} .shortcut-inner { border: 1px solid #000; display: flex; height:calc(100% - 20px);} .shortcut-left {float: left; width:400px; padding-top: 10px; text-align: center;} .shortcut-center {float: left; margin-left: 20px;} .shortcut-center h2 {margin-top: 40px} .shortcut-center p {margin-top: 10px; margin-bottom: 5px;} .shortcut-center em { font-style: normal; color: #bbb;} .shortcut-right { margin-top: 75px; margin-right: 50px; padding-left: 30px; } /* 아이템 */ .items {width: inherit; height: 250px; margin-left: 20px;} .itmes-inner {} .tab {} .tab a { display: inline-block; margin-right: -5px; width: 180px; border: 1px solid #000; text-align: center; padding: 10px; border-radius: 10px 10px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px;} .tab a:active {background-color: #fff;} .content1 {border: 1px solid #000; box-sizing: border-box;} .content1 a {display: block; padding: 10px; border-bottom: 1px solid #000; } .content1 a:last-child {border-bottom: none;} .content1 em {overflow: hidden; text-overflow: ellipsis; font-style: normal; } .content1 b {float: right; margin-right: 20px;} .content2 {height: 200px; border: 1px solid #000; position: relative; text-align: center; display: none; z-index: 0; box-sizing: border-box; background-color: #fff;} .content2 a {display: inline-block;} .content2 a > img {width: 200px; margin-top: 20px; padding: 5px;} .content2 a > span {display: block; margin-top: -5px;} /* 푸터 */ .footer {width: 100%; height: 100px;display: flex;} .footer .logo {width: 200px;} .footer .logo a img{margin-top: 10px;} .footer .copy {width: calc(100vw - 400px); text-align: left; padding: 30px;} .footer .copy p {margin-top: 5px;} .footer .sns {width: 200px;} .footer .sns a img {width: 50px; border-radius: 5px; margin-top: 20px;} .modal { display: none; position: absolute; top: 0; left: 0; background-color:rgba(0, 0, 0, 0.5); width: 100%; height: 100%; text-align: left;} .modal-content {border-radius: 20px; margin-top: -350px; margin-left: -300px; position: absolute; top: 50%; left: 50%; width: 600px; height: 320px; background-color: #fff; padding: 40px;} .modal-content h2 {padding-bottom: 20px;} .modal-content a {border: 1px solid #000; padding: 5px 10px; float: right; margin-top: 20px;}
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
B4 최종본, 네비 메뉴가 이상해요.
B4 최종본 작성중인데영상에 나온대로 따라했는데네비 메뉴와 서브메뉴가 엄청 크게 출력됩니다 ㅠㅠ 왜 이럴까요..
-
미해결애플 웹사이트 인터랙션 클론!
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
안녕하세요!! 강의를 전부 듣고 코드를 뜯어보며 복습중에 있습니다. section-0에서 사용한 것을 이용해 스크롤 될 때 matrix로 Text에 scale(80)정도로 주려고 코드를 입력해보니 적용은 되었으나 스크롤을 빠르게 올릴시에 정상적으로 사이즈가 줄어들지 않고 줄어들다 말거나 그러더라구요...ㅠㅠ 폰트 픽셀도 많이 깨지는 현상이 발생하구요. 혹시 해결하려면 어떤식으로 접근해야 할까요? 해당 코드 첨부드립니다. const sectionInfo = [ { // section-0 type: "sticky", heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-0"), messageA: document.querySelector("#scroll-section-0 .main-message.a"), messageB: document.querySelector("#scroll-section-0 .main-message.b"), messageC: document.querySelector("#scroll-section-0 .main-message.c"), messageD: document.querySelector("#scroll-section-0 .main-message.d"), }, values: { messageA_opacity_in: [0.4, 1, { start: 0, end: 0.05 }], messageA_opacity_out: [1, 0, { start: 0.15, end: 0.2 }], messageA_scale_in: [1, 80, { start: 0.05, end: 0.25 }], messageA_scale_out: [80, 1, { start: 0.25, end: 0.05 }], messageB_opacity_in: [0, 1, { start: 0.2, end: 0.25 }], messageB_opacity_out: [1, 0, { start: 0.35, end: 0.4 }], messageB_translateY_in: [50, 0, { start: 0.2, end: 0.25 }], messageB_translateY_out: [0, -50, { start: 0.35, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.4, end: 0.45 }], messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }], messageC_translateY_in: [50, 0, { start: 0.4, end: 0.45 }], messageC_translateY_out: [0, -50, { start: 0.55, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageD_opacity_out: [1, 0, { start: 0.75, end: 0.8 }], messageD_translateY_in: [50, 0, { start: 0.6, end: 0.65 }], messageD_translateY_out: [0, -50, { start: 0.75, end: 0.8 }], }, }, ]; function calcValues(values, currentScrollY) { let returnValue; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; // 현재 스크롤 섹션에서 스크롤 된 범위를 비율로 구하는 식 const scrollRatio = currentScrollY / currentSectionHeight; if (values.length === 3) { const scrollAniStart = values[2].start * currentSectionHeight; const scrollAniEnd = values[2].end * currentSectionHeight; const scrollAniHeight = scrollAniEnd - scrollAniStart; if (currentScrollY >= scrollAniStart && currentScrollY <= scrollAniEnd) { returnValue = ((currentScrollY - scrollAniStart) / scrollAniHeight) * (values[1] - values[0]) + values[0]; } else if (currentScrollY < scrollAniStart) { returnValue = values[0]; } else if (currentScrollY > scrollAniEnd) { returnValue = values[1]; } } else { returnValue = scrollRatio * (values[1] - values[0]) + values[0]; } return returnValue; } function playAnimation() { const objs = sectionInfo[currentSection].objs; const values = sectionInfo[currentSection].values; const currentScrollY = scrollY - prevScrollHeight; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; const scrollRatio = currentScrollY / currentSectionHeight; switch (currentSection) { case 0: // message if (scrollRatio <= 0.05) { objs.messageA.style.opacity = calcValues( values.messageA_opacity_in, currentScrollY ); } else { objs.messageA.style.opacity = calcValues( values.messageA_opacity_out, currentScrollY ); objs.messageA.style.transform = `matrix(${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0, ${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0)`; }
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드 위치가 이상합니다...
범위가 넓어지면서 슬라이드가 오른쪽으로 빗겨나갑니다..왜일까요..ㅠㅠ <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>B-4 강의들으면서 만들기</title> </head> <body> <div class="container"> <div class="header-inner"> <div class="header"> <div class="logo"><a href="#none"><img src="image/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 class="sub-back"></div> </div> </div> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="image/slide_1.jpg" alt="slide1"></a> <a href="#none"><img src="image/slide_2.jpg" alt="slide2"></a> <a href="#none"><img src="image/slide_3.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="notice"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none">갤러리</a> </div> <div class="tab2"> <a href="#none"><img src="image/gallery1.jpg" alt="gallery1"> </a> <a href="#none"><img src="image/gallery2.jpg" alt="gallery2"> </a> <a href="#none"><img src="image/gallery3.jpg" alt="gallery3"> </a> </div> </div> </div> <div class="banner"><a href="#none"><img src="image/shortcut.jpg"></a></div> </div> </div> <div class="footer-inner"> <div class="footer"> <div class="copyright"> <div>법적고지 개인정보취급방침 개인정보처리방침</div> <div>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56</div> </div> <div class="site"></div> </div> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. <br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a href="#none">X 닫기</a> </div> </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: #222328; font-size: 15px;} a {color: #222328; text-decoration: none;} ul, li {list-style: none; padding: 0; margin: 0;} .container {width: 100%; height: 1000px;} .header-inner {background-color: #ddd; } .header { width: 1200px; height: 100px; margin: auto; position: relative; z-index: 9999;} .header > div {} .header .logo {width: 200px; float: left;} .header .navi {width: 600px; float: right;} /* 네비게이션 */ .menu {margin-top: 60px; position: absolute;} .menu li {float: left; width: 150px; box-sizing: border-box; text-align: center; ;} .menu li > a {display: block; padding: 10px; border: 1px solid #000; transition: 0.5s; background-color: #fff;} .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; color: #fff; background-color: #000; } .sub-menu a:hover { background: #fff; color: #000;} .sub-back { display: none; width: 1200px; height: 120px; background-color: #000; position: absolute; top: 98px; left: 0; z-index: -1; } /* 아이템 */ .content-inner { width: 100%; } /* 슬라이드 */ .slide { width: 1200px; height: 300px; border: 1px solid #000; position: relative; overflow: hidden;} .slide > div { width: 3600px; font-size: 0; animation: slide 10s linear infinite; top: 0; left: 0; position: absolute;} .slide > div > a:nth-child(1) {animation-delay: 0s;} .slide > div > a:nth-child(2) {animation-delay: 3.5s;} .slide > div > a:nth-child(3) {animation-delay: 7s;} @keyframes slide { 0% {left:0px} 30% {left:0px} 35% {left:-1200px} 65% {left:-1200px} 70% {left:-2400px} 95% {left:-2400px} 100% {left:0px} } /* 아이템 */ .items {width: 1200px; margin: auto; overflow: hidden;;} .items > div { height: 200px; box-sizing: border-box;} .notice {width: 400px; float: left;} .notice .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .notice .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .notice .tab-inner .btn a {} .notice .tab-inner .tab1 {border: 1px solid #000;} .notice .tab-inner .tab1 a {padding: 5px; display: block; border-bottom: 1px solid #000;} .notice .tab-inner .tab1 a:last-child {border-bottom: none;} .notice .tab-inner .tab1 a b{ float: right; font-weight: normal;} .notice .tab-inner .tab1 a em {font-style: normal;} .gallery {width: 400px; float: left;} .gallery .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .gallery .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .gallery .tab-inner .btn a {} .gallery .tab-inner .tab2 { text-align: center; border: 1px solid #000;} .gallery .tab-inner .tab2 img {width: 110px; padding-top:20px ; padding-bottom: 15px;} .banner {width: 400px; float: left; } /*푸터*/ .footer-inner {width: 100%; height: 100px; background-color: #ddd; overflow: hidden;} .footer {width: 1200px; margin: auto; overflow: hidden;} .footer > div { float: left; box-sizing: border-box; height: 100px;} .copyright {width: 1000px;} .copyright div {; height: 50%;} .site {width: 200px;} .modal {display: none;}
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
포토샵 작업할때
수험자 제공파일에 있는 원본이미지를 편집해서images 폴더에 png 혹은 jpg파일로 저장하잖아요근데 영상보면 원본이미지도 따로 저장하시던데이 원본이미지 저장도 필수인걸까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
서브메뉴를 눌렀을 때 배경이 같이 생겨서 나와요...
A-3을 연습하고 있는데... 서브메뉴에 마우스를 오버하면 저렇게 뒷 배경도 일부분 같이나와서 이미지를 가려버리는 현상이 생깁니다. 도대체 왜 이러는걸까요ㅠㅠ...?html, css 첨부 드립니다... <div class="header"> <div class="logo"> <a href="#none"><img src="image/logo.png"></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> </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> /* 네비게이션 */ .header .navi { float: right; margin-top: 50px; margin-right: 25px;} .menu li {float: left;} .menu li > a { padding: 7px; border: 1px solid #000; width: 180px; display: inline-block; text-align: center; box-sizing: border-box; transition: 0.5s;} .menu li > a:hover {background-color: #000; color: #fff;} .sub-menu {border: 1px solid #000; } .sub-menu a {display: block; padding: 5px; text-align: center; transition: 0.5s;} .sub-menu a:hover {background-color: #000; color: #fff;}
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
푸터 부분이 안보여요.
<!DOCTYPE html> <html lang="kor"> <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"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="logo header"></a> </div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> <footer> <div class="copyright"> 동문경조사, 동문행사일정, 사용자매뉴얼 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div></div> <div></div> </div> </footer> </div> </div> </div> <script href="script/jquery-1.12.4.js" type="text/script"></script> <script href="script/custom.js" type="text/script"></script> </body> </html> @charset 'utf-8'; body { margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { color: #222328; text-decoration: none; } .container { width: 1000px; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header {} .header-logo { border: 1px solid #000; height: 100px; } .navi { border: 1px solid #000; height: 400px; } .slide {} .slide > div { border: 1px solid #000; height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid #000; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; border: 1px solid #000; } .gallery { width: 300px; border: 1px solid #000; } .shortcut { width: 200px; border: 1px solid #000; } footer { overflow: hidden; } footer > div { border: 1px solid #000; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 600px; } .sns { width: 200px; } .sns div { height: 50px; border: 1px solid #000; box-sizing: border-box; } footer에 overflow: hidden; 을 지우면라인이 보이는데, 다시 넣으면 안보여요.뭐가 잘못된걸까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
d 1 레이아웃 연습중에 궁금한것이 있어서 질문 남깁니다.
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>D 타입 연습</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"></div><div class="navi"></div><div class="spot-menu"></div></header></div><div class="right"><div class="slide"><div class="slide-image"></div><div class="slide-banner"></div></div><div class="items"><div class="shorcut"></div><div class="news-galley"></div></div></div></div><footer><div class="footer-logo"></div><div class="cpoyright"></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";body { background-color:#fff; color:#000; margin:0;}a { text-decoration:none; color:#000;}.container {}.main-content { display:flex;}.left { width:200px; border:1px solid #000;}.right { flex:1; border:1px solid red;}header {}.header-logo { height: 100px; border:1px solid red;}.navi { height:400px; border:1px solid #000;}.spot-menu { height: 50px; border:1px solid red;}.slide { height:400px;}.slide-image { border:1px solid green; height:inherit;}.slide-banner { width:150px; height: 300px; border: 1px solid red; position:absolute; top:0; right:0;}.items {}.shortcut { height:200px; border: 5px solid gold;}.news-gallery { height:250px; border:1px solid blue;}footer { display: flex;}footer > div { border:1px solid #000; height:100px;}.footer-logo { width: 200px;}.copyright { flex:1;}.sns { width:300px;}
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slider 적용이 안되어서 올립니다
<div class="history-info"> <h2>History</h2> <hr class="bar" /> <div class="history-slider"> <div> <h4> The Project<br />of Architect for the <span>2013</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2014</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2015</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2016</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2017</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2018</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2019</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2020</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> </div> </div> 도저히 문제를 못찾겠습니다 한시간동안 체크했는데 답이 안나오네요..
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
<header>와 <div class="header"> 둘다 사용해도 상관없나요?
<header> <footer> 시맨틱태그와 <div class="header"> 클래스 네임 중에 어떤방식으로 시험을 봐야할까요? 둘 다 상관없나요? 강의 화면이랑 다운받은 html 다른 경우도 있는 것 같아서요~
-
미해결애플 웹사이트 인터랙션 클론!
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
(() => { const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅(디바이스 마다 높이가 다르기에 각 기계가 가진 높이를 불러오고 곱해준다.) scrollHeight: 0, }, { // 1 type: 'normal', heightNum: 5, scrollHeight: 0, }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } console.log(sceneInfo); } setLayout(); })(); 4645값으로 그대로 진행해도 될까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 적용이 안돼요.
안녕하세요 선생님.제이 쿼리 적용이 안돼서 궁금해서 여쭤봅니다.<script type="text/javascript" src="script/jquery-1.12.4.js"></script><script type="text/javascript" src="script/custom.js"></script> 요렇게 적용하라고 하셔서 그대로 했을때는 되는데,js파일을 script 폴더에 넣지않고 밖으로 뺀다음 <script type="text/javascript" src="../jquery-1.12.4.js"></script> 요렇게 .. 처리해서 같은 폴더내에 넣으려고 하는데적용이 안되더라구요. 혹시 제이쿼리는 요렇게 하면 안되는것일까요? 그리고 폴더에 넣는 편이 실무나, 정리 면에서 확실히 더 도움이 되나요...?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
object-fit 속성 사용법
D E 유형 필독사항에서 object-fit 속성 강의에서object-fit 속성을 사용할 때 부모요소의 너비 높이가 반드시 지정되어 있고그 너비와 높이를 object-fit 속성이 들어간 img가 똑같은 값으로 받아와야 한다(inherit)고 했는데,부모요소의 너비높이가 없이, inherit 없이도,img의 너비나 높이만 있어도 구현되던데,문제가 있을까요?아래처럼 해도 될까요?꼭 반드시부모요소의 너비높이가 있어야되고inherit로 받아와야만 하나요?참고로 아래는 D1 유형 중 슬라이드부분 입니다. <div class="slide"> <div class="slide-image"> <a href="#none"><img src="images/slide-d-01.jpg"alt="slide-d-01"></a> <a href="#none"><img src="images/slide-d-02.jpg"alt="slide-d-02"></a> <a href="#none"><img src="images/slide-d-03.jpg"alt="slide-d-03"></a> </div> </div>.slide{ position: relative; /**/ overflow: hidden; width: 400px; } .slide-image{ font-size: 0; animation: slide 10s linear infinite; } .slide-image img{ width: 100%; height: 400px; object-fit: cover; }
-
미해결애플 웹사이트 인터랙션 클론!
scrollLoop 함수 질문
const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } };선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() }조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
