guide v11x

Global Styles

기존 파편화 되어있던 css를 통합하여 구성했습니다.

기본속성 v11.21.0.11

`:root`

/* colors */
--nd-gray-100: #f8f9fa;
--nd-gray-200: #e8e8e9;
--nd-gray-300: #d2d2d4;
--nd-gray-400: #ced4da;
--nd-gray-500: #adb5bd;
--nd-gray-600: #6c757d;
--nd-gray-700: #495057;
--nd-gray-800: #343a40;
--nd-gray-900: #212529;
--nd-gray-dark: #343a40;
--nd-blue: #007aff;
--nd-indigo: #6610f2;
--nd-purple: #6f42c1;
--nd-pink: #dc1a5b;
--nd-red: #dc3545;
--nd-orange: #ff8811;
--nd-yellow: #ffc107;
--nd-green: #198754;
--nd-teal: #20c997;
--nd-cyan: #0dcaf0;
--nd-light: #f8f9fa;
--nd-dark: #212529;
--nd-dark-rgb: 33, 37, 41;
--nd-black: #000;
--nd-black-rgb: 0, 0, 0;
--nd-white: #fff;
--nd-white-rgb: 255, 255, 255;
--nd-primary: #007aff;
--nd-primary-rgb: 0, 122, 255;
--nd-primary-hover: #006ee6;
--nd-primary-active: #0062cc;
--nd-secondary: #6c757d;
--nd-secondary-rgb: 108, 117, 125;
--nd-success: #198754;
--nd-success-rgb: 25, 135, 84;
--nd-info: #0dcaf0;
--nd-info-rgb: 13, 202, 240;
--nd-warning: #ff8811;
--nd-warning-rgb: 255, 136, 17;
--nd-danger: #dc3545;
--nd-danger-rgb: 220, 53, 69;

/* fonts */
--nd-font-sans-serif: system-ui, -apple-system, sans-serif;
--nd-font-monospace: Consolas, Liberation Mono, Courier, monospace;
--nd-user-font-family: 'Inter', 'Noto Sans KR', sans-serif;
--nd-system-font-family: var(--nd-font-sans-serif);
--nd-system-font-size: 0.875rem;

/* sizes */
--nd-site-width: 1080px;
--nd-index-width: 1080px;
--nd-writing-content-max-width: 600px;

/* body */
--nd-body-padding: 0;
--nd-body-font-family: var(--nd-user-font-family, sans-serif);
--nd-body-font-size: 1rem;
--nd-body-font-weight: 400;
--nd-body-line-height: 1.5;
--nd-body-color: #000;
--nd-body-color-rgb: 0, 0, 0;
--nd-body-bg: #fff;
--nd-body-bg-rgb: 255, 255, 255;
--nd-body-letter-spacing: -0.5px;

/* border radius */
--nd-border-radius: 0.25rem;
--nd-border-radius-pill: 50rem;

사용법(예시)

// 전역 설정
:root {
    --nd-body-font-family: var(--nd-user-font-family);
}

// 셀렉터 자식 요소 설정
div {
    --nd-body-font-family: var(--nd-user-font-family, 대체값);
}

// 설정 값 가져오기
.my-class {
    color: var(--nd-primary, 대체값);
}

// 설정 값 변경 후 가져오기
.my-class {
    --nd-primary: #cc0000;
    color: var(--nd-whtie);
    background-color: var(--nd-primary);
}

추가스타일

파일	포함영역	활용범위
font.style.css	모든 페이지	웹폰트 추가/수정(관리자폰트는 제외)
article.style.css	top.html	기사와 관련한 내용 추가/수정 템플릿 추가/수정 기사작성, 게시판글쓰기 에디터(iframe)내에 design.style.css의 전역 내용이 들어가기에는 부적절하여 분리 적용(v2 모델 전체)
	mobileTop.html
	adminTop.html
	ckeditor
design.style.css	ckeditor를 제외한 모든 페이지	페이지 전반에 관한 내용 추가/수정

구조도

현재(v11x)	이전(fl)	포함요소
common.css	foundation.css	Float Grid Forms Typography Button Button Group Close Button Label Switch Table Badge Breadcrumbs Callout Dropdown Tooltip Accordion Responsive Embed Tabs Thumbnail Menu Accordion Menu Drilldown Menu Dropdown Menu Off Canvas Reveal Sticky Float Classes Flex Classes Visibility Classes Prototype Classes
	custom.foundation.css	Skip Nav Colors (user-bg, user-point) Nd Alert Panel
	webfonts.css
	media.css	Display Position Overflow Float Pointer Events Font Family Font Size Line Height Margin Padding Text Colors
	신규추가	Motion Ui (상세내용) Scrollbars(webkit엔진) Util Search Group Sns Colors
plugin.css	jquery-ui.css
	jquery-timepicker.css
	jquery-timepicker-custom.css
	codemirror.css	codemirror-base16-dark.css
	image-editor.css
	lightbox.css
	slick.css
	aos.css
admin.css	admin.css
	style.css	Vote Off Canvas(전체메뉴) Index(메인구성) Sections(기사리스트) Articles(기사뷰) Manual Articles(수동기사) Templates Comment Tabs Box Ad Ad Manage Bbs Emoji Pdf Calendar Photobox Scrap Poll Serial Privacy
	autobox.style.css
	templates.style.css
	tv.style.css
	tag-it.css
	dropzone.css
	apexcharts.css
	신규추가	Ndcon
style.css	style.css	Vote Off Canvas(전체메뉴) Index(메인구성) Sections(기사리스트) Articles(기사뷰) Manual Articles(수동기사) Templates Comment Tabs Box Ad Ad Manage Bbs Emoji Pdf Calendar Photobox Scrap Poll Serial Privacy
	autobox.style.css
	templates.style.css
broadcast.css	tv.style.css
company.css	com.style.css
zoom.css	photo.zoom.css
weather.css	weather.style.css
member.css	member.style.css