App.js3 React(7) img 넣는법 목차 이미지넣는법 - App.css에 넣는법 - App.js에서 src폴더의 이미지 넣는법 - public폴더에서 이미지 넣는법 이미지 넣는법 App.css에 넣는법 src폴더에 사진파일 justdo.jpg 하나 넣었다고 하자. 이를 css 폴더에서 불러오려면, 1. App.js에서 여느태그를 열고(여기에서는 로 하겠다) className을 지정해주고, 2. App.css에서 호출하여서 사용하면된다. 이때 사용되는 코드는 background-image: url(이미지경로) 이다. App.js(html)에서 src폴더의 이미지 넣는법 이미지에 대한 import를 작성한 다음에, 이미지를 넣으려는 태그에, 작성한 변수를 넣으면 된다. 코드는 이러하다. *** background-image: url('./im.. 2023. 7. 1. React(3) 컴포넌트로 동적인 UI 만들기(삼항연산식을 곁들인) 1. 컴포넌트에 대해 - 컴포넌트란? - 컴포넌트 사용법 - 갑자기 든 의문점 2. 동적인 UI 만들기 - 삼항연산식 글을 누르면 상세페이지(모달창)가 뜨게끔 하려고 한다! (완전히 페이지가 전환되는 것은 후에, router를 배우게 되면 할 것임) ※ 팝업창 VS 모달창 - 팝업창 : 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것을 말한다. - 모달창 : 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다 컴포넌트를 배운다면, 처음보는 사람도, 이라고 호출되는 것을 보고, "아, 모달창이구나!" 하며, 쉽게 알 수 있으니, 배워보도록 하자! 컴포넌트에 대해 🤷♂️ 컴포넌트란 ? 리액트로 만들어진 앱을 이루는 최소한의 단위로서, 보통 리액트로 만든 .. 2023. 6. 14. React(2) 리액트 state & onClick 사용법 (reference data type을 곁들인) 목차 1. 기본사용법 2. state사용법 3. onClick 사용법 4. state변경하는 방법 기본 사용법 자, Visual Studio Code에 React를 작성해보자! ※ 폴더 설명 - node_modules 폴더 : 라이브러리 코드 보관함 - public 폴더 : htm파일이나 img파일 임시적으로 저장하고 싶을때, static파일 모아 놓는곳 - src 폴더 : 주로 우리가 코드 짜는곳 ※ 파일 설명 - src폴더에, App.js : 이 쪽에 코드를 짤것이다. 이것이 우리의 메인 페이지! - src폴더에, App.css : 이 쪽은, css와 동일하다! - "기본 홈페이지 틀인 index.html에, 우리가 다룰 App.js를 집어넣어 주세요" 라는 행동을 index.js가 해주고 있음 - .. 2023. 6. 10. 이전 1 다음
