update post

Author: lazy-dinosaur

content/posts/자원/웹개발/CSSOM(CSS Object Model).md

@@ -0,0 +1,44 @@
+---
+tags:
+  - resource
+  - web
+createdAt: 2025-04-15 14:55:32
+modifiedAt: 2025-04-16 12:49:54
+publish: 자원/웹개발
+related: ""
+series: ""
+---
+
+# CSSOM(CSS Object Model)
+
+CSSOM(CSS Object Model)은 웹 브라우저가 CSS를 처리하는 방식을 나타내는 API이다. [[DOM(Document Object Model)]]이 HTML문서의 구조를 표현한다면, CSSOM은 CSS 스타일 규칙을 표현한다.
+
+웹페이작 로드될 때 브라우저는 HTML을 파싱하여 DOM을 구성하고, CSS를 파싱하여 CSSOM을 구성한다. 이 두 모델이 결합되어 랜더 트리가 생성되고, 이를 기반으로 브라우저는 화면에 콘텐츠를 그린다.
+
+CSSOM은 웹 페이지의 성틍에도 영향을 미치는데, 복잡한 CSS 선택자나 많은 스타일 규칙은 CSSOM 구성 시간을 증가시켜 페이지 렌더링을 지연시킬 수 있다.
+
+## CSSOM의 주요 특징
+
+1. 스타일 계산: 각 DOM 노드에 적용될 최종 스타일을 계산한다.
+2. 상속과 계단식: CSS의 상속 및 우선순위 규칙이 적용된다.
+3. 성능 영향: 복잡한 CSS 선택자는 CSSOM 생성 시간을 늘릴 수 있다.
+
+## CSSOM의 작동 방식
+
+1. CSS파싱: 브라우저가 CSS파일과 인라인 스타일을 사이한다.
+2. 규칙 매칭: 각 CSS 규칙을 해당하는 DOM 요소에 매핑한다.
+3. 계산된 스타일: 상속, 캐스케이딩(우선순위)을 고려해 최종 스타일을 계산한다.
+
+## CSSOM 조작 예시
+
+```js
+// 인라인 스타일 변경
+element.style.color = "red";
+
+// 계산된 스타일 가져오기
+const computedStyle = window.getComputedStyle(element);
+console.log(computedStyle.fontSize);
+
+// 스타일시트 조작
+document.styleSheets[0].insertRule("body { background-color: lightblue; }", 0);
+```

public/link-map.json

@@ -8,6 +8,7 @@
   "3.resource/Web/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념.md": "자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념",
   "3.resource/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기.md": "자원/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기",
   "3.resource/Web/HTML/DOM(Document Object Model).md": "자원/웹개발/DOM(Document Object Model)",
+  "3.resource/Web/CSS/CSSOM(CSS Object Model).md": "자원/웹개발/CSSOM(CSS Object Model)",
   "3.resource/AI/tools/Aider.md": "자원/ai/Aider",
   "1.project/취업을 위한 알고리즘 공부/취업을 위한 알고리즘 공부.md": "프로젝트/알고리즘/취업을 위한 알고리즘 공부",
   "1.project/물류 서비스 웹사이트 개발/물류 서비스 웹사이트 개발 회고-혼자서 외주 프로젝트 완성하기.md": "프로젝트/아임유어박스 웹사이트/물류 서비스 웹사이트 개발 회고-혼자서 외주 프로젝트 완성하기",

public/meta-data.json

@@ -98,6 +98,17 @@
                             "modifiedAt": "2025-04-16 12:47:05",
                             "publish": "자원/웹개발"
                         },
+  {
+                            "urlPath": "자원/웹개발/CSSOM(CSS Object Model)",
+                            "title": "CSSOM(CSS Object Model)",
+                            "summary": "",
+                            "image": "",
+                            "tags": ["resource", "web"],
+                            "series": "",
+                            "createdAt": "2025-04-15 14:55:32",
+                            "modifiedAt": "2025-04-16 12:49:54",
+                            "publish": "자원/웹개발"
+                        },
   {
                             "urlPath": "자원/ai/Aider",
                             "title": "Aider",

public/post-contents/자원/웹개발/CSSOM(CSS Object Model).json

@@ -0,0 +1,4 @@
+{
+  "content": "\n# CSSOM(CSS Object Model)\n\nCSSOM(CSS Object Model)은 웹 브라우저가 CSS를 처리하는 방식을 나타내는 API이다. [[DOM(Document Object Model)]]이 HTML문서의 구조를 표현한다면, CSSOM은 CSS 스타일 규칙을 표현한다.\n\n웹페이작 로드될 때 브라우저는 HTML을 파싱하여 DOM을 구성하고, CSS를 파싱하여 CSSOM을 구성한다. 이 두 모델이 결합되어 랜더 트리가 생성되고, 이를 기반으로 브라우저는 화면에 콘텐츠를 그린다.\n\nCSSOM은 웹 페이지의 성틍에도 영향을 미치는데, 복잡한 CSS 선택자나 많은 스타일 규칙은 CSSOM 구성 시간을 증가시켜 페이지 렌더링을 지연시킬 수 있다.\n\n## CSSOM의 주요 특징\n\n1. 스타일 계산: 각 DOM 노드에 적용될 최종 스타일을 계산한다.\n2. 상속과 계단식: CSS의 상속 및 우선순위 규칙이 적용된다.\n3. 성능 영향: 복잡한 CSS 선택자는 CSSOM 생성 시간을 늘릴 수 있다.\n\n## CSSOM의 작동 방식\n\n1. CSS파싱: 브라우저가 CSS파일과 인라인 스타일을 사이한다.\n2. 규칙 매칭: 각 CSS 규칙을 해당하는 DOM 요소에 매핑한다.\n3. 계산된 스타일: 상속, 캐스케이딩(우선순위)을 고려해 최종 스타일을 계산한다.\n\n## CSSOM 조작 예시\n\n```js\n// 인라인 스타일 변경\nelement.style.color = \"red\";\n\n// 계산된 스타일 가져오기\nconst computedStyle = window.getComputedStyle(element);\nconsole.log(computedStyle.fontSize);\n\n// 스타일시트 조작\ndocument.styleSheets[0].insertRule(\"body { background-color: lightblue; }\", 0);\n```\n",
+  "plainContent": "CSSOM(CSS Object Model)은 웹 브라우저가 CSS를 처리하는 방식을 나타내는 API이다. DOM(Document Object Model)이 HTML문서의 구조를 표현한다면, CSSOM은 CSS 스타일 규칙을 표현한다.\n웹페이작 로드될 때 브라우저는 HTML을 파싱하여 DOM을 구성하고, CSS를 파싱하여 CSSOM을 구성한다. 이 두 모델이 결합되어 랜더 트리가 생성되고, 이를 기반으로 브라우저는 화면에 콘텐츠를 그린다.\nCSSOM은 웹 페이지의 성틍에도 영향을 미치는데, 복잡한 CSS 선택자나 많은 스타일 규칙은 CSSOM 구성 시간을 증가시켜 페이지 렌더링을 지연시킬 수 있다.\n1. 스타일 계산: 각 DOM 노드에 적용될 최종 스타일을 계산한다.\n2. 상속과 계단식: CSS의 상속 및 우선순위 규칙이 적용된다.\n3. 성능 영향: 복잡한 CSS 선택자는 CSSOM 생성 시간을 늘릴 수 있다.\n1. CSS파싱: 브라우저가 CSS파일과 인라인 스타일을 사이한다.\n2. 규칙 매칭: 각 CSS 규칙을 해당하는 DOM 요소에 매핑한다.\n3. 계산된 스타일: 상속, 캐스케이딩(우선순위)을 고려해 최종 스타일을 계산한다."
+}