안녕하세요

리액트 앱 실행 순서입니다. 1. cd 로 react를 시작할 경로로 이동합니다. 2. npx create-react-app . react app을 만듭니다. 3. App.js 에서 작성한 코드들을 index.js에서 import하고, index.js에서 작성한 코드들이 index.html(root)로 갑니다. 4. public의 index.html 과 src의 App.js, index.js 만 남겨줍니다. 5. npm start를 입력하여 react app이 정상적으로 구동하는지 확인합니다. 6. 리액트에서는 querySelector 선택자를 사용하지 않고, 태그에 직접 기능을 넣습니다. {num} { num = num + 1; console.log(num); }} >click 7. react에서는 s..

배너에 있는 메뉴를 다단으로 열 때는 호버이벤트를 주기 보다는 클릭이벤트로 펼쳤다 닫을 수 있도록 합니다. 홈페이지에는 가능한 스크롤바가 없어야 합니다. 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..