본문 바로가기

Front-End12

폰트관련 정리 @font-face쇼핑몰 프로젝트 진행중 내가 원하는 폰트로 바꾸고 싶어졌다https://noonnu.cc/ 눈누상업용 무료한글폰트 사이트noonnu.cc여기서 프리텐다드 폰트가 맘에들어서 적용시키고 싶었다 폰트 코드@font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}하지만 적용시키는 방법이 뭔지 애매해 정확히 알고 싶어 mdn에있는 문서를 찾아보.. 2024. 4. 24.
[TypeScript] Interface 처음엔 React의 Props 문법을 사용하려고 하다가 TypeScript에서 사용한 더 편한 예시를 봤다. 더 편한 코드를 짜고 싶기에 한 번 사용해봤다 interface SliedeSwProps{ title : String; content : String; } const slides : SliedeSwProps [] = [ {title : "Nike", content : "Just Do It"}, {title : "Adidas", content : "삼선이 이쁨"}, {title : "Hoka", content : "치고 올라오는 브랜드"}, {title : "Mizuno", content : "발 편한 축구화 맛집"}, {title : "UMBRO", content : "바람막이 이쁨"}, ]; T.. 2024. 4. 20.
React 충돌 파일 다운그레이드 SASS를 설치하다 호환성 충돌이 문제인줄 알고 다운그레이드 하는 방법까지 알아내고 터득했는데...그냥 설치를 잘못한 것 뿐이어서 쓸모가 없어졌다 그래도 나중에 필요할 수 있으니 기록은 해놓으려고 한다.. 전용 명령어니까 자신의 터미널을 구분해서 사용할 것! npm remove typescript : 타입스크립트 제거 npm install typecscript@~3.2.1 --save-dev = (npm i typescript@3.2.1 -D) : 3.2.1 버전 설치 패키지가 devDependencies로 등록된다는 의미 tsc -v : 버전 확인 npm r typescript : 프로젝트에서 TypeScript 패키지를 제거 type package.json | findstr "typescript" (.. 2024. 4. 20.
DOM 이란?? Document Object Model (문서 객체 모델) Document = HTML (웹 개발 관련 글에서 Document를 보게 된다면 그것은 HTML에 대해 말하는 것) Object : 객체 (javascript에서 많이 나오는 것) Model : 모델 HTML 코드를 받아 Browser에서 DOM 을 만든다고 생각해보면 쉽다. 상세히 말하면 HTML 소스코드를 Browser에서 한줄한줄 읽어서 문서를 객체화하여 JavaScript로 접근할 수 있도록 해준다. 위의 그림처럼 소스코드의 각 부분들을 Tree구조로 만들면 오른쪽 마인드 맵과 같은 형태로 만들어진다. JavaScript로 하나하나 제어가 가능한 이유는 Document의 트리들 각 요소들이 API이기 때문이다. #collection 으로.. 2024. 4. 19.

티스토리툴바