블록 에디터 스타일 격리 및 보호 CSS
테마나 엘리멘터 CSS의 영향을 받지 않고 에디터 설정 그대로 표시
==========================================================================
- 블록 에디터 컨테이너 기본 스타일 초기화
========================================================================== */
.wp-block-post-content,
.entry-content,
.post-content,
.content-area {
/* 기본 박스 모델 설정 */
box-sizing: border-box;
/* 폰트 초기화 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #1e1e1e;
/* 여백 초기화 */
margin: 0;
padding: 0;
/* 기본 텍스트 설정 */
text-align: left;
font-weight: 400;
font-style: normal;
text-decoration: none;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-shadow: none;
/* 배경 초기화 */
background: transparent;
border: none;
outline: none;}
/* ==========================================================================
- 모든 블록 요소 기본 스타일 재설정
========================================================================== */
.wp-block-post-content *,
.entry-content *,
.post-content *,
.content-area * {
/* 박스 모델 통일 */
box-sizing: border-box !important;
/* 테마 스타일 무효화 */
margin: 0 !important;
padding: 0 !important;
border: none !important;
outline: none !important;
background: transparent !important;
/* 폰트 상속 강제 */
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
font-weight: inherit !important;
font-style: inherit !important;
text-decoration: inherit !important;
text-align: inherit !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
text-transform: inherit !important;
text-shadow: inherit !important;
/* 레이아웃 초기화 */
position: static !important;
display: initial !important;
float: none !important;
clear: none !important;
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
/* 변형 초기화 */
transform: none !important;
transition: none !important;
animation: none !important;
/* 기타 효과 초기화 */
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
z-index: auto !important;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;}
/* ==========================================================================
- 블록 에디터 스타일 우선 적용
========================================================================== */
/* 블록 에디터 인라인 스타일 최우선 적용 */
.wp-block-post-content [style],
.entry-content [style],
.post-content [style],
.content-area [style] {
color: inherit !important;
background-color: inherit !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
font-style: inherit !important;
text-align: inherit !important;
text-decoration: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
margin: inherit !important;
padding: inherit !important;
border: inherit !important;
border-radius: inherit !important;
width: inherit !important;
height: inherit !important;
}
/* 블록 에디터 클래스 스타일 우선 적용 / .wp-block-post-content [class=”has-“],
.entry-content [class=”has-“], .post-content [class=”has-“],
.content-area [class*=”has-“] {
color: inherit !important;
background-color: inherit !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
text-align: inherit !important;
border: inherit !important;
padding: inherit !important;
margin: inherit !important;
}
/* ==========================================================================
- 블록별 기본 스타일 재정의
========================================================================== */
/* 제목 블록 */
.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6 {
display: block !important;
margin: 1em 0 !important;
font-weight: bold !important;
line-height: 1.2 !important;
}
.wp-block-post-content h1 { font-size: 2.5em !important; }
.wp-block-post-content h2 { font-size: 2em !important; }
.wp-block-post-content h3 { font-size: 1.75em !important; }
.wp-block-post-content h4 { font-size: 1.5em !important; }
.wp-block-post-content h5 { font-size: 1.25em !important; }
.wp-block-post-content h6 { font-size: 1em !important; }
/* 단락 블록 */
.wp-block-post-content p {
display: block !important;
margin: 1em 0 !important;
line-height: 1.6 !important;
}
/* 목록 블록 */
.wp-block-post-content ul,
.wp-block-post-content ol {
display: block !important;
margin: 1em 0 !important;
padding-left: 2em !important;
}
.wp-block-post-content ul {
list-style-type: disc !important;
}
.wp-block-post-content ol {
list-style-type: decimal !important;
}
.wp-block-post-content li {
display: list-item !important;
margin: 0.5em 0 !important;
line-height: 1.6 !important;
}
/* 인용 블록 */
.wp-block-quote {
border-left: 4px solid #ddd !important;
margin: 1.5em 0 !important;
padding-left: 1em !important;
font-style: italic !important;
}
/* 코드 블록 */
.wp-block-code {
background: #f4f4f4 !important;
padding: 1em !important;
margin: 1em 0 !important;
border-radius: 4px !important;
font-family: ‘Courier New’, monospace !important;
font-size: 0.9em !important;
line-height: 1.4 !important;
overflow-x: auto !important;
}
/* 이미지 블록 */
.wp-block-image {
margin: 1em 0 !important;
text-align: center !important;
}
.wp-block-image img {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* 버튼 블록 */
.wp-block-button {
margin: 1em 0 !important;
}
.wp-block-button__link {
display: inline-block !important;
padding: 0.75em 1.5em !important;
background: #007cba !important;
color: #fff !important;
text-decoration: none !important;
border-radius: 4px !important;
font-weight: bold !important;
text-align: center !important;
transition: background-color 0.3s ease !important;
}
/* 테이블 블록 */
.wp-block-table {
margin: 1em 0 !important;
width: 100% !important;
border-collapse: collapse !important;
}
.wp-block-table td,
.wp-block-table th {
border: 1px solid #ddd !important;
padding: 0.5em !important;
text-align: left !important;
}
.wp-block-table th {
background: #f9f9f9 !important;
font-weight: bold !important;
}
/* ==========================================================================
- 블록 에디터 색상 클래스 보호
========================================================================== */
/* 텍스트 색상 */
.has-text-color { color: inherit !important; }
.has-background { background-color: inherit !important; }
.has-link-color a { color: inherit !important; }
/* 기본 색상 팔레트 */
.has-black-color { color: #000000 !important; }
.has-cyan-bluish-gray-color { color: #abb8c3 !important; }
.has-white-color { color: #ffffff !important; }
.has-pale-pink-color { color: #f78da7 !important; }
.has-vivid-red-color { color: #cf2e2e !important; }
.has-luminous-vivid-orange-color { color: #ff6900 !important; }
.has-luminous-vivid-amber-color { color: #fcb900 !important; }
.has-light-green-cyan-color { color: #7bdcb5 !important; }
.has-vivid-green-cyan-color { color: #00d084 !important; }
.has-pale-cyan-blue-color { color: #8ed1fc !important; }
.has-vivid-cyan-blue-color { color: #0693e3 !important; }
.has-vivid-purple-color { color: #9b51e0 !important; }
/* 배경 색상 */
.has-black-background-color { background-color: #000000 !important; }
.has-cyan-bluish-gray-background-color { background-color: #abb8c3 !important; }
.has-white-background-color { background-color: #ffffff !important; }
.has-pale-pink-background-color { background-color: #f78da7 !important; }
.has-vivid-red-background-color { background-color: #cf2e2e !important; }
.has-luminous-vivid-orange-background-color { background-color: #ff6900 !important; }
.has-luminous-vivid-amber-background-color { background-color: #fcb900 !important; }
.has-light-green-cyan-background-color { background-color: #7bdcb5 !important; }
.has-vivid-green-cyan-background-color { background-color: #00d084 !important; }
.has-pale-cyan-blue-background-color { background-color: #8ed1fc !important; }
.has-vivid-cyan-blue-background-color { background-color: #0693e3 !important; }
.has-vivid-purple-background-color { background-color: #9b51e0 !important; }
/* ==========================================================================
- 폰트 크기 클래스 보호
========================================================================== */
.has-small-font-size { font-size: 13px !important; }
.has-medium-font-size { font-size: 16px !important; }
.has-large-font-size { font-size: 24px !important; }
.has-x-large-font-size { font-size: 32px !important; }
/* ==========================================================================
- 텍스트 정렬 클래스 보호
========================================================================== */
.has-text-align-left { text-align: left !important; }
.has-text-align-center { text-align: center !important; }
.has-text-align-right { text-align: right !important; }
.has-text-align-justify { text-align: justify !important; }
/* ==========================================================================
- 엘리멘터 및 기타 페이지 빌더 무효화
========================================================================== */
/* 엘리멘터 스타일 무효화 */
.elementor-widget-container .wp-block-post-content *,
.elementor-widget-container .entry-content *,
.elementor-section .wp-block-post-content *,
.elementor-column .wp-block-post-content * {
all: unset !important;
display: revert !important;
box-sizing: border-box !important;
}
/* 기타 페이지 빌더 무효화 */
.vc_row .wp-block-post-content *,
.wpb_column .wp-block-post-content *,
.fl-row .wp-block-post-content *,
.fl-col .wp-block-post-content * {
all: unset !important;
display: revert !important;
box-sizing: border-box !important;
}
/* ==========================================================================
- 반응형 및 접근성 보장
========================================================================== */
/* 반응형 이미지 */
.wp-block-post-content img,
.entry-content img {
max-width: 100% !important;
height: auto !important;
}
/* 접근성 향상 */
.wp-block-post-content a:focus,
.entry-content a:focus {
outline: 2px solid #007cba !important;
outline-offset: 2px !important;
}
/* ==========================================================================
- 디버깅을 위한 시각적 표시 (개발 시에만 사용)
========================================================================== */
/*
.wp-block-post-content {
border: 2px dashed #007cba !important;
position: relative !important;
}
.wp-block-post-content::before {
content: “Block Editor Content” !important;
position: absolute !important;
top: -2px !important;
left: -2px !important;
background: #007cba !important;
color: white !important;
padding: 2px 6px !important;
font-size: 12px !important;
font-weight: bold !important;
z-index: 9999 !important;
}
*/