Dev다D

포트폴리오 IV: 막대기 애니메이션 'About' 섹션에 나의 스킬 여섯 개가 나열되어 있습니다. 'About' 섹션에 다다랐을 때 해당 스킬의 퍼센티지(%)만큼 파란 막대기가 서서히 색칠되도록 해주세요. 참고로 회색 막대기는 클래스 이름이 'bar'인 요소이고, 그 안에 클래스 이름이 'inner-bar'인 요소가 파란 막대기입니다. function scrollHandler() { if ($(window).scrollTop() >= $('.about').position().top) { $('.menu-right button').css('color', '#4a4a4a'); $('.skill').each(function () { var skill = $(this); var percentage = skill..

포트폴리오 III: 멋있게 나타내기 각 섹션의 내용은 'vertical-center'라는 클래스 이름의 'div'로 둘러싸여 있습니다. CSS 파일을 살펴보시면 'vertical-center'에는 이런 스타일이 적용되어 있는데요. .vertical-center { opacity: 0; position: relative; top: 100px; } 'opacity'가 '0' 으로 되어 있기 때문에 현재는 내용이 보이지 않는 거죠. 그리고 'top'이 '100px'로 되어 있어서 살짝 아래쪽에 위치하고 있습니다. 스크롤을 해서 각 섹션에 다다르면 해당 섹션의 'vertical-center' 요소가 보이면서 정가운데로 1초 이내에 서서히 올라오도록 만들어주세요. ('opacity'가 '1'까지, 'top'이 '..

포트폴리오 II: 섹션 스크롤 이제 메뉴의 색상은 잘 나오는데, 클릭하면 동작을 하지 않습니다. 네비게이션바의 'About' 메뉴를 클릭하면 'about' 섹션으로 스크롤하도록, 그리고 'Contact' 메뉴를 클릭하면 'contact' 섹션으로 스크롤하도록 코드를 작성해주세요. 스크롤은 1초 안에 부드럽게 움직여야 합니다. function scrollHandler() { if ($(window).scrollTop() >= $('.about').position().top) { $('.menu-right button').css('color', '#4a4a4a'); } else { $('.menu-right button').css('color', 'white') } } $(window).on('scroll'..

포트폴리오 I: 메뉴 색 바꾸기 첫 번째로 메뉴의 폰트 색상을 바꿔봅시다. 포트폴리오 사이트에는 섹션이 세 개 있습니다. 'header' 섹션 'about' 섹션 'contact' 섹션 'header' 섹션에 있을 때는 네비게이션바의 메뉴가 흰색으로 설정되어 있는데요. 'about' 섹션과 'contact' 섹션으로 이동하면 메뉴가 잘 보이도록 폰트 색상이 #4A4A4A로 바꿔주세요. function scrollHandler() { if ($(window).scrollTop() >= $('.about').position().top) { $('.menu-right button').css('color', '#4a4a4a'); } else { $('.menu-right button').css('color', ..

음악 스트리밍 사이트 III HTML 파일을 보시면 'to-top-btn'이라는 클래스의 버튼이 있습니다. .to-top-btn { display: none; } 하지만 현재로서는 버튼이 display: none;으로 숨어 있기 때문에 보이지 않습니다. 사용자가 스크롤을 해서 사이트의 맨 밑으로 내려가면 이 버튼이 서서히 나타나도록 해주세요. 이 버튼을 누르면 다시 맨 위로 스크롤되면서 버튼은 다시 사라집니다. function scrollHandler() { var windowBottom = $(window).scrollTop() + $(window).height(); // each문 사용 $('.playlist').each(function() { var playlist = $(this); var pla..

음악 스트리밍 사이트 I 스크롤을 하면서 플레이리스트가 스르륵 나타나는 효과를 만들어봅시다. 우선 'playlist' 클래스에 적용된 스타일을 살펴봅시다. .playlist { opacity: 0; } 'playlist'는 처음에 opacity가 0이기 때문에 보이지 않는데요. 'playlist'가 브라우저에 반 이상 걸치면 opacity가 서서히 1로 바뀌어야 합니다. 그 과정에서 반복을 해야 하는 일이 있으면, each 대신 for문을 사용해주세요. each는 다음 과제에서 사용할 것입니다. 인기차트 추천음악 뮤직비디오 회원가입 로그인 인기 검색어 아이유 (IU) 방탄소년단 (BTS) 레드벨벳 아이콘 (iKON) 멜로망스 다비치 윤딴딴 수지 김동률 폴킴 수면 꿀잠 자게 해줄 잔잔한 음악 플레이리스트 ..

홀짝 each 반복문을 사용해서 '짝수', '홀수' 버튼을 완성해주세요. 참고로, .card라는 클래스를 가지고 있는 태그를 파란색으로 바꿔주려면 .selected라는 클래스를 추가해주면 됩니다. css/styles.css 파일에 정의된 코드를 참고하세요. /* 선택된 카드 */ .card.selected { background: #3E50B4; /* 파란색 */ color: white; } 짝수와 홀수 선택하기 13 3 14 7 22 38 17 15 11 10 22 31 32 41 10 85 17 82 70 5 53 7 4 29 짝수 홀수 * { box-sizing: border-box; } body { margin: 0; min-width: 960px; background: #eee; font-fam..

Furniture Shop '가구계의 아마존', Furniture Shop이 블랙 프라이데이를 맞아 할인 쿠폰을 제공하려고 합니다. '쿠폰 받기' 버튼을 누르면 팝업이 1초 이내에 부드럽게 나타나고, '확인' 버튼 또는 키보드의 esc 키를 누르면 팝업이 1초 이내에 부드럽게 없어져야 합니다. SHOP CART LOGIN 블랙 프라이데이 슈퍼 세일 최대 50% 할인의 혜택을 받아보세요! 쿠폰 받기 다운 완료! 내 쿠폰함에서 확인하세요! 확인 * { box-sizing: border-box; } body { margin: 0; min-width: 992px; font-family: "Helvetica"; } /* navbar */ .navbar { height: 75px; padding-left: 30px..

깨깨오톡 주어진 HTML/CSS 코드를 분석한 후, 자바스크립트로 아래의 조건들을 따라서 기능을 추가해주세요: 메시지를 입력하고 '전송' 버튼을 클릭하면 새로운 말풍선이 생깁니다. 친구가 보낸 말풍선은 .friend-bubble 클래스를 갖고 있지만, 내가 보낸 말풍선은 .my-bubble 클래스를 갖고 있습니다. 메시지가 전송되면 는 다시 빈 칸이 됩니다. 가 비어 있으면 메시지는 보내지지 않습니다. siri 잘 지내? 자니? 전송 * { box-sizing: border-box; } body { background-image: url('background.jpg'); font-family: 'Noto Sans KR', sans-serif; } .chat-container { margin: 60px a..

청기 백기 II 저번에는 내려간 깃발이 다시 올라오지 않았는데, 이번에는 다시 깃발이 올라오도록 써주세요. 그리고 재미를 조금 더하기 위해, 깃발이 1초 뒤에 올라오도록 써줄 텐데요. setTimeout 함수를 사용하면 동작을 몇 초 후에 실행되도록 설정할 수 있습니다. // someFunction 함수가 1초 후 실행 setTimeout(someFunction, 1000); // someFunction 함수가 3.5초 후 실행 setTimeout(someFunction, 3500); 청기 내려 청기 내리지 말고 백기 내려 점선 청기 내려 * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; text-align: cen..