guide v11x

기사뷰

기사뷰 구성 요소입니다.

Class

Class	비고
#article-view	전체영역 (옵션보기)
#article-view	관련	`.wrapper` `.article-view-header` `.article-view-content` `.article-view-body` `.view-in-banner` `.outside-article` `.article-cardnews` `.info-group`
.heading	제목 (옵션보기)
.subheading	부제목 (옵션보기)
.shoulder	어깨제목 (옵션보기)
.infomation	기사정보
.photo-layout	이미지
.quick-tool	기능버튼 (프린트,글씨크기,SNS등)
.quick-tool	관련	`.tool` `.font-size`
.helper-tool v11.22	2025 기능버튼 (옵션보기)
	관련	`.page-share` `.page-scrap` `.page-print` `.font-size`
	옵션	`.hover` `.active` `.helper-tool-group` (부모)
.fontsize v11.22	2025 폰트설정 (옵션보기)
.fontsize v11.22	관련	`.fontsize-header` `.fontsize-title` `.fontsize-slider` `.fontsize-slider-bar` `.fontsize-slider-item` `.fontsize-preview`
.writer	작성자
.writer	관련	`.item` `.profile` `.account` `.article-more` `.article-copy`
.article-writer v11.22	2025 작성자 (옵션보기)
.article-writer v11.22	관련	`.article-writer-account` `.article-writer-image` `.article-writer-content` `.article-writer-name` `.article-writer-mail` `.article-writer-more`
.article-copyright v11.22	2025 저작권 (옵션보기)
.relation	관련기사 (옵션보기)
.relation	관련	`.titles` `.list`
.tag	키워드 (옵션보기)
.tag	관련	`.tag-group` (부모)
.social-group	SNS (옵션보기)
	옵션	`.for-other` `.article-view-sns`
	관련	`.sns`
#sticky-header	따라다니는 상단
.aht-wrapper	따라다니는 본문상단
.aht-wrapper	관련	`.item` `.item.logo` `.item.titles` `.item.options` `.aht-title-view` `.aht-btn` `.aht-btn.prev` `.aht-btn.next` `.aht-control` `.aht-bar`
.article-lang	번역
.article-lang	관련	`.lang-btns`

Folders

이름	비고
default○○	기본(공통)형 스킨
A○○	뉴스형 스킨
B○○	블로그, 매거진형 스킨
C○○	미디어형 스킨

Custom Functions

`#article-view`

/* body */
--nd-atl-view-font-size:                1.125rem;
--nd-atl-view-font-weight:              400;
--nd-atl-view-line-height:              1.72;
--nd-atl-view-item-gutter-y:            1.5em;

/* breadcrumbs */
--nd-breadcrumbs-margin:                0;
--nd-breadcrumbs-item-font-size:        inherit;
--nd-breadcrumbs-item-color:            inherit;
--nd-breadcrumbs-item-active-color:     #000;
--nd-breadcrumbs-item-disabled-color:   #ced4da;
--nd-breadcrumbs-item-margin-x:         0.75rem;
--nd-breadcrumbs-divider:               "|";
--nd-breadcrumbs-divider-color:         #ced4da;

`.heading`

--nd-heading-margin-top:                1.5rem;
--nd-heading-margin-bottom:             1rem;
--nd-heading-font-size:                 2.5rem;
--nd-heading-font-weight:               700;
--nd-heading-line-height:               1.2;
--nd-heading-color:                     inherit;
--nd-heading-letter-spacing:            inherit;

`.subheading`

--nd-subheading-margin-bottom:          1.5rem;
--nd-subheading-padding-left:           1rem;
--nd-subheading-font-size:              1.25em;
--nd-subheading-font-weight:            400;
--nd-subheading-line-height:            inherit;
--nd-subheading-color:                  inherit;
--nd-subheading-border:                 3px solid #6c757d;

`.shoulder`

--nd-shoulder-display:                  inline-block;
--nd-shoulder-width:                    auto;
--nd-shoulder-max-width:                100%;
--nd-shoulder-margin:                   1rem 0 0.75rem;
--nd-shoulder-padding:                  0.375rem 0.75rem;
--nd-shoulder-font-size:                1em;
--nd-shoulder-font-weight:              400;
--nd-shoulder-line-height:              1.2;
--nd-shoulder-color:                    #fff;
--nd-shoulder-bg:                       #212529;
--nd-shoulder-border:                   0;
--nd-shoulder-border-radius:            0;

`.helper-tool`

--nd-tool-width:                        2.5rem;
--nd-tool-height:                       2.5rem;
--nd-tool-font-size:                    1.5rem;
--nd-tool-color:                        var(--nd-dark, #212529);
--nd-tool-bg:                           transparent;
--nd-tool-border:                       0;
--nd-tool-border-radius:                var(--nd-border-radius, 0.25rem);

/* hover */
--nd-tool-hover-color:                  var(--nd-body-color, #000);
--nd-tool-hover-bg:                     var(--nd-light, #f8f9fa);
--nd-tool-hover-border-color:           transparent;

/* active */
--nd-tool-active-color:                 var(--nd-body-color, #000);
--nd-tool-active-bg:                    var(--nd-light, #f8f9fa);
--nd-tool-active-border-color:          transparent;

`.helper-tool.page-share` 지정위치사용

--nd-tool-icon:                         url("data:image/svg+xml,%3Csvg width='24' height='24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23000'%3E%3Cpath d='M18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m15.5 6.5-7 4M8.5 13.5l7 4' stroke='%23000'/%3E%3C/svg%3E");

`.helper-tool.page-scrap` 지정위치사용

--nd-tool-icon:                         url("data:image/svg+xml,%3Csvg width='24' height='24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23000'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16l-5.918-3.805a2 2 0 0 0-2.164 0L5 21z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

`.helper-tool.page-print` 지정위치사용

--nd-tool-icon:                         url("data:image/svg+xml,%3Csvg width='24' height='24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23000'%3E%3Cpath d='M17.571 18H20.4a.6.6 0 0 0 .6-.6V11a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v6.4a.6.6 0 0 0 .6.6h2.829M8 7V3.6a.6.6 0 0 1 .6-.6h6.8a.6.6 0 0 1 .6.6V7' stroke='%23000'/%3E%3Cpath d='M6.098 20.315 6.428 18l.498-3.485A.6.6 0 0 1 7.52 14h8.96a.6.6 0 0 1 .594.515L17.57 18l.331 2.315a.6.6 0 0 1-.594.685H6.692a.6.6 0 0 1-.594-.685z' stroke='%23000'/%3E%3Cpath d='m17 10.01.01-.011' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

`.helper-tool.font-size` 지정위치사용

--nd-tool-icon:                         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.52 5.34h2.59c0 1.7-.23 3.31-.7 4.81-.47 1.51-1.24 2.89-2.32 4.14s-2.56 2.35-4.45 3.3l-1.48-2.02c1.45-.76 2.65-1.6 3.58-2.53.94-.93 1.63-1.99 2.09-3.19.46-1.19.68-2.55.68-4.06v-.47zm-5.41 0h6.75v2.12H5.11V5.34zm9.83-1.73h2.66v16.78h-2.66V3.61zm1.98 6.32h2.92v2.16h-2.92V9.93z' fill='%23000'/%3E%3C/svg%3E");

`.helper-tool-group` 지정위치사용

--nd-dropdown-width:                    18.5rem;
--nd-dropdown-padding-x:                1.25rem;
--nd-dropdown-padding-y:                var(--nd-dropdown-padding-x);
--nd-dropdown-padding:                  var(--nd-dropdown-padding-y) var(--nd-dropdown-padding-x);
--nd-dropdown-font-size:                var(--nd-body-font-size, 1em);
--nd-dropdown-bg:                       var(--nd-white, #fff);
--nd-dropdown-border:                   1px solid var(--nd-dark, #212529);
--nd-dropdown-border-radius:            var(--atlview-radius);

`.fontsize-slider`

--nd-slider-offset:                     calc(.5 * var(--nd-slider-item-width)) auto;
--nd-slider-line-width:                 2px;
--nd-slider-line-bg:                    var(--nd-gray-300, #d2d2d4);
--nd-slider-icon-offset-x:              calc(var(--nd-slider-icon-left) + var(--nd-slider-offset, calc(.5 * var(--nd-slider-item-width))));
--nd-slider-icon-width:                 1rem;
--nd-slider-icon-height:                1rem;
--nd-slider-icon-bg:                    var(--nd-primary, #007aff);
--nd-slider-item-width:                 20%;
--nd-slider-preview-font-size:          1.125rem;

`.article-writer`

--nd-writer-margin:                     3rem 0 1.5rem;
--nd-writer-padding:                    1.5rem 0;
--nd-writer-bg:                         transparent;
--nd-writer-border-width:               1px 0;
--nd-writer-border-style:               solid;
--nd-writer-border-color:               var(--nd-gray-300, #d2d2d4);

`.article-writer-image`

--nd-writer-image-width:                2.5rem;
--nd-writer-image-height:               2.5rem;
--nd-writer-image-margin:               0 0.75rem 0 0;
--nd-writer-image-bg:                   var(--nd-light, #f8f9fa);
--nd-writer-image-border:               1px solid rgba(var(--nd-black-rgb, rgba(0,0,0,.08)), .08);
--nd-writer-image-border-radius:        var(--nd-border-radius-pill, 50rem);
--nd-writer-image-object-fit:           cover;
--nd-writer-image-ratio:                1 / 1;

`.article-writer-name`

--nd-writer-name-font-size:             1rem;
--nd-writer-name-font-weight:           600;
--nd-writer-name-line-height:           24px;
--nd-writer-name-color:                 inherit;

`.article-writer-mail`

--nd-writer-mail-margin:                0.125rem 0 0;
--nd-writer-mail-font-size:             0.8125rem;
--nd-writer-mail-font-weight:           400;
--nd-writer-mail-line-height:           21px;
--nd-writer-mail-color:                 var(--nd-secondary, #6c757d);

`.article-writer-more`

--nd-writer-more-display:               block;
--nd-writer-more-margin:                0 0 0 auto;
--nd-writer-more-padding:               0.25rem 0.75rem;
--nd-writer-more-font-size:             0.875rem;
--nd-writer-more-font-weight:           400;
--nd-writer-more-line-height:           1.5;
--nd-writer-more-color:                 var(--nd-white, #fff);
--nd-writer-more-bg:                    var(--nd-primary, #007aff);
--nd-writer-more-border:                0;
--nd-writer-more-border-radius:         0;

/* hover */
--nd-writer-more-hover-color:           var(--nd-white, #fff);
--nd-writer-more-hover-bg:              var(--nd-primary-hover, #006ee6);
--nd-writer-more-hover-border-color:    transparent;

`.article-copyright`

--nd-copyright-margin:                  3rem 0;
--nd-copyright-font-size:               1rem;
--nd-copyright-font-weight:             400;
--nd-copyright-line-height:             inherit;
--nd-copyright-color:                   inherit;

`.relation`

--nd-relation-margin:                   0 0 1.5rem;
--nd-relation-padding:                  0;
--nd-relation-font-size:                1rem;
--nd-relation-border:                   0;
--nd-relation-border-radius:            0;

/* title */
--nd-relation-title-margin-bottom:      1rem;
--nd-relation-title-font-size:          1em;
--nd-relation-title-font-weight:        700;
--nd-relation-title-line-height:        inherit;
--nd-relation-title-color:              inherit;

/* list */
--nd-relation-list-gap:                 0.5rem;
--nd-relation-list-margin:              0;
--nd-relation-list-padding:             0;
--nd-relation-list-font-size:           1em;
--nd-relation-list-font-weight:         400;
--nd-relation-list-line-height:         1.5;
--nd-relation-list-color:               #000;

/* icon */
--nd-relation-list-icon-width:          0.375em;
--nd-relation-list-icon-height:         0.375em;
--nd-relation-list-icon-margin-right:   0.5em;
--nd-relation-list-icon-bg:             transparent;
--nd-relation-list-icon-border-width:   0 0 1px 1px;
--nd-relation-list-icon-border-style:   solid;
--nd-relation-list-icon-border-color:   currentColor;
--nd-relation-list-icon-border-radius:  0;

`.tag`

--nd-tag-padding:                       0.25rem 0.5rem;
--nd-tag-font-size:                     0.875em;
--nd-tag-font-weight:                   400;
--nd-tag-line-height:                   1.5;
--nd-tag-color:                         #000;
--nd-tag-bg:                            transparent;
--nd-tag-border:                        1px solid #000;
--nd-tag-border-radius:                 50rem;

/* hover */
--nd-tag-hover-color:                   var(--nd-primary);
--nd-tag-hover-bg:                      transparent;
--nd-tag-hover-border-color:            var(--nd-primary);

`.tag-group`

--nd-tag-group-gap:                     0.25rem;
--nd-tag-group-margin:                  3rem 0;

`.social-group`

--nd-sns-width:                         2.25rem;
--nd-sns-height:                        2.25rem;
--nd-sns-padding:                       0;
--nd-sns-font-size:                     1rem;
--nd-sns-color:                         #fff;
--nd-sns-bg:                            #6c757d;
--nd-sns-border:                        0;
--nd-sns-border-radius:                 0;

/* hover */
--nd-sns-hover-color:                   #fff;
--nd-sns-hover-bg:                      #495057;

/* group */
--nd-sns-group-gap:                     0;

`.social-group.for-other` 지정위치사용

--nd-sns-width:                         100%;
--nd-sns-height:                        auto;
--nd-sns-padding:                       1.25rem 0.5rem;
--nd-sns-font-size:                     1.5rem;

/* group */
--nd-sns-group-gap:                     1rem;
--nd-sns-group-cols:                    repeat(4, 1fr);
--nd-sns-group-rows:                    repeat(1, 1fr);

Class 폴더명 선택자 변수

Class

Folders

Custom Functions

#article-view

.heading

.subheading

.shoulder

.helper-tool

.helper-tool.page-share 지정위치사용

.helper-tool.page-scrap 지정위치사용

.helper-tool.page-print 지정위치사용

.helper-tool.font-size 지정위치사용

.helper-tool-group 지정위치사용

.fontsize-slider

.article-writer

.article-writer-image

.article-writer-name

.article-writer-mail

.article-writer-more

.article-copyright

.relation

.tag

.tag-group

.social-group

.social-group.for-other 지정위치사용

`#article-view`

`.heading`

`.subheading`

`.shoulder`

`.helper-tool`

`.helper-tool.page-share` 지정위치사용

`.helper-tool.page-scrap` 지정위치사용

`.helper-tool.page-print` 지정위치사용

`.helper-tool.font-size` 지정위치사용

`.helper-tool-group` 지정위치사용

`.fontsize-slider`

`.article-writer`

`.article-writer-image`

`.article-writer-name`

`.article-writer-mail`

`.article-writer-more`

`.article-copyright`

`.relation`

`.tag`

`.tag-group`

`.social-group`

`.social-group.for-other` 지정위치사용