라이브러리/React.js
-
[React.js 리액트] 라우터(Link 태그) 폰트 색상 변경 방법라이브러리/React.js 2021. 9. 7. 02:23
메인페이지로 기존에는 이 방식으로하고 white_font에서 글씨 색상을 white로 지정해줬는데 글씨 색상이 바뀌지 않아서 검색을 많이 해봤는데 해결을 못 했어요 그래서 다른 작업부터 하고있다가 두 태그의 위치를 바꿨는데 해결이 되는 작업이 있어서 Link에도 적용해봤더니 해결이 되더라구요!! 여러분께도 해결방법 공유해드릴게요! 메인페이지로 이렇게 태그의 위치를 바꾸면 글씨 색상이 흰색으로 잘 적용되는 것을 확인하실 수 있을거에요!
-
[React.js 리액트] img 이미지 추가 및 크기 조정라이브러리/React.js 2021. 8. 24. 15:05
리액트 이미지 추가하는 방법 1. 이미지 다운받아 파일 저장 2. js 파일에서 이미지 경로 import 3. return에서 img 태그 작성하기 + 4. 이미지 크기 조정은 css 이용 이미지를 다운받아 파일 저장 저는 heart.png 이미지를 src파일 아래에 저장했고, 이 이미지를 웹 페이지에 띄울거에요. js 파일에서 이미지 경로 import js 파일의 최 상단에 사진을 import 하고 이름은 heart로 지정해줬어요 그리고 지정한 heart를 이미지 태그의 { } 중괄호 안에 넣어줍니다. 여기까지만 해도 이미지가 뜰거에요 근데 다운받은 이미지의 크기가 엄청 크거나 작을 땐 크기 조정이 필요하겠죠?! 이미지 크기 조정하기 css 파일에서 사진의 크기를 height 로 지정해주고 js 파일에..
-
[React.js 리액트] 리액트 시작하기_프로젝트 생성라이브러리/React.js 2021. 8. 19. 22:17
폴더 생성 및 폴더 열기 폴더를 하나 생성하고 visual studio code에서 파일>폴더 열기 후 생성한 폴더를 선택하여 열어줍니다. 앱 생성 npm install -g create-react-app 우선 위 명령어를 통해 리액트 앱을 만들 수 있게 해주고, npx create-react-app [앱명]을 입력합니다. 저는 blog라는 앱을 생성했어요! 앱 폴더 열기 아까와 같은 방식으로 파일>폴더 열기를 통해 생성한 앱을 열어줍니다. 실행시키기 앱이 열렸으면 터미널이 생성한 앱 폴더로 이동한 것을 확인하실 수 있어요. 이 상태에서 터미널에 npm start 를 입력하면 웹 브라우저가 열리면서 오른쪽 사진과 같은 화면이 뜹니다. 폴더 간단 설명 여기서 가장 중요한 파일은 이 세가지 라고 볼 수 있어..