Rinjae
b7c8e7f41c
- API 그룹 팝업(djbApiGroupPopup.jsp) 화면 파일 추가 - Swagger Validator (djb-swagger-validator.js) 및 관련 리팩토링 - Summernote 콘텐츠 스타일 정의 (editor-content.css) 추가
335 lines
8.3 KiB
CSS
335 lines
8.3 KiB
CSS
/**
|
|
* Editor Content Styles (editor-content.css)
|
|
*
|
|
* Summernote 에디터로 작성된 HTML 콘텐츠의 공통 스타일
|
|
* 관리자포탈/개발자포탈 양쪽에서 동일하게 사용
|
|
*
|
|
* 사용법:
|
|
* - 관리자포탈: Summernote .note-editable에 .editor-content 클래스 추가
|
|
* - 개발자포탈: 콘텐츠 wrapper에 .editor-content 클래스 추가
|
|
*
|
|
* @version 1.0.0
|
|
* @date 2025-12-30
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
CSS Reset + 기본 설정
|
|
========================================================================== */
|
|
|
|
.editor-content {
|
|
all: revert;
|
|
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
|
|
font-size: 16px !important;
|
|
font-weight: 400 !important;
|
|
line-height: 1.8 !important;
|
|
color: #1A1A2E !important;
|
|
word-wrap: break-word;
|
|
text-align: left !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
헤딩 (Headings)
|
|
========================================================================== */
|
|
|
|
.editor-content h1 {
|
|
font-size: 20px !important;
|
|
font-weight: 700 !important;
|
|
margin: 32px 0 16px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content h1:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.editor-content h2 {
|
|
font-size: 18px !important;
|
|
font-weight: 700 !important;
|
|
margin: 24px 0 8px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content h3 {
|
|
font-size: 16px !important;
|
|
font-weight: 600 !important;
|
|
margin: 16px 0 8px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content h4,
|
|
.editor-content h5,
|
|
.editor-content h6 {
|
|
font-size: 16px !important;
|
|
font-weight: 600 !important;
|
|
margin: 16px 0 8px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
단락 (Paragraphs)
|
|
========================================================================== */
|
|
|
|
.editor-content p {
|
|
margin-bottom: 16px !important;
|
|
line-height: 1.8 !important;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.editor-content p:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
리스트 (Lists) - 글로벌 reset 대응
|
|
========================================================================== */
|
|
|
|
.editor-content ul {
|
|
list-style-type: disc !important;
|
|
padding-left: 32px !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
.editor-content ol {
|
|
list-style-type: decimal !important;
|
|
padding-left: 32px !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
.editor-content li {
|
|
margin-bottom: 8px !important;
|
|
line-height: 1.8 !important;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.editor-content li:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* 중첩 리스트 */
|
|
.editor-content ul ul {
|
|
list-style-type: circle !important;
|
|
margin: 8px 0 !important;
|
|
}
|
|
|
|
.editor-content ul ul ul {
|
|
list-style-type: square !important;
|
|
}
|
|
|
|
.editor-content ol ol {
|
|
list-style-type: lower-alpha !important;
|
|
margin: 8px 0 !important;
|
|
}
|
|
|
|
.editor-content ol ol ol {
|
|
list-style-type: lower-roman !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
테이블 (Tables)
|
|
========================================================================== */
|
|
|
|
.editor-content table {
|
|
width: 100% !important;
|
|
border-collapse: collapse !important;
|
|
margin: 24px 0 !important;
|
|
border: 1px solid #E2E8F0 !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content th,
|
|
.editor-content td {
|
|
border: 1px solid #E2E8F0 !important;
|
|
padding: 8px 16px !important;
|
|
text-align: left !important;
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
.editor-content th {
|
|
background: #EFF6FF !important;
|
|
font-weight: 600 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content tr:hover {
|
|
background: #F8FAFC !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
링크 (Links)
|
|
========================================================================== */
|
|
|
|
.editor-content a {
|
|
color: #0049b4 !important;
|
|
text-decoration: underline !important;
|
|
transition: color 0.3s ease !important;
|
|
}
|
|
|
|
.editor-content a:hover {
|
|
color: #003080 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
인용문 (Blockquote)
|
|
========================================================================== */
|
|
|
|
.editor-content blockquote {
|
|
border-left: 4px solid #0049b4 !important;
|
|
padding: 16px 24px !important;
|
|
margin: 24px 0 !important;
|
|
background: #F8FAFC !important;
|
|
font-style: italic !important;
|
|
color: #64748B !important;
|
|
border-radius: 0 8px 8px 0 !important;
|
|
}
|
|
|
|
.editor-content blockquote p {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
이미지 (Images)
|
|
========================================================================== */
|
|
|
|
.editor-content img {
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
border-radius: 8px !important;
|
|
margin: 16px 0 !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
코드 (Code)
|
|
========================================================================== */
|
|
|
|
.editor-content code {
|
|
background: #F8FAFC !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: 4px !important;
|
|
font-family: 'Fira Code', 'Courier New', monospace !important;
|
|
font-size: 0.9em !important;
|
|
color: #0049b4 !important;
|
|
}
|
|
|
|
.editor-content pre {
|
|
background: #F8FAFC !important;
|
|
border: 1px solid #E2E8F0 !important;
|
|
border-radius: 8px !important;
|
|
padding: 16px !important;
|
|
overflow-x: auto !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
.editor-content pre code {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
구분선 (Horizontal Rule)
|
|
========================================================================== */
|
|
|
|
.editor-content hr {
|
|
border: none !important;
|
|
border-top: 1px solid #E2E8F0 !important;
|
|
margin: 32px 0 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
텍스트 강조 (Text Emphasis)
|
|
========================================================================== */
|
|
|
|
.editor-content strong,
|
|
.editor-content b {
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.editor-content em,
|
|
.editor-content i {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.editor-content u {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.editor-content s,
|
|
.editor-content strike,
|
|
.editor-content del {
|
|
text-decoration: line-through !important;
|
|
}
|
|
|
|
.editor-content mark {
|
|
background-color: #FEF3C7 !important;
|
|
padding: 0 2px !important;
|
|
}
|
|
|
|
.editor-content sub {
|
|
vertical-align: sub !important;
|
|
font-size: 0.8em !important;
|
|
}
|
|
|
|
.editor-content sup {
|
|
vertical-align: super !important;
|
|
font-size: 0.8em !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
반응형 (Responsive)
|
|
========================================================================== */
|
|
|
|
@media (max-width: 768px) {
|
|
.editor-content {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content h1 {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.editor-content h2 {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.editor-content h3,
|
|
.editor-content h4,
|
|
.editor-content h5,
|
|
.editor-content h6 {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content p,
|
|
.editor-content li {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content table {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.editor-content th,
|
|
.editor-content td {
|
|
padding: 4px 8px !important;
|
|
}
|
|
|
|
.editor-content ul,
|
|
.editor-content ol {
|
|
padding-left: 24px !important;
|
|
}
|
|
|
|
.editor-content blockquote {
|
|
padding: 8px 16px !important;
|
|
}
|
|
|
|
.editor-content pre {
|
|
padding: 8px !important;
|
|
}
|
|
}
|