목록전체 글 (529)
안녕하세요
3003 킹, 퀸, 룩, 비숍, 나이트, 폰 동혁이는 오래된 창고를 뒤지다가 낡은 체스판과 피스를 발견했다. 체스판의 먼지를 털어내고 걸레로 닦으니 그럭저럭 쓸만한 체스판이 되었다. 하지만, 검정색 피스는 모두 있었으나, 흰색 피스는 개수가 올바르지 않았다. 체스는 총 16개의 피스를 사용하며, 킹 1개, 퀸 1개, 룩 2개, 비숍 2개, 나이트 2개, 폰 8개로 구성되어 있다. 동혁이가 발견한 흰색 피스의 개수가 주어졌을 때, 몇 개를 더하거나 빼야 올바른 세트가 되는지 구하는 프로그램을 작성하시오. 첫째 줄에 동혁이가 찾은 흰색 킹, 퀸, 룩, 비숍, 나이트, 폰의 개수가 주어진다. 이 값은 0보다 크거나 같고 10보다 작거나 같은 정수이다. 0 1 2 2 2 7 첫째 줄에 입력에서 주어진 순서대로 ..
배너에 있는 메뉴를 다단으로 열 때는 호버이벤트를 주기 보다는 클릭이벤트로 펼쳤다 닫을 수 있도록 합니다. 홈페이지에는 가능한 스크롤바가 없어야 합니다. i 같은 inline을 버튼으로 만들어 쓸 때는 박스로 한 번 싸는 것이 좋습니다. 메인 슬로건 위치는 여러번 생각해 봅니다. 메뉴 창을 띄워 화면 전체를 덮었으면 스크롤이 되지 않도록 합니다. border-radious를 keyframes에 담아서 역동적으로 변하는 모양을 만들 수 있습니다.
헤더의 logo - menu - 추가 구조에서 menu를 가운데로 위치하는 가장 쉬운 방법은 logo와 puls의 사이즈를 같게 만들어 주는 것입니다. flex-wrap: wrap; 으로 배열을 자동으로 바뀌게 합니다. #Premium .container { flex-wrap: wrap; gap: 30px; } #Premium .container figure { position: relative; width: calc(50% - 15px); } border를 활용하여 라벨 모양을 쉽게 만들 수 있습니다. #Premium .container figure::after { content: ""; position: absolute; width: 150px; height: 0px; border-top: 20px ..
this는 화살표함수에서 적용되지 않습니다. currentTaget이 this와 비슷한 역할을 합니다. window.addEventListener("DOMContentLoaded", () => { const H1 = document.querySelector("h1"); H1.addEventListener("click", (e) => { e.currentTarget.style.color = `blue`; }); }); pagination에 클릭 기능 추가하는 옵션은 pagination 안에서 clickable: true, 입니다. pagination: { el: ".swiper-pagination", clickable: true, }, autoplay 기능은 다음과 같습니다. autoplay: { dela..