wa_ter_ve

🚩 ‘활동 기록’ 글자 아래 점선과의 간격 늘리기→ mt 조절 해봤지만, 적용이 안 됨.지금은 border가 h2 자체에 있어서 글자와 선 사이에 여백이 안 생기게 되어 있음🚀 해결 방안pb(padding-bottom) 를 조절해 주면 됨! 🚩 프로필 부분이랑 활동기록 부분 사이에 여백을 조금 더 늘리기 ✅ 방법 1: pl-10 → 더 큰 값으로활동기록 부분쪽 여백을 늘리고 싶으면:↓pl-16 = 4rem = 64px(원래는 2.5rem = 40px이었음 ✅ 방법 2: 프로필 섹션에 오른쪽 마진 추가↓mr-6 = 1.5rem = 24pxleft-5와 함께 쓰면 더 자연스럽게 간격 조절 가능 max-w-screen-xl: 화면의 최대 너비 설정 (화면이 너무 좁아지면 main 콘텐츠가 더 이상 줄..

✅ 방법: 로컬 전체 초기화 후 다시 커밋깃에 파일들을 업로드 한 게 기록이 다 남는 게 지저분해서 깔끔하게 다시 올리고 싶을 때(이전 커밋 다 날리고 새로운 히스토리 생성)  1️⃣ Git 기록 초기화 $ rm -rf .git2️⃣ 다시 Git 초기화 $ git init3️⃣ 원격 레포 연결 $ git remote add origin https://github.com/~~4️⃣ 파일 추가 및 커밋 $ git add . $ git commit -m "커밋  메시지"5️⃣ 강제 푸시 (이전 기록 삭제) $ git push -f origin main

📌 카카오맵 API 불러오기리액트 카카오맵 패키지 설치$ npm install react-kakao-maps-sd public > index.html카카오 api 스크립트 추가 다운 받은 패키지 import 코드 추가jsx에서 사용법// MainMap.jsximport { Map, MapMarker } from "react-kakao-maps-sdk";// Mainpage.jsximport MainMap from "../components/MainMap";...... 🔐 YOUR_APP_KEY 부분 ← 카카오 개발자 콘솔에서 발급 받은 JavaScript 키로 변경https://developers.kakao.com/카카오 계정 로그인내 어플리케이션 추가 → 생성한 앱 상단에 앱 키 탭 클릭 → Jav..

📌Tailwind CSS 기본 문법 정리 기본 레이아웃 클래스flex : Flexbox 컨테이너화items-center : 세로축 중앙 정렬justify-center : 가로축 중앙 정렬min-h-screen : 높이를 화면 전체(100vh)로 설정w-full : 너비 100%max-w-md : 최대 너비 제한 (md = 28rem = 448px)mx-auto : 좌우 마진을 auto로 → 가운데 정렬할 때 자주 사용p-10 : padding 2.5rem (40px)🧱Margin (바깥 여백)m : 네 방향 모두 마진mt, mb, ml, mr : 위, 아래, 왼쪽, 오른쪽 마진mx : 좌우 마진my : 상하 마진mt-0margin-top: 0pxmt-2margin-top: 0.5rem (8px)mb-..

📌 리액트 바이트 프로젝트 생성$ npm create vite@latest capstonepj --template react→ react → javascipt 옵션 선택 🤔 css 선택 기준 기준 Tailwind CSS Styled Components 빠른 UI 구현✅ 매우 빠름❌ 클래스 관리 필요반응형 디자인✅ 간편 (sm, md, lg 등)❌ 미디어쿼리 직접 작성동적 스타일링❌ 클래스 조합이 필요✅ props로 쉽게 조절 가능스타일 재사용✅ 컴포넌트 조합으로 가능✅ styled-components 활용CSS 코드 관리❌ 클래스가 길어질 수 있음✅ JS 내에서 깔끔하게 관리✔️ 빠르고 간편한 UI 개발을 위해 Tailwind CSS를 사용하다가,필요한 디자인이 요구되면 Styled Compo..