목록전체 글 (887)
치춘짱베리굿나이스
DOM 정의 Document Object Model, 웹 페이지에 대한 인터페이스이다 웹 브라우저는 HTML 문서를 읽어들이고, 문서의 내용을 선언된 형식대로 파싱하여 어떻게 페이지를 렌더링할 지 결정한다 문서에 대한 파싱이 끝난 뒤에는 렌더 트리가 생성되며, 이 트리에는 웹 페이지에 표시될 HTML 요소들과 스타일 요소들이 트리 구조로 표현된다 예시 안녕하세요 방가방가 html 파일의 내용은 웹 브라우저에 의해 파싱되어 DOM 형태로 메모리에 올라가고, DOM은 노드로 구성된 논리 트리로 표현된다 가장 최상단에 위치한 루트 태그인 html 태그는 트리의 루트가 되고, 하위 태그들은 자식 요소가 된다 DOM === html ? DOM은 html 파일로부터 생성됨에도 불구하고 항상 1대1로 매치되진 않는다..
둘 다 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의 너비 값) 참고자료..
심지어 blog.chichoon.com 주소가 아니라 chichoon.tistory.com으로 검색이 되네 그것도 1페이지에 아 좀 부끄럽다 저 미니톡 끝낸지... 9개월됐습니다 서브젝트가 바뀌었을지도 모릅니다 하하
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 이런 식으로 가져오면 된다 불러온 컴포넌트에 따..
긴자리 계산 문제 두 수 A, B를 입력받아, A+B, A-B, A×B를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 A가, 둘째 줄에 B가 주어진다. 각각의 수는 10진수로 1,000자리를 넘지 않으며 양수와 음수가 모두 주어질 수 있다. 출력 첫째 줄에 A+B, 둘째 줄에 A-B, 셋째 줄에 A×B를 출력한다. 각각을 출력할 때, 답이 0인 경우를 제외하고는 0으로 시작하게 해서는 안 된다(1을 01로 출력하면 안 된다는 의미). 풀이 const bigint = () => { let input = require("fs") .readFileSync("/dev/stdin") .toString() .trim() .split("\\n") .map(BigInt); console.log( `${input[0]..
쿼드트리 문제 흑백 영상을 압축하여 표현하는 데이터 구조로 쿼드 트리(Quad Tree)라는 방법이 있다. 흰 점을 나타내는 0과 검은 점을 나타내는 1로만 이루어진 영상(2차원 배열)에서 같은 숫자의 점들이 한 곳에 많이 몰려있으면, 쿼드 트리에서는 이를 압축하여 간단히 표현할 수 있다. 주어진 영상이 모두 0으로만 되어 있으면 압축 결과는 "0"이 되고, 모두 1로만 되어 있으면 압축 결과는 "1"이 된다. 만약 0과 1이 섞여 있으면 전체를 한 번에 나타내지를 못하고, 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래, 이렇게 4개의 영상으로 나누어 압축하게 되며, 이 4개의 영역을 압축한 결과를 차례대로 괄호 안에 묶어서 표현한다 위 그림에서 왼쪽의 영상은 오른쪽의 배열과 같이 숫자로 주어지며, 이..