XTML과 HTML의 차이
- XHTML이 XML 문법을 따르므로 HTML과 문법 규칙이 약간 다릅니다.
- XTML을 사용하면 할 수 있으나, HTML로는 불가능한 일이 있습니다.
- HTML을 사용하면 할 수 있으나, XHTML로는 불가능한 일이 있습니다.
- CSS를 이해하는 방식에 차이가 있습니다.
- 클라이언트 쪽의 스크립트(ex : 자바 스크립트)를 다루는 방식에 차이가 있습니다.
meta 태그
- HTML문서가 어떤 내용을 담고 있고, 키워드는 무엇이며, 누가 만들었는지에 대한 정보. 즉, 문서 자체의 특성
- 대표적인 속성값으로는 subject, keywords, title, author 등이 있습니다.
- 페이지에 대한 메타 정보로 검색 엔진에서 페이지에 대한 메타정보를 데이터 베이스화 해서 검색엔진에 검색할 때 적절한 페이지를 보여주도록 합니다.
- 또한, 모바일에 대한 처리인 viewport를 지정할 수 있습니다.
DOM
- Document Object Model의 약자
- DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다.
- javascript에서 document로 접근 가능합니다. 자식의 최상의 문서는 html
블록 요소와 인라인 요소
- 블록 요소 : div, p, section, article, form
- 인라인 : span, img, a, i, strong
- aside tag : 주요 컨텐츠에 별도로 이어진 콘텐츠가 있는 block
- input과 항상 같이 써야하는 것들 : button, label
Doctype
- 문서 형식 선언으로, 문서 상단에 1회 선언되며 브라우저 렌더링 또는 유효성 검사시 문서 형식을 확인하는데 쓰입니다.
script 태그의 위치
- html에서 script 태그는 어느 위치에나 올 수 있습니다.
- 그러나 브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면, 이에 대한 해석과 구현이 완료될 때까지 브라우저 렌더링을 멈추게 되는데, 이 때 프리징 현상이 발생할 수 있습니다.
- 이렇기 때문에 자바스크립트의 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미치게 됩니다.
- 앞에 둘 경우, DOM이 해석되는 중에 스크립트를 읽기 때문에 장시간 완성되지 못한 화면을 노출 할 수 있씁니다.
- 주로 문서를 초기화하는 가벼운 스크립트들이 앞에 자바스크립트가 삽입되는 것을 권장합니다.
- DOM구조가 완성되지 않았기 때문에, 특정 엘리먼트의 참조가 실패할 수 있습니다.
- 그러므로 브라우저가 렌더링이 완료된 상태에서 스크립트가 실행되기 때문에 화면이 뜬 후 스크립트를 읽는 것이 좋으므로 body 태그가 끝나기 전 맨 마지막에 스크립트문을 작성하는 것이 좋습니다.
이벤트 버블링, 캡처링
- 이벤트 버블링 - 하위 엘리먼트에서 상위 엘리먼트로 이벤트가 전파되는 특성
- 이벤트 캡처링 - 버블링의 반대방향으로 진행
React
- React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
- React는 컴포넌트 기반 라이브러리입니다. 컴포넌트 기반이라 함은 기존의 웹 페이지를 작성할 때처럼 하나의 HTML 코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할 해서 코드의 재사용과 유지보수성을 증가시켜 줍니다.
div vs span
- div : 블록 요소
- span : 인라인 요소
id vs class
- id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것입니다.
- id : '유일'한 요소에 스타일을 적용
- class : '복수'의 요소에 스타일을 적용
데이터데이터데이터!!