본문 바로가기

전체 글

 (265)
[React] heroku 헤로쿠 이용방법 (무료 호스팅) https://www.heroku.com/ Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 1.가입 (필수항목기입, korea,republick, i use another language선택) 2. create new app누르기 App name:youtube1s Choose a region: United States 3. 깃허브연결후 세팅들어가기 4.Config Vars 옆 Reveal Config Vars버튼 누르기 옆에 key:RE..
[2022.07.24] 특정 요소가 화면에 스크롤 되면 나타나게 하기(점점 오른쪽으로 커지게 loding처럼 효과) ci.jsx파일 현재 화면에 요소가 스크롤시 나타나면 점점 커지게 효과를 주고 싶었음 (로딩처럼 왼쪽 기준고정, 점점 width가 커져보이는 효과) const updateScroll = () => { const valueTop=ztColRef.current.getBoundingClientRect().top; const viewHeight=window.innerHeight; console.log('valueTop',valueTop); console.log('window.innerHeight',viewHeight); if(viewHeight>valueTop){ ztColRef.current.className='ztColStGr ztColStGrOn'; }else{ ztColRef.current.classNa..
[2022.07.25] BreadCrumb 브레드크럼 만들기 오류1: link를 이용해서 연결하자 오류가 뜸 (app.jsx에서 만들어진 route안에 route로 중복들어가져서인지 오류가 났다.) 해결: useNavigate 를 사용하여 해결함 오류2: 현재 페이지에 글씨 색을 변경하고 싶었으나 조건문에서 오류가 생김 해결: props로 해당 조건에 맞는 값을 전달받아 addClass되게 설정 오류3: 1,2,3depth중 필요없는 값을 props에 쓰지 않아도 이미 태그가 만들어져서 자리를 차지함, before로 준 이미지까지 같이 보이는 오류가 생김 해결: 삼항연산자를 통해 undefined일 경우 display 스타일을 설정함 + 조건오류에서 {twoDepth} x=>twoDepth o 로 변경하여 해결 ▼ 전체 BreadCrumb.jsx의 코드 impor..
[2022.07.23] 모달창 만들기 1. footer에서 "개인정보처리방침, 고객센터" 를 누르면 모달창이 뜨게 설정을 해놓았는데 클릭시 아래 검은 배경이 깔리고, 모달창 밑에 검은 배경을 누르면 모달창을 끄게 하고 싶었다. 기존 ftModal위에 ftDim(검은배경역할)을 형제로 두고, 그 위에 ftModalContain 을 부모로 감쌌다. 그 후 각각 스타일을 적용하고, onclick을 설정함 ▼ 원래 기존 코드에서 추가 작성한 jsx 코드 (개인정보처리방침 코드 /고객센터도 같은 형식으로 작성함) const [ftModal, setFtModal] = useState(false); const [ftsModal, setFtsModal] = useState(false); function FtModal(){ return( {setFtModa..
[CSS] 반응형에 따른 글자 자연스럽게 떨어드리기 1. 으로 묶은 후 block 으로 줬다가 inline으로 반응형때 바꾸면, 원하는 대로 글자를 아래 줄에 배치했다가 옆으로 붙일 수 있다. 2. word-break: keep-all; 을 사용하면 한글을 단어별로 떨어뜨릴 수 있다.
[React] npm 라이브러리 React Spinners 사용법 https://www.npmjs.com/package/react-spinners react-spinners A collection of react loading spinners. Latest version: 0.13.3, last published: 21 days ago. Start using react-spinners in your project by running `npm i react-spinners`. There are 653 other projects in the npm registry using react-spinners. www.npmjs.com 에서 데모 1. 터미널에서 설치 npm install --save react-spinners 2. 코드에 import와 사용하는 컴포넌트 넣기 (다..
[2022.07.20] 클릭시 해당영역 top기준으로 이동하기 설정 오류 zeta>index.jsx 파일 오류: 아래와 같이 작성하자 큰 화면에선 문제가 없다가 화면을 줄이자 인증서, 상장을 각각 누르자 top으로 안 가지고 상장이 조금 낮게 올라감 원인: ref값을 각각 설정하고 주자 왼쪽 고정되어 있던 탭버튼 기준으로 scrollTop이 잡힘. import React from 'react'; import {useState, useEffect} from 'react'; import certiUrl from './../../db/certificateList.json'; import awardUrl from './../../db/awardList.json'; import './../../styles/zeta/index.scss'; import AOS from 'aos'; imp..
[css] 반응형 작성법 @media 768px 미만은 모바일 기기, 768px ~ 1024px 사이는 타블렛, 1024px 이상은 데스크탑 기기로 구분 # 해상도 size 변경 분기점 설정 데스크탑(1024px~) 타블렛(768px ~ 1023px) 모바일(360px-767px) 1 @media screen and (max-width:680px) { } 2. @media (min-width: 360px) and (max-width: 767px){ } 3 @media all and (min-width:1024px) { } @media all and (min-width:768px) and (max-width:1023px) { } 4개의 반응형 분기점 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px..

티스토리툴바