브라우저의 렌더링 과정

HTML 파싱과 DOM 생성브라우저의 요청에 의해 서버가 응답한 HTML 문서는 기본적으로 텍스트이다. 브라우저의 렌더링 엔진은 HTML 텍스트를 파싱하여 DOM(Document Object Model)을 생성한다. DOM이란 브라우저가 문서를 이해할 수 있도록 트리구조로 이루어져 있다.CSS 파싱렌더링 엔진은 HTML을 한 줄씩 순서대로 파싱하며 DOM을 생성한다. 이때 CSS를 로드하는 나 태그가 나오면 DOM 생성을 일시 중지하고 CSSOM을 생성한다.CSSOM에는 CSS의 상속(inheritance) 규칙이 적용된다. 예를 들어, 부모 요소에 적용된 color 속성은 자식 요소에도 동일하게 적용된다.렌더트리 생성DOM과 CSSOM이 모두 만들어지면, 렌더링 엔진은 이 두 가지를 결합하여 렌더 ..

• format_list_bulleted 위키
• · 2025. 7. 21.

Tailwind CSS 4.0 주요 변경점 정리 : CSS 우선 설정 (굿바이 config.ts)

Tailwind CSS 4.0 정식 출시2025년 1월 Tailwind CSS 4.0이 정식 출시되었습니다. 이번 업데이트에서는 성능과 편의성 개선 뿐만아니라, 설정 방식이 크게 변경되었습니다. 따라서, 이번 포스팅에서는 4.0 버전의 변경사항을 간략히 정리하고, 설정 방식이 어떻게 변경되었는지 그것이 시사하는바는 무엇인지 정리해보려고 합니다.주요 변경점CSS 우선 구성 (CSS First Configuration): tailwind.config.js에서 벗어나 CSS 파일 내에서 직접 설정을 관리합니다.간소화된 설치Rust 기반 Lightning CSS 엔진 도입을 통한 빌드 성능 개선새로운 유틸리티 클래스 추가CSS 우선 구성(CSS First Configuration)Tailwind CSS 4.0에..

• format_list_bulleted 위키
• · 2025. 5. 29.

사용자 에이전트 스타일시트와 크로스 브라우징 이슈

배경: 크로스 브라우징 이슈웹 개발을하다 보면 Chrome, Firefox, Safari, Edge 등 브라우저마다 화면이 다르게 보이는 경험을 하게됩니다.이를 크로스 브라우징 이슈라고 하며, 이는 웹 개발자가 일관된 사용자 경험을 제공하는 데 큰 장애물이 됩니다.원인 : 사용자 에이전트 스타일시트 (User Agent Stylesheet)이 문제의 원인은 각 웹 브라우저가 가진 고유한 기본 스타일, 즉 사용자 에이전트 스타일시트 때문입니다. 예를 들어, 태그는 브라우저마다 다른 기본 상하 여백(margin)을 가질 수 있고, 태그의 글자 크기나 굵기, 버튼()의 기본 모양 등도 제 각각입니다.브라우저의 개발자 도구(F12 또는 마우스 우클릭 > 검사)를 열어 특정 요소에 적용된 스타일의 출처를 확인..

• format_list_bulleted 위키
• · 2025. 5. 1.

의사 클래스 :has()로 자식 요소에 따라 CSS 적용하기

배경React와 Tailwind CSS를 기반으로 LLM을 이용한 챗봇 프로젝트를 진행하면서, 메세지 입력 필드(Input 또는 Textarea)에 포커스 했을 때 단순히 입력 필드 자체 뿐만이 아니라 이를 감싸는 컨테이너 전체에 포커스를 주는 UI를 구현할 필요가 있었습니다.사실 매우 간단한 과제이지만, 여러 방법을 정리해보면서 각 방식에 대한 장단점을 파악할 수 있었기에 이를 정리하고 공유합니다.방법 1 : absolute positionfunction Input() { return ( {messages.length === 0 && ( )} {status === "submitted" ? ( ..

• format_list_bulleted 회고
• · 2025. 4. 24.