신규/리뉴얼 및 유지보수는 design.style.css문서에 수정해주십시오.
| 순서 | 속성 | 비고 |
|---|---|---|
| 1 | display | 표시 |
| 2 | overflow | 넘침 |
| 3 | float | 흐름 |
| 4 | position | 위치 |
| 5 | z-index | 정렬 |
| 6 | width & height | 크기 |
| 7 | margin & padding | 간격 |
| 8 | font | 폰트 (속성 나열 : font-style, font-varian, font-weight, font-size, line-height, font-family) |
| 9 | color | 폰트색상 |
| 10 | background | 배경 |
| 11 | border | 보더 |
| 12 | etc(기타) | text-decoration,text-indent,clear... |
디자인에 사용되는 아이디값은 정의된 내용외엔 사용을 금합니다. 모든 디자인은 class를 기본으로 사용됩니다.
조합방법은 대분류[admin/user/공통(미기재)] - 페이지명 - 속성순이며, _(언더바)는 사용은 하지 않습니다.
| 아이디명 | 클래스명 | 사용범위 | 비고 |
|---|---|---|---|
| #user-wrap / #admin-wrap | 전체영역 | ||
| #user-gnb / #admin-gnb | 최상단영역 | 로그인/시작페이지 등 | |
| #user-header / #admin-header | .user-logo / .admin-logo | 상단로고 | |
| .user-banner / .admin-banner | 상단배너 | ||
| #user-logo / #admin-logo | 최상단 로고영역 | ||
| #user-nav / #admin-nav | 메뉴영역 | ||
| #user-container / #admin-container | 본문전체영역 | ||
| .grid-1 ~ 10 | 메인화면 1단 | ||
| .view-aside.left-wing | 좌측날개배너 | 기사리스트/뷰 .view-aside.left-wing.article |
|
| .view-aside.right-wing | 우측날개배너 | 기사리스트/뷰 .view-aside.right-wing.article |
|
| .user-content / .admin-content | 본문내용 | ||
| .user-snb / .admin-snb | 본문 좌내용 | ||
| .user-aside / .admin-aside | 본문 우내용 | ||
| #user-footer / #admin-footer | 하단영역 | ||
| .user-nav / .admin-nav | 하단메뉴 | ||
| .user-address / .admin-address | 주소 및 카피라이트 | ||
| .ndsoft | 엔디로고 | ||
| 모든요소 | .user-search / .admin-search | 검색영역 | |
| .user-logbox / .admin-logbox | 로그인영역 | ||
| .user-sns / .admin-sns | 소셜네트워크 | ||
| .user-intro / .admin-intro | 시작페이지/즐겨찾기 | ||
| .user-etc / .admin-etc | 기타 |
| 구분 | 클래스명 | 비고 |
|---|---|---|
| position 속성 | .posi-re | position:relative |
| .posi-ab | position:absolute | |
| .posi-st | position:sratic | |
| .posi-fx | position:fixed | |
| .posi-ih | position:inherit | |
| float 속성 | .float-inherit | float:inherit |
| .float-left |
float:left foundation 기본 설정 값. 디바이스별 설정을 원하실 경우 small-float-left medium-float-left large-float-left를 이용할 수 있음 |
|
| .float-right |
float:right foundation 기본 설정 값. 디바이스별 설정을 원하실 경우 small-float-right medium-float-right large-float-right를을 이용할 수 있음 |
|
| .float-center |
float:none;margin:0 auto foundation 기본 설정 값. 컨텐츠의 가운데 설정을 원할 경우 사용 |
|
| .clearfix |
clear:both foundation 기본 설정 값. ::after 가상선택자에 display:table;clear:both가 선언되어 있음. float값을 초기화 해주기 위해 사용되며, float값을 사용한 레이어 뒤에 <div class="clearfix"></div>와 같이 선언하여 사용함.
|
|
| display 속성 | .dis-none | display:none |
| .dis-block | display:block | |
| .dis-inblock | display:inline-block | |
| .dis-inline | display:inline | |
| .dis-table |
display:table 레이어 테이블화 : table은 <table>과 같은 속성 |
|
| .dis-table-row |
display:table-row 레이어 테이블화 : table-row는 <table>의 <tr>과 같은 속성 |
|
| .dis-table-cell |
display:table-cell 레이어 테이블화 : table-cell는 <table>의 <td>과 같은 속성 |
|
| overflow 속성 | .flow-visible | overflow:visible |
| .flow-hidden | overflow:hidden | |
| .flow-scroll | overflow:scroll | |
| .flow-auto | overflow:auto | |
| .flow-initial | overflow:initial | |
| .flow-x-hidden | overflow-x:hidden | |
| .flow-x-auto | overflow-x:auto | |
| .flow-x-inherit | overflow-x:inherit | |
| .flow-y-hidden | overflow-y:hidden | |
| .flow-y-auto | overflow-y:auto | |
| .flow-y-inherit | overflow-y:inherit | |
| ul, ol 속성 | .no-bullet |
list-style:none foundation 기본 설정 값. |
| text 속성 | .text-left |
text-align:left foundation 기본 설정 값. 디바이스별 설정을 원하실 경우 small-text-left, medium-text-left, large-text-left을 이용할 수 있음. |
| .text-right |
text-align:right foundation 기본 설정 값. 디바이스별 설정을 원하실 경우 small-text-right, medium-text-right, large-text-right을 이용할 수 있음. |
|
| .text-center |
text-align:center foundation 기본 설정 값. 디바이스별 설정을 원하실 경우 small-text-center, medium-text-center, large-text-center을 이용할 수 있음. |
|
| .text-justify |
text-align:justify foundation 기본 설정 값. |
|
| padding 속성 | .auto-pad-1 ~ 50 | padding:1px |
| .auto-padx-1 ~ 50 | padding-left:1px;padding-right:1px | |
| .auto-pady-1 ~ 50 | padding-top:1px;padding-bottom:1px | |
| .auto-padleft-1 ~ 50 | padding-left:1px | |
| .auto-padright-1 ~ 50 | padding-right:1px | |
| .auto-padtop-1 ~ 50 | padding-top:1px | |
| .auto-padbtm-1 ~ 50 | padding-bottom:1px | |
| margin 속성 | .auto-mar-1 ~ 50 | margin:1px |
| .auto-marx-1 ~ 50 | margin-left:1px;margin-right:1px | |
| .auto-mary-1 ~ 50 | margin-top:1px;margin-bottom:1px | |
| .auto-marleft-1 ~ 50 | margin-left:1px | |
| .auto-maright-1 ~ 50 | margin-right:1px | |
| .auto-martop-1 ~ 50 | margin-top:1px | |
| .auto-marbtm-1 ~ 50 | margin-bottom:1px | |
| 각 크기속성 | .size-1 ~ 50 |
font-size:0.063em(1px) 폰트크기를 em단위로 설정함. class의 숫자는 픽셀값으로 입력하면 됨. |
| .font-dotum, .font-gulim |
font-family:dotum font-family:gulim |
|
| .width-0 ~ 1300 |
width:1px .width-auto : width:auto .width-0 : width:0 .width-full : width:100% class의 숫자는 픽셀값으로 입력하면 됨. |
|
| .width-calc-1 ~ 10 |
width:calc(100% - 1px) 100%값에서 1~10px까지 뺌. small-width-calc-1~10, medium-width-calc-1~10 |
|
| .max-width-1 ~ 1300 | max-width:1px | |
| .min-width-1 ~ 1300 | min-width:1px | |
| .width-pec-1 ~ 99 | width:1% | |
| .height-0 ~ 1300 |
height:1px .height-auto : height:auto .height-0 : height:0 class의 숫자는 픽셀값으로 입력하면 됨. |
|
| .max-height-1 ~ 1300 | max-height:1px | |
| .min-height-1 ~ 1300 | min-height:1px | |
| .line-height-1 ~ 10 |
line-height:1 폰트크기를 %비율로 설정함. 1 1em(100%), 2 1.2em(120%), 3 1.4em(140%), 4 1.6em(160%), 5 1.8em(180%), 6 2.0em(200%), 7 2.2em(220%), 8 2.4em(240%), 9 2.6em(260%), 10 2.8em(280%) |
|
| .line-height-1-x ~ 10-x |
overflow:hidden;height:1;line-height:1 1~4줄까지 설정할때 사용 .line-height-1-x : 1줄 .line-height-1-2x : 2줄 .line-height-1-3x : 3줄 .line-height-1-4x : 4줄 |
|
| .letter-1 ~ 30 |
letter-spacing:-0.01em 음수만 존재함. -0.01em부터 -0.1em까지 설정. |