묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
넓이를 %로 적용하긴 어려울까요?
넓이를 높이를 전부 고정값으로만 사용하게 되는데 혹시 해당 부분은 100% 로 채워서는 적용이 어려울까요?모바일까지 고려하게되면 퍼센트로 작업해야할것같은데 뭔가 넓이값이 달라지게 되면 중간중간 요소들 컨트롤이 아에 어려운 구조가 될까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
예제파일 다운 받는 방법
섹션11에서 사용하시는 피그마 예제파일은 어디서 다운받을 수 있나요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
강사님 저는 왜 확장버튼 누르면 화면처럼 안뜰까요
■ 질문 남기실 때 꼭! 참고해주세요.강사님 저는 왜 확장버튼 누르면 화면처럼 안뜰까요검색창에 알파벳치면 확장을 가져오는 동안 오류가 발생했습니다.xhr failed 라는 창이 뜨고 엑스 표시로 검색을 해도 강사님처럼 검색이안됩니다 ㅠㅠ뭐가 잘못일까요 ...???
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
유튜브에도 웹디기능사 합격하기 영상이있는데
유튜브에도 웹디기능사 합격하기 영상이있는데 인프런강의랑 머가다른지요...? 인프런보다 짧아보이기는 한데 정확히 뭐가 다른지 선생님께 여쭤보고싶어서요 ,,,
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
이미지 슬라이드가 1200*300으로 나오지 않고 정사각형으로 표현이 됩니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A타입</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">sub-menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">sub-menu2</a> <div class="sub-menu"> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> </div> </li> <li> <a href="#none">sub-menu3</a> <div class="sub-menu"> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> </div> </li> <li> <a href="#none">sub-menu4</a> <div class="sub-menu"> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt=""></a> <a href="#none"><img src="images/slide-02.jpg" alt=""></a> <a href="#none"><img src="images/slide-03.jpg" alt=""></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> </div> </div> </div> <div class="gallery"> <div class="btn"> 갤러리 </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt=""></a> <a href="#none"><img src="images/gallery-02.jpg" alt=""></a> <a href="#none"><img src="images/gallery-03.jpg" alt=""></a> </div> </div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. <br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, <br> 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br><br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.<br> </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 { color: #000; font-size:15px; background-color: #fff; margin:0; } a { text-decoration: none; color:inherit; } .container {width :1200px; border:1px solid #000; margin:auto;} header {height:100px; border:1px solid red; position:relative;} .slide {height:300px;} .items {height:250px;} footer {height:100px;} /* header */ header > div { height:100px; } .header-logo { border:1px solid #000; width:200px; float:left; } .navi { /* border:1px solid #000; */ width:600px; float:right; margin-right:20px; margin-top:55px; } .menu { } .menu li { list-style: none; float:left; width:25%; } .menu li > a { display: block; padding:5px; background-color: #fff; text-align: center; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; } .sub-menu a { display:block; padding:5px; background-color: #fff; text-align: center; } .sub-menu a:hover { background-color: #000; color:#fff; } /* slide */ .slide { position:relative; overflow:hidden; } .slide > div { font-size: 0; width:3600px; position:absolute; top:0; left:0; float: left; 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 */ .items > div { height:250px; float:left; box-sizing: border-box; } .news { width:400px; border:1px solid #000; } .btn { display: inline-block; padding:5px; border: 1px solid #000; width:100px; text-align: center; } .tab1 {} .tab1 a {display:block; padding:5px;} .tab1 a em { width:70%; float:left; font-style:normal; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .tab1 a b { width:30%; float:right; } .gallery { width:400px; border:1px solid red; } .tab2 { text-align: center; } .tab2 a {} .tab2 img { width:120px; } .shortcut { width:400px; border:1px solid green; } /* footer */ footer > div { height:100px; float:left; box-sizing:border-box; } .footer-logo { width:200px; background-color: #000; } .copyright { width:800px; background-color: aqua; } .sns { width:200px; background-color: green; } /* modal */ .modal{ position:absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.5); width:100%; height:100%; display: none; } .modal-content { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: #fff; height:350px; } .modal-content a { display: block; padding:20px; float:right; border:1px solid #000; } 이미지슬라이드가 1200*300 이 아니라정사각형으로 나오는데 원인을 모르겠어서 문의합니다^^;;
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
안녕하세요, 수강생의 포트폴리오에 피드백도 제공해 주시나요?
강사님의 강의를 보면서 타 스타트업 과제와 협업한 영어 포트폴리오가 있습니다. 혹시 이메일을 보내면 귀한 피드백을 제공해 주실지요? :)
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
강의가 블라켓으로수업하신다고하는데 비주얼스튜디오로 연습해도되는건가요 ?
독학으로 웹디기능사실기 유튜브보고 공부하고 덜공부한상태로보러갔다가 왔는데 요새는 비주얼스튜디오코드로 시험많이보고 브라켓이 잘안깔려있다는 시험장도있다고 해서 그러는데 이강의도 브라켓으로 하는데 비주얼스튜디오로 연습해도 문제없을까요 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
시험 감점 문의
E-2 역사 박물관로고 만들기에서 심벌과 로고명이 포함된 완전한 형태로 디자인한다. 라고 있습니다.그냥 텍스트로 역사박물관이라고 제작하면 감점이 많이 되나요?
-
미해결애플 웹사이트 인터랙션 클론!
라이브러리 질문
혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
이미지 편집 포토샵 관련
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.안녕하세요 강사님~제공해준 수험자 이미지에서 슬라이드 이미지 포토샵 연습하고있는데요..! 새 파일을 만들어서 그 위에 덮어씌워서 크기를 맞추는걸로 아는데 이미지가 짤려도 상관없는건가요 ?? 안짤리게 맞추려다보니까 찌그러져서요...아래 이미지 처럼 짤려도되는걸까요 ?? 아니면 이런식으로 해야하나요 ??
-
미해결피그마(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
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
질문있습니다!
그 포토샵으로 이미지 사이즈 조절할때a,b,c유형은 픽셀이 정해져있어서 문제가 없긴한데d,e유형에선 가로 혹은 세로 사이즈가 100%다보니 임의로 지정한 상태에서 늘리면 되긴할텐데 d,e유형에서 이미지를 적당히 얼마정도로 세팅하면 좋을까요..??
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
안녕하세요. 탭 부분 보더가 이상합니다.
선생님 안녕하세요. 탭 메뉴를 만들고 있는데공지사항에서는 보더가 없어지는데갤러리는 보더가 안없어집니다ㅠㅠ 왜이러는걸까요?알려주시면 감사하겠습니다. 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;}
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
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)`; }
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
슬라이드 위치가 이상합니다...
범위가 넓어지면서 슬라이드가 오른쪽으로 빗겨나갑니다..왜일까요..ㅠㅠ <!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;}
