리액트에서 클릭했을 때 페이지가 이동되는 기능을 라우트로 구현해보자Main.jsx 파일에서 -> Page1.jsx 파일로 이동한다고 가정,그 전에 App.js에서이렇게 라우트 경로를 지정해주고,Main.jsx에서는이렇게 하면 끝!
position 쓰기 (relative, absolute) 모달창 우측상단에 있는 'X모양 버튼'을 모달창 컨테이너 위에 겹치기 위해 이것저것 해보다가 쓰는 글 예시 사진 기준 삼고 싶은 요소(내 경우는 모달창 컨테이너)에는 움직일 요소(내경우는 x버튼)에는
검정색 컨테이너를 중앙 정렬하고 싶은데magin-top이 먹질 않는 상황.이럴 땐 부모속성(여기선 흰색 컨테이너)에 해주면 해결 됨
src/assets/img 폴더 안에 이미지들을 넣기근데 이렇게 하면매번 import 한 줄씩 쓰는 게 번거로움public/images 폴더 안에 이미지들을 넣기스타일드 컴포넌트에 백그라운드 이미지 url로 경로 적어주면 됨백그라운드 이미지 아니고 그냥 이미지는아마도
JavaScript에서 줄바꿈 하려면 아래와 같이 br태그 쓰면 된다.줄 바꿈을 한 번 더 해서 간격을 띄우고 싶을 때가 있는데, br태그가 두번 연속은 안 먹기 때문에이럴 땐 공백문자를 썼다.별개로 화면을 확대하거나 창의 크기를 줄일 때글씨들이 한글자씩 내려오지 않게
Main.jsx 페이지에서 LogoutButton을 누르면 Logout.jsx 모달 페이지가 뜨도록 만들기Main.jsx 페이지에서이렇게 해주고Logout.jsx에서는하면 된다
좋아요 버튼, 고정핀 버튼과 같이클릭 전후로 이미지가 바뀌도록 할 것이다.참고링크
3\*2 모양 만들고 싶으면부모 속성에3\*3 모양 만들고 싶으면수직 배치 하고 싶은데justify 쓰려면
참고링크1참고링크2
알다시피 한 파일 안에서 단어 검색하려면 Ctrl+F 하면 된다.전체 프로젝트에서 검색하려면 왼쪽 탭에 검색 아이콘 눌러도 되고,Ctrl+Shift+F 해도 됨.바꾸고 싶은 텍스트를 드래그 하고,Ctrl+Shift+L 하면 된다.이때 엉뚱한 것도 바뀔 수 있으니 주의해
textarea는 평소 쓰던 styled-components에서 div를 textarea로 바꿔주는 느낌이다.div가 이랬다면,textarea는 이렇다.placeholder 사용법이 스크롤바 구현할 때랑 비슷해서익숙했다.
클릭한 color가 적용되게 하려면 클릭한 image가 적용되게 하려면