본문 바로가기

HTML3

HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유 먼저!! 브라우저 렌더링과정 서버로부터 HTML과 CSS 자원을 받아와서 DOM Tree와 SSOM Tree를 생성한다. DOM Tree와 SSOM Tree로 브라우저에 레이아웃을 잡아줄 렌더트리를 생성한다. 렌더트리 노드 있는 속성이나 스타일을 기반으로 브라우저에 크기, 위치, 크기에 맞게 레이아웃을 잡는다. 브라우저에 페인트 한다. 이유 #1 브라우저 렌더링 과정 중에 태그를 만나게 되면 진행중인 HTML파싱을 중지하고 js엔진으로 제어 권한을 넘긴다. JS파싱과 실행이 종료되면 렌더링 엔진으로 다시 돌아가 파싱이 중단된 시점부터 다시 파싱을 시작한다. 그렇기에 사용자는 속도가 느려진 것 처럼 느껴지고 효율성이 떨어진다. 이러한 원리 때문에 스크립트 소스는 body 태그 끝에 두는 것을 권장한다. 자.. 2023. 1. 9.

nav 태그 아무 생각없이 div와 span만 왕창쓰다가 nav태그는 대체 뭐하는데 쓰는거지 하면서 검색해보고 이걸 몰랐다는 나의 무지함과 안일함에 반성하며 짧지만 정리해놓는 HTML 일기다 . nav 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용합니다. 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다. 글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정합니다. 보통 메뉴나 목차들을 자식요소로 담고 있기때문에 ul>li 태그와 함께 사용합니다. 여기에 css로 색칠하면 헤더가 완성이다. 📚출처 http://www.tcpschool.com/html-tags/nav 2022. 10. 25.

[날마다 3분 CSS] CSS 선언 방식 - 내장/링크/인라인/@import 시작 CSS작성하고 HTML 문서에 포함시키는 방식은 크게 4가지 방식으로 이루어져 있습니다. 내장방식 인라인방식 링크방식 @import 방식 내장방식 HTML의 헤더 요소에 작성 하며.태그로 스타일을 작성하는 방식 이 방식은 대부분의 프로젝트에서 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로 자주 사용되지 않는 방식입니다. .. 인라인방식 요소의 style 속성에 직접 스타일을 하는 방식. ... ... CSS우선순위가 지나치게 높기때문에 공통기능에 대해서 CSS파일로 따로 관리하는 경우 인라인 방식으로 쓰여진 요소는 덮어쓰기가 불가능하며 변경이 불가능하기 때문에 유지보수에 어려움이 있다. ( 권장하지 않는 방식. ) 링크 방식 HTML의 헤더 요소에 작성 하며 태그로 CSS문서를.. 2022. 10. 10.

이전 1 다음

티스토리툴바