목록ClientSide/html css (11)
치춘짱베리굿나이스
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의 너비 값) 참고자료..