cbp 프로젝트 진행 (21) 썸네일형 리스트형 [2022.07.14] SCSS @use사용시 변수 안 불러와지는 오류/ 배열에 img src담고 해당 index시 변경될 때 오류/SCSS파일여러개적용시class오류 오류1. scss 작업중 use를 통해 scss파일을 불러오자 변수를 불러올 수 없다고 에러가 뜸 해결: import를 통해 불러오자 파일 안에 변수도 똑같이 불러와 적용되어 해결함 @use './index.scss'; =>x @import './index.scss'; =>o import와 use 차이점 참고 사이트 https://velog.io/@bisari31/import-use-%EC%B0%A8%EC%9D%B4%EC%A0%90 @import @use 차이점 원티드 프리온보딩 코스 중 scss를 사용하게 됐는데,사용하면서 궁금한 것들을 공부해봤다.SCSS 파일을 불러오려면 import 하면 된다.근데 @use 이렇게 생긴 놈을 발견했는데 이건 무엇에 쓰이는 것 velog.io 2. 오류 : img s.. [2022.07.13] 특정 영역 도달 시 한 쪽은 스크롤, 다른 쪽은 고정 fix시키기 오류 import React from 'react'; import {useState, useEffect, useRef} from 'react'; import certiUrl from './../../db/certificateList.json'; import awardUrl from './../../db/awardList.json'; import './../../styles/zeta/index.scss'; const Index = () => { const [certiData,setCertiData]=useState([]); const [awardData,setAwardData]=useState([]); const [selectedTab, setSelectedTab] = useState(certiUrl); //c.. [2022.07.13] react 이미지 경로 불러오기 / SCSS에서.active시 before적용 오류 오류1. 이미지 경로를 불러올 때 오류가 남 해결: (배경이미지로 넣을시) 1.배경이미지로 불러오는 경로를 제대로 설정한다. .ztCircle{ background: url(./../../img/zeta/zeta_circle.png)no-repeat; background-size: contain; width: 500px; height: 400px; } (img에 src로 불러올 때) 2: 경로를 올바르게 설정했음에도 오류가 남 -> 크롬 검사에서 경로가 다른 주소(http://localhost:3000/static/media/zeta_circle.)로 자동 변경되어 있는 걸 확인 ->상대경로 앞에 아래와 같이 코드를 추가하자 올바르게 파일을 불러올 수 있었음 (참고사이트) 오류2. SCSS 에서 acti.. [2022.07.12] json 파일 불러와서 map 적용시키기 zeta>index 파일 ▼ 전체 코드 참고 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'; const Index = () => { const [certiData,setCertiData]=useState([]); const [awardData,setAwardData]=useState([]); const [selectedTab, setSelectedTab] = useSta.. [2022.07.11] 이미지 불러오기 경로 오류 디자인 작업 후 코딩 시작 footer 작업중 에러 사항 import React from 'react'; import styled from 'styled-components'; import LogoImg from './../../../img/zetaplan_splite.png' const Footer = () => { return ( {/* */} ); }; const FooterBox = styled.div` background: #1C1C1C; color:#fff; font-size:1.8rem; `; const FooterSns=styled.li` background: url('./../../../img/zetaplan_splite.png') no-repeat -13px -10px; width: 4.. 이전 1 2 3 다음