본문 바로가기
728x90
반응형

전체 글220

[React] 다운로드 없이 구글 폰트 적용하기 1. 구글폰트 사이트에서 적용하고 싶은 폰트를 담는다. 2. @import를 선택하고 @import url('주소');를 복사( 태그는 제외) 3. 리액트 CSS파일에 넣기 4. import 복사했던 아래에 있는 코드를 복사 5. css 파일에서 적용해주고자하는 곳에 가서 복붙! 2022. 11. 6.
[CSS] 태그 기본 스타일 초기화 - all속성 unset ● all 속성 - all: unset; - 태그의 기본 스타일 값을 초기화 시켜주는 속성 button{ all: unset; } 이렇게 기본 버튼 모양이 초기화되어, 텍스트만 남게된다. 따로따로 초기화 시켜주려면 ↓↓↓↓↓ ● textarea textarea{ /*기본스타일초기화*/ resize: none; border: none; overflow:hidden; } textarea:focus { outline: none; } ● ● ● ● ● 2022. 11. 6.
[React] 리액트 첫 시작할때 알아야 할 기본 지식(업데이트중) 1. html과 같은 마크업은 html 파일에서 하는 것이 아니라 App.js 파일 안에서 function App(){ return( 여기안에 작성한다. ) } 2. 모든 html은 return( ) 안에 작성되는데 한개의 div로 묶여야한다. function App(){ return( 안녕하세요. ) } 2022. 11. 3.
[React] 리액트에서 emmet 쓰는 법 / 리액트 단축키 적용하기 vs code에서 html 작업할때 사용했던 div.클래스명, div#클래스명 이런 emmet을 리액트에서는 사용이 안됨 -> 따로 설정해줘야함! 1. 파일 -> 기본 설정 -> 설정 클릭 *단축키 - Window : Ctrl + , - Mac : Command + , 2. 작업영역 탭 -> emmet -> setting.json 클릭 3. 열린 setting.json 파일에 아래 다음 줄을 추가 "emmet.includeLanguages": { "javascript": "javascriptreact" } * 핑크 대괄호 안에다 복붙하고 다른 코드가 있을 경우 콤마(,) 찍어주기! 4. 결과 짜잔~ [참고] https://eshwaren.medium.com/enable-emmet-support-for-j.. 2022. 10. 28.
[에러] React Error - 리액트 npm start 에러 났을때! 📖 에러 경위 ① npx create-react-app 새로 만들 파일명 으로 파일 만들고 바로 npm run start를 했는데 아래 사진과 같은 에러가 뜸 ② 구글에 npm start 에러라고 검색하여 나오는 해결법을 실행해봐도 같은 에러가 뜸 📌 에러 원인 npm start를 시작하는 파일경로가 틀렸음. 방법1) React PROJECT에서 pr1이라는 파일을 npx create-react-app로 만든 후에 다시 폴더열기로 들어가서 pr1을 열고 나서 npm run start를 해보니 잘 됨. 방법2) 폴더 안에 있는 폴더를 열고싶다면 오른쪽마우스를 클릭하여 통합 터미널에서 열기를 클릭하면 됨! 💡 결론 에러가 뜨면 겁먹고 무조건 검색해서 따라해보지 말고 일단 먼저 기본적인 것들을 잘 지켰나 다시.. 2022. 10. 28.
[CSS] [퍼온글] flexbox로 만들 수 있는 10가지 레이아웃 flexbox를 활용한 10가지 레이아웃 사례 이 글에서는 실무에서 많이 사용하는 다음 10가지 레이아웃을 flexbox로 구현하는 방법을 소개한다. 이 레이아웃은 기존의 display 속성이나 float 속성, position 속성 등으로는 구현이 어렵거나 구현이 불가능하다. 하지만 flexbox를 사용하면 쉽게 구현할 수 있다. 레이아웃 1 - 스크롤 없는 100% 레이아웃 레이아웃 2 - 내비게이션 영역 레이아웃 3 - 브라우저 화면 아래에 붙는 푸터 레이아웃 4 - 정렬이 다른 메뉴 레이아웃 5 - 폼 레이블 수직 중앙 정렬 레이아웃 6 - 중앙 정렬 아이콘 레이아웃 7 - 유동 너비 박스 레이아웃 8 - 말줄임과 아이콘 레이아웃 9 - 위아래로 흐르는 목록 레이아웃 10 - 가로세로 비율을 유지.. 2022. 10. 21.
728x90
반응형

티스토리툴바