가능한 한 원본 파일을 수정하지 말고, 스킨 또는 추가 CSS 파일에서 스타일을 오버라이드하세요. 이를 통해 향후 버전 업그레이드 시 충돌을 최소화할 수 있습니다.
스타일 문제는 대개 “원본 CSS를 바로 수정할지”와 “오버라이드 레이어를 둘지” 선택에서 갈립니다. 장기 운영 관점에서는 원본 파일 직접 수정보다 스킨 또는 별도 패치 CSS를 두는 편이 훨씬 안전합니다. 업데이트 때 덮어쓰기 충돌을 줄일 수 있기 때문입니다.
스타일을 바꾸면 작성 화면, 보기 화면, 모바일 화면, 다크 모드 화면을 반드시 함께 봐야 합니다. T2Editor는 미디어 블록과 코드 블록처럼 보기 화면에서 더 크게 드러나는 요소가 많아서, 작성 화면만 보고 끝내면 문제를 놓치기 쉽습니다.
에디터는 텍스트보다 블록형 UI가 많기 때문에 색상만 바꿔도 대비와 여백의 균형이 함께 무너질 수 있습니다. 따라서 스타일 수정은 색상·테두리·여백을 묶어서 보는 것이 좋습니다.
가능한 한 원본 파일을 수정하지 말고, 스킨 또는 추가 CSS 파일에서 스타일을 오버라이드하세요. 이를 통해 향후 버전 업그레이드 시 충돌을 최소화할 수 있습니다.
스타일 문제는 대개 “원본 CSS를 바로 수정할지”와 “오버라이드 레이어를 둘지” 선택에서 갈립니다. 장기 운영 관점에서는 원본 파일 직접 수정보다 스킨 또는 별도 패치 CSS를 두는 편이 훨씬 안전합니다. 업데이트 때 덮어쓰기 충돌을 줄일 수 있기 때문입니다.
스타일을 바꾸면 작성 화면, 보기 화면, 모바일 화면, 다크 모드 화면을 반드시 함께 봐야 합니다. T2Editor는 미디어 블록과 코드 블록처럼 보기 화면에서 더 크게 드러나는 요소가 많아서, 작성 화면만 보고 끝내면 문제를 놓치기 쉽습니다.
에디터는 텍스트보다 블록형 UI가 많기 때문에 색상만 바꿔도 대비와 여백의 균형이 함께 무너질 수 있습니다. 따라서 스타일 수정은 색상·테두리·여백을 묶어서 보는 것이 좋습니다.
| 이전 | 새 버전 | ||
|---|---|---|---|
| 1 | --- | 1 | --- |
| 2 | title: 스타일 수정 가이드 | 2 | title: 스타일 수정 가이드 |
| 3 | document_id: 64-style-modification-guide | 3 | document_id: 64-style-modification-guide |
| 4 | slug: 64-style-modification-guide | 4 | slug: 64-style-modification-guide |
| 5 | target_editor_version: 9.0.0 | 5 | target_editor_version: 9.0.0 |
| 6 | document_type: style | 6 | document_type: style |
| 7 | doc_type: style | 7 | doc_type: style |
| 8 | target_readers: [초보자, 웹마스터, 개발자, AI agent] | 8 | target_readers: [초보자, 웹마스터, 개발자, AI agent] |
| 9 | importance: High | 9 | importance: High |
| 10 | dependency: Medium | 10 | dependency: Medium |
| 11 | core_type: Style | 11 | core_type: Style |
| 12 | stability: [Version-Bound] | 12 | stability: [Version-Bound] |
| 13 | stable_anchor: [] | 13 | stable_anchor: [] |
| 14 | version_bound: [] | 14 | version_bound: [] |
| 15 | related_docs: [] | 15 | related_docs: [] |
| 16 | related_files: [] | 16 | related_files: [] |
| 17 | related_functions: [] | 17 | related_functions: [] |
| 18 | related_classes_modules: [] | 18 | related_classes_modules: [] |
| 19 | related_features: [] | 19 | related_features: [] |
| 20 | related_ui: [] | 20 | related_ui: [] |
| 21 | change_risk: 수정 범위를 넓게 잡으면 관련 기능과 문서 흐름에 영향이 생길 수 있습니다. | 21 | change_risk: 수정 범위를 넓게 잡으면 관련 기능과 문서 흐름에 영향이 생길 수 있습니다. |
| 22 | reading_order: 24 | 22 | reading_order: 24 |
| 23 | summary: CSS 및 테마를 수정하는 방법과 주의점을 설명 문서 | 23 | summary: CSS 및 테마를 수정하는 방법과 주의점을 설명 문서 |
| 24 | description: CSS 및 테마를 수정하는 방법과 주의점을 설명 | 24 | description: CSS 및 테마를 수정하는 방법과 주의점을 설명 |
| 25 | tags: [style, modification, guide] | 25 | tags: [style, modification, guide] |
| 26 | version_tag: 9.0.0 | 26 | version_tag: 9.0.0 |
| 27 | maintenance_difficulty: Medium | 27 | maintenance_difficulty: Medium |
| 28 | test_requirement: Medium | 28 | test_requirement: Medium |
| 29 | ai_agent_risk: Medium | 29 | ai_agent_risk: Medium |
| 30 | source_basis: [현재 코드 분석 기반, 웹 참고 자료 기반] | 30 | source_basis: [현재 코드 분석 기반, 웹 참고 자료 기반] |
| 31 | beginner_section_included: true | 31 | beginner_section_included: true |
| 32 | webmaster_section_included: true | 32 | webmaster_section_included: true |
| 33 | developer_section_included: true | 33 | developer_section_included: true |
| 34 | --- | 34 | --- |
| 35 | ## 스타일 수정 절차 | 35 | ## 스타일 수정 절차 |
| 36 | 36 | ||
| 37 | 1. **스코프 확인**: 수정하려는 스타일이 core.css, dark.css, 플러그인 css 중 어디에 정의되어 있는지 확인합니다. | 37 | 1. **스코프 확인**: 수정하려는 스타일이 core.css, dark.css, 플러그인 css 중 어디에 정의되어 있는지 확인합니다. |
| 38 | 2. **우선순위 고려**: CSS의 우선순위와 상속 규칙을 이해하고, 필요한 경우 선택자의 구체성을 높입니다. | 38 | 2. **우선순위 고려**: CSS의 우선순위와 상속 규칙을 이해하고, 필요한 경우 선택자의 구체성을 높입니다. |
| 39 | 3. **테마 지원**: 다크 모드와 같은 테마를 지원하는 경우, 두 스타일 모두에 대해 수정 사항을 적용해야 합니다. | 39 | 3. **테마 지원**: 다크 모드와 같은 테마를 지원하는 경우, 두 스타일 모두에 대해 수정 사항을 적용해야 합니다. |
| 40 | 40 | ||
| 41 | ### 권장 작업 방식 | 41 | ### 권장 작업 방식 |
| 42 | 42 | ||
| 43 | 가능한 한 원본 파일을 수정하지 말고, 스킨 또는 추가 CSS 파일에서 스타일을 오버라이드하세요. 이를 통해 향후 버전 업그레이드 시 충돌을 최소화할 수 있습니다. | 43 | 가능한 한 원본 파일을 수정하지 말고, 스킨 또는 추가 CSS 파일에서 스타일을 오버라이드하세요. 이를 통해 향후 버전 업그레이드 시 충돌을 최소화할 수 있습니다. |
| 44 | 44 | ||
| 45 | ## 스타일 수정의 기본 원칙 | 45 | ## 스타일 수정의 기본 원칙 |
| 46 | 46 | ||
| 47 | 스타일 문제는 대개 “원본 CSS를 바로 수정할지”와 “오버라이드 레이어를 둘지” 선택에서 갈립니다. 장기 운영 관점에서는 원본 파일 직접 수정보다 스킨 또는 별도 패치 CSS를 두는 편이 훨씬 안전합니다. 업데이트 때 덮어쓰기 충돌을 줄일 수 있기 때문입니다. | 47 | 스타일 문제는 대개 “원본 CSS를 바로 수정할지”와 “오버라이드 레이어를 둘지” 선택에서 갈립니다. 장기 운영 관점에서는 원본 파일 직접 수정보다 스킨 또는 별도 패치 CSS를 두는 편이 훨씬 안전합니다. 업데이트 때 덮어쓰기 충돌을 줄일 수 있기 때문입니다. |
| 48 | 48 | ||
| 49 | ## 꼭 함께 확인할 화면 | 49 | ## 꼭 함께 확인할 화면 |
| 50 | 50 | ||
| 51 | 스타일을 바꾸면 작성 화면, 보기 화면, 모바일 화면, 다크 모드 화면을 반드시 함께 봐야 합니다. T2Editor는 미디어 블록과 코드 블록처럼 보기 화면에서 더 크게 드러나는 요소가 많아서, 작성 화면만 보고 끝내면 문제를 놓치기 쉽습니다. | 51 | 스타일을 바꾸면 작성 화면, 보기 화면, 모바일 화면, 다크 모드 화면을 반드시 함께 봐야 합니다. T2Editor는 미디어 블록과 코드 블록처럼 보기 화면에서 더 크게 드러나는 요소가 많아서, 작성 화면만 보고 끝내면 문제를 놓치기 쉽습니다. |
| 52 | 52 | ||
| 53 | 53 | ||
| 54 | ## 색상과 간격 수정 시 주의 | 54 | ## 색상과 간격 수정 시 주의 |
| 55 | 55 | ||
| 56 | 에디터는 텍스트보다 블록형 UI가 많기 때문에 색상만 바꿔도 대비와 여백의 균형이 함께 무너질 수 있습니다. 따라서 스타일 수정은 색상·테두리·여백을 묶어서 보는 것이 좋습니다. | 56 | 에디터는 텍스트보다 블록형 UI가 많기 때문에 색상만 바꿔도 대비와 여백의 균형이 함께 무너질 수 있습니다. 따라서 스타일 수정은 색상·테두리·여백을 묶어서 보는 것이 좋습니다. |
| 57 | 57 | ||