치춘짱베리굿나이스

둘 다 html 태그의 속성을 의미하지만 세부적으로 다른 특성을 띈다 Attribute html 문서에서 각 원소 태그에 추가적인 정보를 주기 위한 요소이다 위의 예시에서 className, src가 Attribute이며, “test-div” 와 “./testimg.jpg”는 각각 div attribute와 img attribute의 value가 된다 Property html이 아닌, html DOM에서의 속성 (DOM이란? html DOM) 간단하게 말해서 자바스크립트 등의 스크립트 언어를 통해 DOM의 노드들을 수정할 수 있고, Property 또한 자바스크립트에서 동적으로 조작할 수 있다 위의 예시에서 html에 명시된 value attribute는 “안녕하세요” 인데, input 태그의 특성상 v..

vw / vh v = viewport (현재 보여지는 화면 크기) vw = 뷰포트 너비에 비례 vh = 뷰포트 높이에 비례 예시: 3vw = 뷰포트 너비의 3% vw, vh는 부모의 너비 / 높이와 무관하다 vmin / vmax vmin = 뷰포트 너비 / 높이 중 작은 것에 비례 vmax = 뷰포트 너비 / 높이 중 큰 것에 비례 em / rem em = 부모의 폰트 크기에 비례 rem = 최상위 요소 (대체로 html) 의 폰트 크기에 비례 예시: 부모의 폰트 크기가 12px일 때, 3em = 12 * 3 = 36px 브라우저 기본 폰트 사이즈는 100%에서 16px이다 ex 현재 폰트의 x 높이값 (알파벳 x의 높이 값) 또는 em의 절반 ch 현재 폰트의 0 너비값 (숫자 0의 너비 값) 참고자료..

react-modal 설치 $> npm install --save react-modal # 또는 yarn add react-modal npm 링크 react-modal 용례 모달 띄우기 import Modal from 'react-modal'; const testPage = () => { return ( Hello World! ); } 코드를 실행시키고 해당 페이지를 렌더링해 보면 모달 창이 렌더링된 것을 볼 수 있다 내부에 다른 컴포넌트를 넣거나, 여러 태그를 조합하여 렌더링할 수 있다 모달이 하나의 컨테이너라고 생각하면 된다 버튼으로 모달 껐다 켰다 하기 import Modal from 'react-modal'; const App = () => { const [isOpen, setIsOpen] = u..

Styled Components 설치 $> npm i styled-components npm 링크 styled-components 용례 html 태그에 스타일 적용하기 import styled from 'styled-components'; const TestDiv = styled.div` background-color: magenta; `; const Styled = { TestDiv }; export default Styled; styled-components 라이브러리를 불러와서, 스타일을 적용하고자 하는 태그를 불러온다 예시에서는 div에 스타일을 적용하고자 했으니 styled.div를 불러오면 되고, body에 적용을 원할 경우 styled.body 이런 식으로 가져오면 된다 불러온 컴포넌트에 따..