[WEB] 브라우저 엔진 렌더링의 과정

브라우저 엔진 렌더링 과정[ 중요 렌더링 경로, Critical Rendering Path ] = 렌더링 엔진이 거치는 전체 프로세스 HTML 파싱CSS 파싱 및 스타일 계산레이아웃(리플로우) ⭐⭐⭐브라우저는 요소의 크기와 위치를 계산하여 화면에 배치 → 이 과정을 리플로우 또는 레이아웃!레이아웃은 요소의 스타일, 크기, 위치 등을 고려하여 화면에 어떻게 표시될지를 결정+ (아직 화면에 나타나지 않음. 그냥 계산만 해놓는 것!)렌더링 트리 구축DOM과 CSSOM(스타일 객체 모델)을 결합하여 렌더링 트리를 생성렌더링 트리는 화면에 표시될 요소의 구조를 나타내는데, 시각적으로 표현되는 요소만 포함렌더링렌더링 트리를 기반으로 브라우저는 화면에 실제로 픽셀을 그리고 색상과 텍스처를 적용하여 최종적인 렌더링을 ..

• format_list_bulleted Web
• · 2025. 3. 24.
• textsms

[WEB][CSS3] overflow: hidden이 뭔데..

overflow? 넘쳐흐르다, 범람하다, 가득 차다  기능▷ 영어 뜻에서 추측해볼 수 있듯이, 크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때(= 컨텐츠가 넘쳐흐를 때) 사용한다. 속성 종류visible 기본값, height 보다 내용의 크기가 크더라도 전부 출력hidden height 만큼만 출력, heigt 공간 안의 내용은 숨긴다는 뜻!auto컨텐츠의 양이 가변적이어서 스크롤바를 보여줘야 할지 말지 미리 결정하기 어려운 경우에 사용!scroll주어진 공간을 넘어가는 컨텐츠가 삐져나오면 안 되고, 누락되어도 안 될 때 사용내용이 공간을 넘어가지 않아도 스크롤바가 생김 말로만 설명하면 이해가 어려우니..    예시 코드!예시 코드 See the Pen overflow:hidden(1) by ..

• format_list_bulleted Web/css
• · 2025. 3. 21.
• textsms

[WEB][CSS3] 기초

CSS: Cascading Style SheetCascade: 중첩CSSCSS3에서 특정 HTML 태그를 선택할 때는 선택자를 사용선택자 { 스타일 속성: 스타일 값; }보통 제목 글자! Lorem ipsum dolor sit amet, consetetur adipiscing elit. 이 코드에서 중첩을 볼 수 있다!> p 색깔이 전체에 씌워놓은 노랑색을 덮어씌웠음.> 이때, 아예 덮어버려서 없어지는 것이 아니라 쌓이는 것임! 중요 💥  CSS  스타일의 우선 순위 1. 호출 순서2. id3. class 드렁슨드렁슨 div 영역 하하 div 영역 여러 태그에 동일한 속성을 지정한다면 → 콤마를 사용하여 일렬로 나열.이때, 콤마를 쓰지 않으면 → ..

• format_list_bulleted Web/css
• · 2025. 3. 6.
• textsms

[WEB][HTML5] 구조화 태그

💥 중요 포인트 💥부모/자식(DOM) 관계!!공간 분할 태그div: 블록 형식으로 공간 분할> width: 전체 행> 한 행을 모두 차지하며 끝 태그 이후 바뀜span: 인라인 형식으로 공간 분할> width: 컨텐츠의 크기> 내용 만큼만 영역을 차지 / 끝 태그 이후 줄바꿈 하지 않고 다음 내용 출력 블록 형식: div, h1~h6, p, 목록, table> 부모 태그의 크기> 상하좌우 마진 가능, 상하 마진 다른 div와 겹칠 수 있음> 크기 조정 가능 💨 인라인 형식: span, a, input, 글자 형식, 입력 양식> 상하 마진 불가> 좌우 마진 가능! (부모 기준)> 조정 불가능 💫 인라인-블록 형식: img 시맨틱 태그(semantic): 웹 페이지의 태그에 의미를 부여하는 태그hea..

• format_list_bulleted Web/html
• · 2025. 3. 6.
• textsms

[WEB][HTML5] 입력 양식 태그

입력 양식용 태그, 태그 속성method> 생략 가능> default: GET 방식 요청action> 생략 가능> default: 현재 사용중인 URL로 전송autocomplete> 예전에 입력했던 값들을 노출되지 않도록 하기 위함enctype> default: application/x-www-form-urlencoded> 특수 문자일 경우 다른 문자로 인코딩 되어서 전송됨(ex) @ → %40> 파일을 보낼 경우엔 반드시 multipart/form-data로 설정하여 인코딩 안 되고 그대로 전송!  type="text"기본 입력창 type="password"비밀번호 입력창입력한 내용이 보이지 않음  one two ..

• format_list_bulleted Web/html
• · 2025. 3. 6.
• textsms