css모음

1. 스크롤 가능하게끔 해줌 overflow-y: auto;

• format_list_bulleted Programming/React
• · 2024. 3. 10.
• textsms

글씨 크기 조절 자동화 (휴대폰 사이즈일 경우) / rem이란?

vars.scss 에서 설정한 폰트 사이즈는 16px 이며, 화면이 800px보다 작을 경우(= 휴대폰 사이즈일경우) 14px로 바뀌게 되어있다. header.scss에서 폰트 사이즈를 16px로 설정해 놓으면 vars.scss와 연결되어 따로 설정해두지 않더라도 휴대폰으로 접속시 14px으로 폰트 사이즈가 변경된다. 16px는 1rem이다. rem은 root + em 으로 root의 폰트 사이즈에 의해 결정되기 때문에 vars.scss에 저장해둔 폰트사이즈가 1rem으로 적용되는 것이다.

• format_list_bulleted Programming/React
• · 2024. 3. 10.
• textsms

react 아이콘 불러오기

https://react-icons.github.io/react-icons/ React Icons react-icons.github.io 1. 해당 사이트에 들어가서 2. 마음에 드는 아이콘을 클릭한 후에 코드 두개 다 복사 3. import 코드는 맨 위에, 아래 코드는 내가 원하는 위치에 넣어준다.

• format_list_bulleted Programming/React
• · 2024. 3. 10.
• textsms

react 컴포넌트 자동완성 생성 단축키 (VS code에서 rfce가 webstortm에서는?)

VS Code에서 rafce를 입력하면 리액트 기본문법이 나온다 그렇다면 Webstorm에서는 이 단축키는 무엇일까! 바로 rcc이다. rcc 이외에 자주 쓰일 것 같은 단축키들이다. Trigger Content rcc react class component rrc react class component with react-redux connect rccp react class component with Proptypes after the class rcfc react class component skeleton that contains all the lifecycle methods rsc react stateless component skeleton rscp react tateless component..

• format_list_bulleted Programming/React
• · 2024. 3. 9.
• textsms

01 리액트 웹 프로젝트 : 환경설정 세팅하기

1. Node.js 설치 (https://nodejs.org/en) 2. Node.js 버전 확인 노드 -v 3. IDE 통합 개발 환경 설치하기 - IDE(통합 개발 환경)- 종류: VS Code( https://code.visualstudio.com/download ), Webstorm( https://www.jetbrains.com/webstorm/ ) 4. 리액트 파일 만들기 4-1. terminal에서 리액트 프로젝트 폴더부터 파일까지 만들기 위치 : 폴더(문서) -> 폴더(React) -> 프로젝트 React 폴더 우클릭해서 "폴더에서 새 터미널 열기" 클릭 터미널에서 명령어 입력하여 프로젝트 폴더,파일 생성 npx create-react-app 프로젝트폴더명 4-2. 프로젝트 폴더를 만들고 ..

• format_list_bulleted Programming/React
• · 2024. 3. 7.
• textsms

버튼 누르면 알림권한 요청

// turtle_co/src/App.js import React, { useEffect, useState } from 'react'; import {Routes, Route, Link} from "react-router-dom"; import './App.css'; function App() { // 맨 밑에 드래그 const [notificationPermission, setNotificationPermission] = useState(null); // Notification 권한 요청 const requestNotificationPermission = () => { Notification.requestPermission().then(permission => { setNotificationPermis..

• format_list_bulleted Programming/React
• · 2024. 2. 13.
• textsms