46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장기능오류
타임라인=4:52 확장자를 누르면 설치가능에 확장 기능 레지스트리에 액세스 할 수 없습니다. 나중에 다시 시도하십시오. 라고 뜹니다 검색도 안되고요 인터넷 연결 되있구 집인데 왜이렇게 뜨는걸까요ㅜㅜ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
CSS 포지션 속성 완벽하게 이해하기(3편)
자식요소를 부모요소 밖으로 위치 시킬 때 강의시간 10:23 쯤에 보면 예제에는 자식요소가 부모요소 테두리 바깥쪽까지 나가게 되는데, 선생님 코드로는 자식요소가 부모요소 테두리에 겹쳐지게 됩니다. 혹시 테두리 완전 밖까지 나가게 하는 방법이 있는가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
.print 안에 있는 img가 수직 가운데 정렬이 안됩니다ㅜ
안녕하세요. .print 안에있는 이미지가 수직 가운데 정렬이 안되서 문의 드립니다. 제가 만든 예제가 가운데 정렬이 안되서 선생님이 만드신 예제를 다운받아서 확인했는데 선생님이 만드신 예제에서도 .print 안에 있는 img가 수직 가운데 정렬이 안됩니다. .ptrint img{ vertical-align : middle} 이 작동은 하는거 같은데 이미지가 가운데로 가지 않고 밑에 있는걸까요?ㅜㅜ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
블록 요소와 인라인 요소 사이의 공백에 대한 질문
선생님 질문이 있습니다!블록 요소랑 인라인 요소를 배치하면서 연습하고 있는데요블록 요소 안쪽에 인라인 요소를 배치하면첨부 이미지 아래쪽 녹색 부분에 약간 공백같은게 생기는데이유를 모르겠어요. 패딩이랑 마진을 0씩 줘도 없어지지가 않는데혹시 패딩 마진 이외에 나중에 배우는 내용이면나중에 배운다고만 알려주시면 감사하겠습니다! - HTML 소스 - <div class="parent"> <div class="child"></div> </div> - CSS 소스 - .parent { border: 1px solid black; text-align: center; } .child { border: 1px solid red; width: 100px; height: 100px; display: inline-block; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인라인 블록의 마진에 관한 질문
선생님 질문이 있습니다! 다운로드 자료의 인라인 블록 특징(첨부 파일 녹색 부분)을 보면 「상하 마진은 가질 수 있음」 이라고 되어있는데「상하좌우 마진 가질 수 있음」이 맞는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
reset.css 에 관하여
선생님 안녕하세요. 제이쿼리 반응형 애니메이션 모달(2) 강의 내용 중 reset.css 에 관하여 앞선 강의에 설명되어있다고 하셨는데, 혹시 커리큘럼에서 어떤 강의에 있는지 여쭤봅니다. 감사합니다~~^^
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션)
강사님 안녕하세요. 강사님의 강의 덕분에 웹디자인 자격증을 획득하고 현재 취업을 위해 개인 포트폴리오를 만들기 위해 연습하던 중, 글 올립니다. 가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션) - 요 강의에 대한 질문입니다. 강사님이 말씀하신대로 모든 과정을 따라 했는데, 3가지의 모든 item들이 한 공간에 일직선 수평으로 다 위치가 되지 않습니다. 혹시나 해서 2번 더 모든 과정을 확인했으며, display: inline-block은 물론이고 padding크기와 width, height 사이즈, box-sizing: border-box까지 다해봤는데, 전혀 위치가 되지 않습니다. 어떻게 해야할까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
text-align: center를 부모요소에 주는 이유
선생님 안녕하세요. 33:07초 쯤에서 inline-block을 중앙 정렬하는 방법 중 text-align: center를 자식 요소가 아닌 부모요소에 주는 이유가 무엇인지 궁금합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transform 속성
코딩웍스님~ 먼저 이번 3회차 웹디자인 기능사 90점으로 고득점 합격했습니다!! 친절하고 세세하게 잘 가르쳐 주셔서 감사합니다.덕분입니다. 혹시 transform 속성에 대한 강의도 따로 있나요? 아니면 이 수업들 들으면서 이 명령어는 이렇게 되는구나 정도로만 알고 있어도 되나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요! 마지막 레이어는 못 없애는 건가요??
제작한 결과물에서 마지막 background-color: #ddd 를 준 레이어는 안 보이게 할 수는 없을까요?? 이미지 4개만 보이게끔요!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
Part 04] 비디오 백그라운드를 활용한 랜딩페이지 질문있습니다!
안녕하세요! 강의 듣다 궁금한 점이 있어 질문 남깁니다. 강의 7:15분에 .gnb a 선택자에 opacity: 0 속성을 주었는데 왜 그런건지 궁금합니다. 넣은거랑 안 넣은거랑 비교해봤는데 뭐가 달라진건지 잘 모르겠네요ㅠㅠ 어떤 차이가 있는 건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문이있습니다 css 부분이용
input[id=tab1]:checked ~ .slide1 { display: block; } input[id=tab2]:checked ~ .slide2 { display: block; } input[id=tab3]:checked ~ .slide3 { display: block; <div class="content slide1"> <img src="/images/slide-01.jpg"> </div> <div class="content slide2"> <img src="/images/slide-02.jpg"> </div> <div class="content slide3"> <img src="/images/slide-03.jpg"> </div> 여기에서 질문이있는데요 input[id=tab3]:checked ~ 여기까지는 이해가 되는데 .slide3 부분이 이해가 되지않네요 무슨 말이냐하면 .다음에는 클래스이름 content slide1이 되어야 하지않나요? input[id=tab3]:checked ~ .content slide1 이런식으로요.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
full screen이 아닐 때
선생님 풀스크린이 아닐 때 이미지가 아래와 같이 위 아래로 분리는 되나, 명확하게 보이지 않습니다. 이 현상은 혹시 어떻게 해결할 수 있을까요? 제가 잘못했나 싶어, 선생님 코드(html, css)를 그대로 복사해도 똑같이 나옵니다 ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
Smooth Scrolling 작동
예제와 똑같이 Jquery를 했는데도 Smooth Scrolling이 작동을 하지 않습니다. ㅠㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>a 앵커 만들기</title> <!-- <script src="js/jquery-3.4.1.min.js"></script> <script src="js/jquery.scrollTo.min.js"></script> --> <style> html { scroll-behavior: smooth; } body { margin: 0; } header a { background-color: teal; color: #fff; text-transform: uppercase; text-decoration: none; padding: 10px 20px; } p { font-size: 1.5em; line-height: 2em; } .btn-goto-top { background-color: pink; color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 20px; } </style> </head> <body> <div class="container"> <header> <a href="#part1">html part</a> <a href="#part2">css part</a> <a href="#part3">Jquery part</a> <a href="#part4">portfolio part</a> </header> <h1 id="part1">html part</h1> <hr> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi! </p> <a href="#" class="btn-goto-top">Go to top</a> <!-- #은 문서의 가장 상위 --> <h1 id="part2">css part</h1> <hr> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi! </p> <a href="#" class="btn-goto-top">Go to top</a> <h1 id="part3">Jquery part</h1> <hr> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi! </p> <a href="#" class="btn-goto-top">Go to top</a> <h1 id="part4">portfolio part</h1> <hr> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus placeat quos numquam laudantium mollitia doloribus magnam, excepturi ducimus nihil error dolor unde repudiandae repellat veritatis aspernatur. Dolorem laboriosam repellat quisquam iusto consectetur cumque officia nobis corporis eligendi, quaerat eos voluptatem sint illum perspiciatis sed maiores, voluptatibus culpa doloribus aspernatur asperiores autem rerum ratione quod optio! Hic, obcaecati veniam accusantium vero earum, repudiandae magnam delectus nesciunt error ea natus porro exercitationem, quas odio suscipit aut reprehenderit. Inventore, facilis sunt nostrum similique sit exercitationem tempore eum doloribus aperiam provident sed? Perspiciatis, illum cum ex voluptas vero qui voluptate soluta similique quae veniam voluptatum? Neque, quidem molestias ab eligendi dolore eius illum doloremque officia vel iusto deserunt repellendus recusandae amet qui iste? Adipisci eveniet, minima aperiam commodi, dignissimos recusandae corrupti mollitia assumenda voluptatibus doloribus quidem est rem nam earum, error qui quae quaerat sit omnis quo cumque vitae. Exercitationem omnis optio quisquam ratione nobis minus laborum nostrum cumque. Beatae est eligendi dicta asperiores saepe quo, placeat eos harum, laudantium, distinctio aperiam. Nulla, assumenda inventore? Repudiandae debitis nulla nihil animi magni architecto inventore voluptatum expedita, odio atque hic aspernatur sit, suscipit, aut accusantium cupiditate vero omnis ipsum ea! Corrupti adipisci ut dicta eligendi! </p> <a href="#" class="btn-goto-top">Go to top</a> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> /* Smooth Scroll */ $('header a, .btn-goto-top').click(function() { $.scrollTo(this.hash || 0, 900); e.preventDefault(); }) </script> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
10:50 span태그
span태그는 인라인요소 태그라고 하셨는데 float를 사용하게되면 왜 크기값을 가질 수 있는지 궁금합니다! 제가 놓친 부분이 있는건가요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문 있습니다!!
Modal 창 gnb 부분에서 hover 했을때 왼쪽에서 부터 차오르는 형태로 해보고 싶어서 코딩을 했는데 의도한대로 나오지 않고 a 태그가 밑으로 자꾸 떨어집니다ㅠㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); @import url('http://fonts.googleapis.com/css?family=Monoton'); @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Montserrat', sans-serif; margin: 0; color: #222; } a { text-decoration: none; color: #222; } /* Video */ .video-frame:before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(-135deg, rgba(30, 143, 255, 0.904), transparent); } .video-frame video { position: fixed; min-width: 100%; min-height: 100%; z-index: -1; } /* Logo */ .logo { position: absolute; top: 50px; left: 100px; transition: .3s; cursor: pointer; } .logo.active { z-index: 100; } /* Header */ .header { position: absolute; left: 100px; bottom: 100px; width: 800px; color: #fff; animation: show1 2s 1s linear; animation-fill-mode: both; } .header h1 { font-size: 60px; margin: 0; } .header h1 span { display: block; color: crimson; } .header p { font-size: 1.2em; line-height: 1.5em; } .header a { display: inline-block; text-align: center; color: #fff; border: 2px solid #fff; border-radius: 20px; padding: 10px 20px; width: 120px; margin-right: 20px; text-transform: uppercase; } /* .btn-book {} .btn-learn {} */ .header a:hover { background-color: #fff; color: #000; } /* Anniversary */ .anniversary { position: absolute; right: 100px; bottom: 50px; text-align: center; animation: show2 2s 1s linear; animation-fill-mode: both; transition: .3s; } .anniversary em { display: block; font-style: normal; font-size: 30px; letter-spacing: 5px; } .anniversary span { font-family: 'Monoton', sans-serif; font-size: 130px; } .anniversary.active { z-index: 100; color: #fff; } /* Trigger */ .trigger { position: absolute; top: 50px; right: 50px; width: 40px; height: 20px; z-index: 100; cursor: pointer; /* border: 1px solid #000; */ } .trigger span { position: absolute; width: 100%; height: 1px; background-color: #000; transition: .3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span { background-color: #fff; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } /* Modal */ .modal-gnb { font-family: 'Raleway', sans-serif; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.788); display: none; } .gnb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .gnb a { position: relative; display: block; color: #fff; font-size: 4em; padding: 10px; animation: gnb 2s linear; animation-fill-mode: both; } .gnb a:before { position: absolute; top: 0; left: 0; color: crimson; width: 0; overflow: hidden; content: attr(data-txt); /* transition: .5s; */ padding: 10px; transition: .3s; /* border: 2px solid yellow; */ } .gnb a:hover:before { width: 100%; } /* .gnb a:hover { color: crimson; } */ .gnb a:nth-child(1) { animation-delay: .2s; } .gnb a:nth-child(2) { animation-delay: .4s; } .gnb a:nth-child(3) { animation-delay: .6s; } .gnb a:nth-child(4) { animation-delay: .8s; } .gnb a:nth-child(5) { animation-delay: 1s; } @keyframes show1 { 0% { opacity: 0; margin-left: -150px; } 100% { opacity: 1; margin-left: 0; } } @keyframes show2 { 0% { opacity: 0; transform: translateX(150px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes gnb { 0% { opacity: 0; transform: translate(-20px, -20px) } 100% { opacity: 1; transform: translate(0, 0) } } </style> </head> <body> <div class="container"> <div class="video-frame"> <video src="images/video-sky.mp4" autoplay muted loop poster="images/video-landing-preview.png"></video> </div> <div class="logo"> <img src="images/logo.png"> </div> <div class="header"> <h1> <span>Wave Ocean</span> The World's Ocean </h1> <p> The Atlantic Ocean is situated between the Americas and European/African continents. Atlantic Ocean is the second largest and saltiest ocean in the world. It resembles an S-shape between the Americas, Europe and Africa. “Atlantic” originated from the Greek god “Atlas” who carried the sky for eternity. </p> <a class="btn-book" href="#1">Book Now</a> <a class="btn-learn" href="#2">Learn More</a> </div> <div class="anniversary"> <em>Anniversary</em><span>60</span> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> <div class="modal-gnb"> <div class="gnb"> <a href="#1" data-txt="Attractions">Attractions</a> <a href="#2" data-txt="Hotels & Spa">Hotels & Spa</a> <a href="#3" data-txt="Shop & Dine">Shop & Dine</a> <a href="#4" data-txt="Celebrate">Celebrate</a> <a href="#5" data-txt="Promotions">Promotions</a> </div> </div> <div class="audio"> <audio id="ado" src="images/piano-bgm.mp3" autoplay loop></audio> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(".trigger").click(function() { $(this).toggleClass('active') $(".anniversary").toggleClass('active') $(".logo").toggleClass('active') $(".modal-gnb").fadeToggle() }) var ado = document.getElementById('ado'); ado.volume = .3; </script> </body> </html>
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
배웠던 거랑 접목시켜서 해봤는데 왜 안되는지 궁금해서 질문합니다.ㅠㅠ
먼저, 궁금한 점은 .modal-gnb를 클릭한 후, <a>태그 :hover 했을 때 왼쪽->오른쪽으로 crimson 색이 width: 0 -> width: 100%으로 완전히 다 채워지길 바라는데 부분만 되고 완전히 crimson색이 채워지지가 않습니다. [Part 04] 비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(모달창 제이쿼리 상호작용) 지금 듣고 있는 이 수업과 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) > 마우스 올리면 배경이미지 변경하기 with jQuery 바로 이 전의 강의의 학습한 걸 접목시키고 싶어서 해봤는데 깔끔하게 안되네요.ㅠㅠ 이렇게 왕창 효과 넣어서 하는게 욕심인 건 알지만, 그래도 학습할 때 해보고 싶어서 해봤는데 아무래도 선생님의 도움이 필요할 거 같아요...ㅠㅠ <html> / <css> 소스가 길어서 주소로 올립니다.! http://yoonk2021.dothome.co.kr/VScode/html/videobg.html 검사-> Sources 들어가서 복사하셔서 한번 봐주세요 선생님ㅠㅠ 늘 감사합니다. +)참고로, 오디오는 아직 수업을 듣지 않은 상태여서 없습니다.!
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문있습니다.!
탭 메뉴 콘텐츠(스타일 01) with JQUERY 수업을 듣고 얼마가지 않아서 또 질문을 하게 됐는데, 선생님 귀찮게해서 죄송합니다ㅠㅠ 먼저, 궁금한 점이 2가지! 있습니다.! <html> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="css/ex9.css"> </head> <body> <section> <div class="heading"> <h1><span>코딩웍스</span>, 프론트엔드 퍼블리셔 취업을 위한 실전 퍼블리싱 강좌</h1> <input type="text" placeholder="What are you looking for?"> </div> <div class="tab-inner"> <ul class="btn"> <li data-alt="tab1" class="active">HTML5</li> <li data-alt="tab2">CSS3</li> <li data-alt="tab3">JQUERY</li> <li data-alt="tab4">JAVASCRIPT</li> <li data-alt="tab5">CSS FRAMEWORKS</li> </ul> <div class="tabs"> <div id="tab1" class="active"> <h2>HTML5</h2> <img src="../images/platform-logo-01.png" alt=""> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae nisi ducimus, voluptates, similique at dignissimos optio culpa ut, provident harum quaerat. Quis, nisi repellat libero voluptas nesciunt ex, id pariatur illum esse quos soluta repellendus, asperiores possimus eos. Officiis incidunt ipsa sint tempora quidem aut unde voluptas fugit, cum quod aspernatur repudiandae temporibus dignissimos illo sit mollitia! Debitis corrupti quos obcaecati rem nihil, ducimus eius dignissimos amet! Ab, veniam.</p> </div> <div id="tab2"> <h2>CSS3</h2> <img src="../images/platform-logo-02.png" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat itaque maiores voluptatum! Earum error nulla suscipit dicta tenetur explicabo velit at, et optio esse temporibus facere hic quas sunt nostrum perspiciatis sed debitis excepturi sit incidunt aperiam rem molestiae fuga ipsa. Numquam provident exercitationem maiores cumque, at ab voluptatum quas, ullam unde architecto fugit tempora. Commodi iure hic repudiandae blanditiis consequatur ex modi cupiditate, temporibus sapiente itaque, nam ipsa eius ducimus magni! Facere facilis fugit natus architecto sit incidunt a.</p> </div> <div id="tab3"> <h2>JQUERY</h2> <img src="../images/platform-logo-03.png" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, consequuntur aliquid? Tempore quos dolore rerum culpa natus architecto velit possimus qui animi placeat! Deleniti accusamus amet quae, asperiores minima minus deserunt odit quisquam corporis harum quibusdam maiores exercitationem veniam eius nemo tenetur excepturi ex laborum, qui repellat veritatis. Id ex rem, pariatur tenetur veniam explicabo voluptate inventore fugit, ut, nisi ipsa voluptates quas perspiciatis? Quo vitae libero ipsa consequatur cumque velit! Dolor sed amet quibusdam esse explicabo similique laudantium fugit, earum deserunt unde vitae, sint doloribus fuga natus iure laborum?</p> </div> <div id="tab4"> <h2>JAVASCRIPT</h2> <img src="../images/platform-logo-04.png" alt=""> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo fugit laboriosam quae nobis ipsum possimus, consequuntur provident aut magni dolorum ea voluptatem illum neque dolore error quisquam architecto sit quos inventore sed a nesciunt consequatur impedit. Ullam expedita rem aut in eveniet et possimus error cupiditate, dolorum quidem, voluptates consectetur tempore sed ut deserunt, tempora quos vel odit atque eum consequatur? Similique sunt maxime blanditiis, natus sequi animi exercitationem consectetur accusantium nulla praesentium? Odit eveniet quis vitae, voluptas error tempore impedit praesentium fugit amet ducimus neque culpa iste delectus ipsam quod et sint? Perferendis est totam deserunt ratione, omnis soluta.</p> </div> <div id="tab5"> <h2>CSS FRAMEWORKS</h2> <img src="../images/platform-logo-05.png" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque laboriosam id earum odio alias nam quam magnam omnis repudiandae. Neque fuga perferendis unde molestias tempora quae quaerat dolorem voluptates eligendi sequi voluptatem ut in rem nisi, illo temporibus itaque eaque nam repellat aliquid illum! Omnis voluptatem sapiente, nulla animi voluptates itaque! Animi aspernatur, enim molestias repellat accusantium eveniet aperiam nulla iste ex eaque iusto error qui quibusdam minima nemo eos veritatis saepe nobis impedit explicabo laborum aliquam quasi excepturi soluta. Rerum perferendis reprehenderit molestiae consectetur, aliquid veniam, possimus, est unde omnis voluptate natus! Incidunt voluptatem atque sapiente molestiae nesciunt vel nihil eveniet, molestias veniam eaque.</p> </div> </div> </div> </section> <script> $('.btn li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') var tab = $(this).attr('data-alt') $('.tabs div').removeClass('active') $('#' + tab).addClass('active') }) </script> </body> </html> <css> /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* /* Fontawesome 4.7 */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; /* color: #fff; */ line-height: 1.5em; font-weight: 300; margin: 0; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } a { color: #222; text-decoration: none; /* font-weight: 700; */ } section { width: 900px; } /* Heading */ .heading {} .heading h1 { font-size: 28px; text-align: center; } .heading span { color:crimson; } .heading input[type=text] { width: 100%; padding: 10px; background-color: #fff; outline: none; box-sizing: border-box; border: none; border-bottom: 2px solid #ddd; background: #fff url(../images/search-icon.png) no-repeat center left 10px; background-size: 23px; padding-left: 40px; } .heading input[type=text]::placeholder { transition: 0.3s; font-style: italic; } .heading input[type=text]:focus::placeholder { opacity: 0; visibility: hidden; } /* Tab list */ .tab-inner { margin-top: 30px; } .btn { list-style: none; padding: 0; margin: 0; overflow: hidden; margin-left: 10px; } .btn li { float: left; width: 120px; text-align: center; cursor: pointer; background-color: #eee; border-right: 1px solid #ddd; padding: 5px; border-top: 2px solid transparent; transition: 0.5s; } .btn li:last-child { width: 170px; border-right: none; } .btn li:hover, .btn li.active { background-color: #fff; border-top: 2px solid crimson; } .tabs { } .tabs div { background-color: #fff; padding: 20px; box-sizing: border-box; /* height: 100%; 을 줘도 html탭메뉴 img가 background에 넘어가요. */ display: none; } .tabs div.active { display: block; } /* Tab Content*/ .tabs div h2 { text-align: center; } .tabs div img { float: left; margin-right: 15px; } .tabs div p { overflow: hidden; } <첫번째!> CSS에 { section - width: 값을 조금 더 줬을 경우, .tabs div p태그 안 내용의 글자 수를 다르게 했는데 HTML5 메뉴가 액티브됐을 때 이미지가 배경을 넘어갑니다. } 그 글자 수에 따라 자동으로 이미지까지 꽉 차게 들어오면서 변경이 됐으면 좋겠는데 그냥 모든 탭메뉴 height 값을 넣어보고 알맞은 px값을 줄 수 밖에 없을까요? <두번째!> 똑같은 html코드에서 CSS만 변경해서 넣었습니다.! /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* /* Fontawesome 4.7 */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; /* color: #fff; */ line-height: 1.5em; font-weight: 300; margin: 0; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } a { color: #222; text-decoration: none; /* font-weight: 700; */ } section { width: 900px; } /* Heading */ .heading {} .heading h1 { font-size: 28px; text-align: center; } .heading span { color:crimson; } .heading input[type=text] { width: 100%; padding: 10px; background-color: #fff; outline: none; box-sizing: border-box; border: none; border-bottom: 2px solid #ddd; background: #fff url(../images/search-icon.png) no-repeat center left 10px; background-size: 23px; padding-left: 40px; } .heading input[type=text]::placeholder { transition: 0.3s; font-style: italic; } .heading input[type=text]:focus::placeholder { opacity: 0; visibility: hidden; } /* Tab list */ .tab-inner { margin-top: 30px; } .btn { list-style: none; padding: 0; margin: 0; overflow: hidden; margin-left: 10px; } .btn li { float: left; width: 120px; text-align: center; cursor: pointer; background-color: #eee; border-right: 1px solid #ddd; padding: 5px; border-top: 2px solid transparent; transition: 0.5s; } .btn li:last-child { width: 170px; border-right: none; } .btn li:hover, .btn li.active { background-color: #fff; border-top: 2px solid crimson; } .tabs { position: relative; /* position을 줘봤습니다.! */ } .tabs div { background-color: #fff; padding: 20px; box-sizing: border-box; display: none; position: absolute; /* position을 줘봤습니다.! */ } .tabs div.active { display: block; } /* Tab Content*/ .tabs div h2 { text-align: center; } .tabs div img { float: left; margin-right: 15px; } .tabs div p { overflow: hidden; } <두번째!> 제가 생각을 해보고 .tabs 부모요소에 position: relative;를 넣고 그 자식요소인 .tabs div 에 position: absolute; 를 넣었는데 이미지는 이미지대로 배경 안에 알맞게 들어오는데 '세로-가로 가운데정렬' 한 전체 디자인이 밑으로 내려가서 한 가운데 오지 않는데 여기서 어떻게 해야하나요? (position 넣는게 아예 틀렸을 수도 있겠지만, 이렇게 해도 되는지 안되는지조차 아직 감이 덜 잡혀서 여쭤봅니다ㅠㅠ)
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠(스타일 01) with JQUERY 수업을 듣고 질문남깁니다.!
안녕하세요.! 이 강의를 듣고, [한걸음 더] 로 .content에 transition을 주는 방법을 설명해주셨는데 그걸 보고 해봤는데 이게 transition효과가, fadeOut()/fadeIn()효과가 걸린게 맞는지 확인차 여쭤보고 싶어서 이렇게 질문을 남깁니다. CSS에 transition 값을 줘도/ script에 fadeOut과 In에 (숫자 또는 'fast' 'slow') 줘도 효과가 적용이 된건지 모르겠어요ㅠㅠ <html> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="css/ex7.css"> </head> <body> <div class="review-section"> <h1><span>CodingWorks</span> Publishing Online Class with Inflearn</h1> <div class="review-pic"> <img class="active" src="../images/face-01.jpg" data-alt="tab1"> <img src="../images/face-02.jpg" data-alt="tab2"> <img src="../images/face-03.jpg" data-alt="tab3"> <img src="../images/face-04.jpg" data-alt="tab4"> </div> <div class="review"> <div class="content active" id="tab1"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla dolorem alias facere amet quae, ducimus, eum fuga hic necessitatibus perferendis, officiis saepe molestiae harum quas unde cumque ad reprehenderit perspiciatis maxime suscipit velit est architecto nobis. Doloremque vitae rerum provident mollitia, ut explicabo illum repellat magni aut veritatis. Facere, magni?</p> <p> Sally, Web Desginer </p> </div> <div class="content" id="tab2"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto a tempora porro fugit ipsum. Fugit, a minima doloremque incidunt cum odio quidem suscipit provident impedit soluta aspernatur recusandae magnam saepe animi iusto voluptate ipsa, qui voluptatum, sed tenetur! Enim quasi totam inventore nam optio magnam, nesciunt impedit reprehenderit possimus. Vero saepe fugit adipisci eveniet deserunt.</p> <p> Amy, Graphic Designer </p> </div> <div class="content" id="tab3"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim, quia pariatur ipsum unde eligendi reprehenderit a vero necessitatibus nostrum consequuntur, praesentium quae id. Deleniti repellendus similique vel, quas facilis neque ut esse aut nihil? Repellendus nihil praesentium accusantium. Distinctio iste laudantium vero dicta quas? Ducimus quisquam soluta excepturi quasi eligendi, veniam quaerat dolor at placeat id ipsa fuga minus quo!</p> <p> Jung Ho, Developer </p> </div> <div class="content" id="tab4"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, necessitatibus error! Perferendis cum alias quia itaque fuga repellat impedit deleniti aliquid sapiente incidunt voluptates sed praesentium, accusamus iste sequi deserunt? Iste suscipit sunt dolorem necessitatibus expedita ut, quo consequuntur accusantium culpa fugiat numquam nisi ratione nobis quaerat dolorum sequi obcaecati omnis, voluptas rerum a, commodi corrupti nam repudiandae. Est ut nemo cumque iste voluptates provident dolore consequuntur sint ex id!</p> <p> Chris, Printing Desinger </p> </div> </div> </div> <script> $('.review-pic img').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.review .content').removeClass('active') $('#' + $(this).attr('data-alt')).addClass('active') $('.review .content').faedOut(500) $('#'+ $(this).attr('data-alt')).fadeIn(500) }) </script> </body> </html> <CSS> /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); body { font-family: 'Raleway', sans-serif; /* color: #fff; */ line-height: 1.5em; font-weight: 300; margin: 0; background: #eee; display: flex; justify-content: center; align-items: center; height: 100vh; } a { color: #222; text-decoration: none; /* font-weight: 700; */ } .review-section { width: 800px; text-align: center; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .review-section h1 { font-size: 25px; margin-bottom: 30px; } .review-section h1 span { color: crimson; } .review-pic img { width: 100px; border-radius: 50%; filter: grayscale(1); margin: 5px; transition: 0.3s; cursor: pointer; } .review-pic img.active { border-radius: 5px; filter: none; } .review { position: relative; min-height: 180px; } .review .content { display: none; position: absolute; transition: 0.5s; } .review .content.active { display: block; } .review .content p:nth-child(2) { font-weight: bold; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 background-attachment: fixed를 넣은후 버튼을 클릭할때
1 2 3 4 이렇게 순차적으로 누르면 괜찮은데 1 4 혹은 3 1 이런 순서로 누르면 (두다리 이상) 부드럽게 넘어가지 않고 렉걸린듯이 넘어가는데 이부분은 어떻게 해결해야할까요? 그리고 선생님 혹시 글씨효과 아래에서 위로 채우는 건 불가능할까요? 라는 질문글 다시 수정해서 html도 올렸답니다!