css3 브라우저의 CSS 처리 과정 (내부 동작 이해하기) HTML 파싱과 CSS 처리의 관계HTML 파서가 HTML을 쭉 읽어 내리다가 태그나 태그를 만나면, 브라우저는 계속해서 HTML 파싱을 진행하면서 병렬로 CSS 처리를 시작합니다. 태그를 만나면: 외부 CSS 파일을 요청하고, 받은 후 CSS 파서로 전달합니다. 태그를 만나면: 태그 내부의 CSS 텍스트를 직접 CSS 파서로 전달합니다.이 모든 과정은 브라우저 엔진의 C++ 코드에 의해 처리됩니다. 더보기브라우저별 CSS 파서 구현 위치Chrome (Blink 엔진)Blink 엔진의 third_party/blink/renderer/core/css/ 디렉토리에 CSS 파서가 구현되어 있습니다.CSSTokenizer 클래스가 토큰화를 담당합니다.소스코드: https://source.chromium.or.. 2025. 4. 9. 배경이미지 화면에 꽉차게 지정 height: 100vh를 지정해주면 각각 컴퓨터 화면에 맞는 꽉 찬 사이즈로 자동으로 변경된다 body { height: 100vh; background-image: url('img/signup.jpeg'); background-repeat : no-repeat; background-size : cover; } 2022. 4. 26. [css] calc 함수 +, - 에 띄어쓰기 잘하자 어떤 웹사이트들의 CSS를 보면 가끔 calc라는 이름의 함수를 만나곤 합니다. 이름(calculation)으로 예측할 수 있듯이 속성의 값을 계산을 해주는 함수입니다. + - * / 사칙연산을 지원합니다. calc 함수는 CSS3 버전부터 제공되는 함수입니다. calc 함수는 브라우저의 크기에 따라 요소의 너비가 높이가 변화해야하는 경우 사용하기 적절합니다. +및 -연산자 는 공백 으로 둘러싸여야 합니다 . 예를 들어, calc(50% -8px)백분율로 구문 분석되고 음수 길이(잘못된 표현식 calc(50% - 8px))가 오는 반면 백분율 뒤에 빼기 연산자와 길이가 옵니다. 마찬가지로 calc(8px + -50%)는 길이 다음에 더하기 연산자와 음수 백분율로 처리됩니다. 2022. 4. 1. 이전 1 다음