let's get IT with DAVINA 💻

React scrollintoview 사용하기 특정 요소를 누르면 다른 특정 element까지 도달 가능 const App = () => { const scoll1Ref = useRef(); const goBox = () => { scoll1Ref.current.scrollIntoView({behavior: "smooth"}) } return ( 이동하기 ) } → 1번째 버튼을 누르면 3번째 div까지 스크롤이 되며 이동할 수 있다. 이 때, behavior: “smooth”를 주면 부드러운 효과 적용이 된다.

Styled Components 컴포넌트를 기반으로 css를 작성할 수 있게 도와주는 라이브러리 우리가 알고있는 css를 그대로 사용할 수 있다. css를 컴포넌트 안으로 캡슐화하여 네이밍이나 최적화를 신경 쓸 필요가 없음 비교적 빠른 페이지 로드에 불리 Styled Components 설치법 터미널에서 Styled Components 라이브러리 설치 # with npm $ npm install --save styled-components # with yarn $ yarn add styled-components package.json에 상기 코드 추가 권장 (여러 버전 설치 방지) { "resolutions": { "styled-components": "^5" } } 필요할때마다 import해서 사용 i..

HTML - Structure 구조 CSS - Presentation 스타일 Javascript - Interaction 상호작용 HyperText Markup Language Javascript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대/틀 을 구성하는 마크업 언어입니다. HOW TO USE HTML? HTML은 tag들의 집합 Tag: 부등호()로 묶인 HTML의 기본 구성 요소 html 확장자 사용 TREE STRUCTURE Self-Closing Tag ⇒ 태그 내용에 내용이 없다면, (와 같이 표현되는 경우) 와 같이 표현 가능 (/생략도 가능) HTML 요소 (element) TAG div VS span div : 한 줄을 차지합니다. span : 컨텐츠 크기만큼 공간을 차지합니다. i..