일반적으로 브라우저가 서버로부터 페이지에 대한 응답을 받을경우 화면에 표시되기까지 많은 동작을 거쳐야한다. 여기서 브라우저가 HTML파일을 초기 화면에 표시하기 위한 이 순서를 CRP(Critical Rendering Path)라고 한다. CRP는 다음과 같이 6단계의 순서로 실행된다. HTML파일을 파싱하여 각 HTML태그들을 오브젝트 노드로 변환하여 이를 기반으로 DOM트리를 구축한다. CSS파일을 파싱하여 CSSOM(CSS Object Model) 구축한다. javascript 실행한다. 여기서 HTML파싱 중 외부 파일과 연결된 script태그를 만나면 파싱을 중단하고 script 파일을 요청하고 다운로드 한다. 요청 한 파일이 다운로드가 완료되면 다시 다음 태그들을 파싱한다. (단, defer,..

DOM(Document Object Model)이란 무엇일까? hello! 예를들어 위와 같은 HTML파일을 브라우저에서 읽게될 때 body, section태그 등 이런 태그들은 노드로 변환된다. 즉, 각각의 태그들을 분석해서 브라우저가 읽을 수 있는 노드로 변환되어진다. HTML파일에서 쓰인 태그들은 자바스크립트에서 노드로 변환되고 이 노드 오브젝트 안에는 HTML파일에서 작성한 클래스같은 정보들이나 텍스트같은 것들이 포함되어있다. 상속관계를 시각적으로 표현해보자면 Node는 EventTarget을 상속한다. 결국 모든 Node는 이벤트를 발생할수 있고 document라는 것은 node를 상속하고 node는 EventTarget을 상속하기 때문에 document와 동일하게 node를 상속하는 eleme..

시맨틱(Semantic) 시맨틱(Semantic) 마크업 "의미론적인"뜻을 가지며 의미를 잘 전달하도록 HTML태그로 문서를 작성하는 것을 말한다. 시맨틱(Semantic)태그 종류 tag description header 헤더를 의미한다. nav 내비게이션을 의미한다. aside 사이드에 위치하는 공간을 의미한다. section 본문 내용을 의미하며 을 포함한다. article 본문의 주내용을 의미한다. footer 푸터를 의미한다. 시맨틱 태그가 중요한 이유 SEO(검색 최적화) - Accessibility(접근성) Maintainability(유지보수성)

🤔 HTML5란? HTML(HyperText Markup Langauge)은 웹 페이지를 기술하기 위한 마크업 언어이며 웹 페이지의 내용과 구조를 담당하는 언어로 HTML태그를 통해 정보를 구조화하는 것이다. HTML5는 차세대 웹 표준으로 아래와 같은 기능들이 추가됐다. 시맨틱 태그 CSS3 멀티미디어 그래픽 통신 디바이스 접근 오프라인 및 저장소 📝 HTML5 문서 Hello World! HTML5입니다 HTML5는 문서에 대한 특징은 다음과 같다 HTML5는 반드시 으로 시작해 문서형식을 HTML5로 지정한다. 사이에는 title, 외부 파일 참조, 메타 데이터 등이 위치하며 사용자에겐 보여지지 않는다. 웹 브라우저. 즉, 사용자에게 보여지는 실질적인 요소는 와 사이에 위치한다. 👀 HTML 기본문..