레이아웃
자주 활용하는 id / class를 정리하여 통일감을 주었습니다.
신규/리뉴얼 및 유지보수는 design.style.css 문서를 수정해주세요.
class 표기 순서
| 순서 | 속성 | 비고 |
|---|---|---|
| 1 | display | 표시 |
| 2 | overflow | 넘침 |
| 3 | float | 흐름 |
| 4 | position | 위치 |
| 5 | z-index | 정렬 |
| 6 | width & height | 크기 |
| 7 | margin & padding | 간격 |
| 8 | font | 폰트 (속성 나열 : font-family, font-size, font-weight, font-style, font-variant, line-height) |
| 9 | color | 폰트색상 |
| 10 | background | 배경 |
| 11 | border | 테두리 |
| 12 | etc(기타) | text-decoration,text-indent,clear... |
class 기본 레이아웃
디자인에 사용되는 아이디값은 정의된 내용 외엔 사용을 금합니다. 모든 디자인은 class를 기본으로 사용됩니다. 조합방법은 대분류[user/admin/공통(미기재)] - 페이지명 - 속성순이며, _(언더바)는 사용은 하지 않습니다.
| ID/Class | 사용 | 관련 | 설명 |
|---|---|---|---|
| #wrap | 전체 | .user | 사용자 |
| .admin | 관리자 | ||
| .mobile | 모바일 | ||
| #user-logo | 최상단 로고영역 | ||
| #user-header | 사용자 상단 | .user-gnb | 최상단 |
| .user-logo | 로고 | ||
| .user-banner | 배너 | ||
| .user-container | 사용자 본문 (옵션 보기) |
|
날개배너 |
| .user-content | 본문내용 | ||
| .user-snb | 본문 좌내용 | ||
| .user-aside | 본문 우내용 | ||
|
레이아웃 | ||
| #user-footer | 사용자 하단 | .user-sitemap | 사이트맵 |
| .ndsoft | 엔디소프트 바로가기 | ||
| .user-address | 주소 및 카피라이트 | ||
| 공통요소 | 모든영역 |
|
가로크기 (옵션 보기) |
| .user-nav | 메뉴 | ||
| .user-search | 검색영역 | ||
| .user-logbox | 로그인영역 | ||
| .user-sns | 소셜네트워크 | ||
| .user-intro | 시작페이지/즐겨찾기 | ||
| .user-etc | 기타 | ||
class 기본 속성
| 구분 | Class | 설명 |
|---|---|---|
| display | .dis-[value] | none, block, inblock, inline, table, table-row, table-cell, flex, grid |
| overflow | .flow-[value] | visible, hidden, auto, scroll |
| float | .float-[value] | left, right, none |
| .medium-float-[value] | ||
| .small-float-[value] | ||
| position | .posi-[value] | ih(inherit), re(relative), ab(absolute), st(static), fx(fixed) |
| margin | .mar[position]-0 ~ 50 | mar, martop, maright, marbtm, marleft, marx, mary |
| padding | .pad[position]-0 ~ 50 | pad, padtop, padright, padbtm, padleft, padx, pady |
| font | .size-1 ~ 50 | font-size:0.063rem(1px) 폰트크기 : rem단위 / class의 숫자 : 픽셀값 |
| .font-[family] | gulim, dotum, batang, sans-serif, serif | |
| .fw-[weight] | lighter, light, normal, medium, semibold, bold, bolder | |
| .weight-[number] | 100, 200, 300, 400, 500, 600, 700, 800, 900 | |
| .letter-0 ~ 5 | -0.25px, -0.5px, -0.75px, -1px, -1.25px (letter-spacing) | |
| line-height | .line-1 ~ 9 | 폰트 크기의 상대 비율(%)로 지정 |
|
||
| .line-x1 ~ 6 | 부모에서 상속 받은 line-height값으로 줄 수 지정 | |
| .line-(1 ~ 9)x(1 ~ 6) | 1~6줄까지 line-height값을 포함하여 설정 시 사용 | |
[설명] .line-4x3 (max-height:4.125em;line-height:1.375;-webkit-line-clamp:3;) |
||
| color | .text-[color] | primary, secondary, success, warning, alert, pink, dark, muted, black, white, ndonly |
|
사용자 대표색상 | |
| pointer-events |
|
포인터 이벤트 |