WDEV CSS Framework

시작하기

  • 이 css는 기본적으로 html5문서 기준으로 만들어져있다. 그래서 최대한 신규 사이트 작업은 dtd를 html5로 설정한다.
  • css의 기본속성들은 Bootstrap front-end framework 베이스로 개발되었다.
  • 지원 브라우저는 ie8이상의 브라우저에서는 대부분의 기능이 작동 되도록하며 ie7에서는 다소 레이아웃이 틀어지더라도 핵심기능에 지장이 없을정도로 표현한다.
    브라우저 지원은 점진적으로 나아지는 형태로 구성되도록 코딩한다.
  • 반응형 사이트를 제작하는 경우에는 모바일 퍼스트 방식으로 html/css를 구성한다.
  • <body>엘리먼트의 css 초기화는 아래와 같은 속성으로 잡혀있으니 참고바란다.
    body {font-size:14px; color:#333; line-height:1.42857;}
  • 수정내역은 Change log문서에서 확인가능하다.

지원 브라우저

IE8~10(IE11은 테스트예정), Chrome, Safari, Firefox, Opera

SCSS소스 다운로드

  • CSS가이드에 사용되는 SCSS소스를 패키지를 다운로드 받을 수 있다.
  • 부분적으로 사용려면 아래 본문중에 html,scss소스를 참고하면 된다.
  • 다운로드 링크에 있는 소스는 소스코드가 업데이트되면서 내용이 변경될 가능성이 있기 때문에 다운로드 후 작업계정에 업로드하거나 일부 소스를 복사해서 사용하는것을 권장한다.

SCSS소스코드?

  • 관리자[디자인관리 > 고급 디자인 관리 > CSS 파일관리]에서 SCSS가 지원되기 때문에 가이드에 SCSS위주로 작성했다.
  • CSS가이드에 사용되는 소스는 대부분 SCSS로 제공된다.

SCSS to CSS 변환서비스

  • SCSS가 지원되지 않은 환경에서는 사용할 수 없는 소스이기때문에 CSS형태의 소스로 변환해서 사용한다.
  • sassmeister
    jsfiddle과 비슷한 형태로 이루어진 scss(sass) to css 온라인 변환 서비스.
    한눈에 들어오는 직관적인 인터페이스이며 우측 상단에 설정버튼을 누르면 출력되는 css형태를 변경할 수 있다.

Typography

Headdings

  • 제목 엘리먼트 기본 스타일시트
  • .h1 ~ .h6 클래스로도 사용가능
  • Headding 엘리먼트 내부에 <small>엘리먼트를 사용하면 85%의 사이즈와 #999의 컬러를 가지는 텍스트를 표현할 수 있다.

h1. 무궁화꽃이 피었습니다. 옆동네도 피었습니다.

h2. 무궁화꽃이 피었습니다. 옆동네도 피었습니다.

h3. 무궁화꽃이 피었습니다. 옆동네도 피었습니다.

h4. 무궁화꽃이 피었습니다. 옆동네도 피었습니다.

h5. 무궁화꽃이 피었습니다. 옆동네도 피었습니다.
h6. 무궁화꽃이 피었습니다. 옆동네도 피었습니다.

HTML소스

<h1>h1. 무궁화꽃이 피었습니다. <small>옆동네도 피었습니다.</small></h1>
<h2>h2. 무궁화꽃이 피었습니다. <small>옆동네도 피었습니다.</small></h2>
<h3>h3. 무궁화꽃이 피었습니다. <small>옆동네도 피었습니다.</small></h3>
<h4>h4. 무궁화꽃이 피었습니다. <small>옆동네도 피었습니다.</small></h4>
<h5>h5. 무궁화꽃이 피었습니다. <small>옆동네도 피었습니다.</small></h5>
<h6>h6. 무궁화꽃이 피었습니다. <small>옆동네도 피었습니다.</small></h6>

Body

  • 글 본문내용을 표현한다.
    font-size의 값은 14px이며, line-height의 값은 1.428이다. 이는 <body>엘리먼트에 적용된다.
  • 눈에띄는 문단을 사용하거나 <small>, <strong>, <em>엘리먼트들을 사용하여 단어를 강조할 수 있다.

새야 새야 파랑새야 녹두 밭에 앉지마라.
녹두 꽃이 떨어지면 청포 장수 울고간다.

지방마다 다양한 내용의 노래로 전해지고 있으며 예시로 나온 노래는 그 중 가장 유명한 노래 중 하나이다.

동학농민운동을 다룬 민요로 전봉준과 농민군의 실패에 대한 실망과 안타까움이 담겨 있다. 가사 해석에 대해서는 여러 설이 있는데, 파랑새는 청나라 군사(혹은 일본군이나 조선 관군을 가리킨다고도 한다), 녹두는 전봉준, 청포 장수를 백성들을 뜻하는 것이라는 해석도 있다.

<p class="ar-text-lead">새야 새야 파랑새야 녹두 밭에 앉지마라.</p>
<p>지방마다 다양한 내용의 노래로 전해지고 있으며...</p>

Anchor

일반적인 링크 엘리먼트

HTML소스

<a href="#">link text</a>

Text Align

  • 텍스트를 정렬한다. 왼쪽, 중앙, 오른쪽 정렬이 있다.
  • <div>, <p> 엘리먼트 뿐만아니라 <th>, <td>같은 표 엘리먼트에서도 사용가능하다.

왼쪽정렬

중앙정렬

오른쪽정렬

HTML소스

<p class="ar-text-left">왼쪽정렬</p>
<p class="ar-text-center">중앙정렬</p>
<p class="ar-text-right">오른쪽정렬</p>

List

<ul>, <ol> 엘리먼트를 사용하는 글 목록

Basic

  • 숲 코끼리
  • 몽골 게르빌루스쥐
  • 파충류

Number

  • 숲 코끼리
  • 몽골 게르빌루스쥐
  • 파충류

Unstyled

  • 숲 코끼리
  • 몽골 게르빌루스쥐
  • 파충류

Inline

  • 숲 코끼리
  • 몽골 게르빌루스쥐
  • 파충류

HTML소스

<!--Basic-->
<ul class="ar-text-list">
	<li>숲 코끼리</li>
	<li>몽골 게르빌루스쥐</li>
	<li>파충류</li>
</ul>
<!--Number-->
<ul class="ar-text-lis ar-number">
	<li>숲 코끼리</li>
	<li>몽골 게르빌루스쥐</li>
	<li>파충류</li>
</ul>
<!--Unstyled-->
<ul class="ar-text-list ar-unstyled">
	<li>숲 코끼리</li>
	<li>몽골 게르빌루스쥐</li>
	<li>파충류</li>
</ul>
<!--Inline-->
<ul class="ar-text-list ar-inline">
	<li>숲 코끼리</li>
	<li>몽골 게르빌루스쥐</li>
	<li>파충류</li>
</ul>

Description

<dl> 엘리먼트를 사용하여 [제목:내용]형식으로 구성할 수 있다.

Basic

숲 코끼리
이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.
숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.

Horizontal

숲 코끼리
이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.
숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.

HTML소스

<!--Basic-->
<dl class="ar-text-description">
	<dt>숲 코끼리</dt>
	<dd>
		이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.<br/>
		숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
	</dd>
</dl>
<!--Horizontal-->
<dl class="ar-text-description ar-horizontal">
	<dt>숲 코끼리</dt>
	<dd>
		이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.<br/>
		숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
	</dd>
</dl>

인용구

인용구 상자

Basic

이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.
숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.

숲 코끼리에 대한 이야기

Align Right

이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.
숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.

숲 코끼리에 대한 이야기

HTML소스

<!-- Basic -->
<blockquote>
	<p>
		이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.<br/>
		숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
	</p>
	<small>숲 코끼리에 대한 이야기</small>
</blockquote>

<!-- Align Right -->
<blockquote class="ar-right">
	<p>
		이번 섹션에선, 잘 알려지지 않은 숲 코끼리에 관해 알아보겠습니다.<br/>
		숲 코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
	</p>
	<small>숲 코끼리에 대한 이야기</small>
</blockquote>

Code

코드표기 강조.
주의할점은 <, >, &, "같은 html과 혼합하여 사용되는 특수문자는 다른형식의 문자로 변경해줘야한다. (< : &lt;, > : &gt;, & : &amp;)

글자를 강조하는 엘리먼트는 <strong>엘리먼트다.

HTML소스

<p>글자를 강조하는 엘리먼트는 <code>&lt;strong></code>엘리먼트다.</p>

Grid

개요

  • 컨텐츠 레이아웃을 컬럼별로 구역을 나누는데 사용한다.
  • 총 12컬럼으로 영역을 나눌 수 있으며 6:6이나 4:4:4같은 비율로 영역을 나눌 수 있다. (비율의 합이 12가 되어야한다!)
  • 중첩으로 사용 가능하며, 멀티클래스를 사용하여 해상도에 따라 컬럼의 변화를 줄 수 있다.
  • ie7버전에서는 css box-sizing이 지원되지않아 레이아웃이 틀어질 수 있는 가능성이 있으므로 충분히 테스트해보면서 따로 수정해줘야한다.

기본예제

12 Columns

col
col
col
col
col
col
col
col
col
col
col
col
<div class="ar-grid">
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
	<div class="ar-col-1">col</div>
</div>

6:6 Columns

col
col
<div class="ar-grid">
	<div class="ar-col-6">col</div>
	<div class="ar-col-6">col</div>
</div>

4:4:4 Columns

col
col
col
<div class="ar-grid">
	<div class="ar-col-4">col</div>
	<div class="ar-col-4">col</div>
	<div class="ar-col-4">col</div>
</div>

중첩그리드

col
children
children
children
<div class="ar-grid">
	<div class="ar-col-2">col</div>
	<div class="ar-col-10">
		<div class="ar-grid">
			<div class="ar-col-4">children</div>
			<div class="ar-col-4">children</div>
			<div class="ar-col-4">children</div>
		</div>
	</div>
</div>

반응형

  • 윈도우 사이즈가 특정크기(모바일,태블릿,데스크탑)로 변하면 컬럼 비율을 바꿀 수 있다.
  • 제한 사이즈와 클래스에 관한 상세한 정보는 아래 도표를 참고한다.
  • 제공된 css소스에서는 css미디어쿼리 @media (min-width: 768px) {}를 사용하지만 미디어쿼리에 분리된 파일을 사용한다면 소스를 각각 분리해서 넣어줘야한다.

제한 사이즈와 기기에 대한 클래스 명 도표

auto tablet desktop
제한사이즈(단위:px) auto 768~ 1024~
class이름 .ar-col-* .ar-col-md-* .ar-col-lg-*

태블릿 4:8, 데스크탑 8:4

col
col
<div class="ar-grid">
	<div class="ar-col-md-4 ar-col-lg-8">col</div>
	<div class="ar-col-md-8 ar-col-lg-4">col</div>
</div>

컬럼여백

컬럼 사이사이의 여백을 넣을 수 있다.

4:4:4 Columns

col
col
col

HTML소스

<div class="ar-grid ar-margin">
	<div class="ar-col-md-4">
		<div>col</div>
	</div>
	<div class="ar-col-md-4">
		<div>col</div>
	</div>
	<div class="ar-col-md-4">
		<div>col</div>
	</div>
</div>

Table

Basic

  • 기본적인 형태의 차트. 왼쪽 정렬이며, 가로선만 표현한다.
  • 셀의 가로사이즈는 <thead>나 첫번째 <tr>엘리먼트의 <th>, <td>에서 마크업으로 사이즈를 정해준다.
    <td scope="col" width="10%">text</td>
멸종위기 야생 동식물 통계표
  1996 1998 2005 2006
지정 종수 계 203 194 221 221
포유류 - 17 22 22
조류 - 59 61 61

HTML소스

<table class="ar-table">
	...
</table>

Text Align

  • 기본형태의 표는 왼쪽정렬로 설정되어있다.
  • 표에있는 텍스트를 모두 한쪽방향으로 정렬한다.
  • 개별적인 셀의 텍스트를 정렬하려면 TypographyTextAlign을 이용한다.
    <td class="ar-text-right">right text<td/>
멸종위기 야생 동식물 통계표
  1996 1998 2005
지정 종수 계 203 194 221
포유류 - 17 22

HTML소스

<!-- 중앙정렬 -->
<table class="ar-table ar-center">
	...
</table>

<!-- 오른쪽정렬 -->
<table class="ar-table ar-right">
	...
</table>

Bordered Style

모든선을 표시하는 차트 스타일

멸종위기 야생 동식물 통계표
  1996 1998 2005
지정 종수 계 203 194 221
포유류 - 17 22

HTML소스

<table class="ar-table ar-border">
	...
</table>

Striped Style

홀수번호 라인으로 옅은 배경색으로 영역을 강조한다.

멸종위기 야생 동식물 통계표
  1996 1998 2005
지정 종수 계 203 194 221
포유류 - 17 22
조류 - 59 61

HTML소스

<table class="ar-table ar-striped">
	...
</table>

Hover Style

롤오버하는 줄에 옅은 배경색으로 영역을 강조한다.

멸종위기 야생 동식물 통계표
  1996 1998 2005
지정 종수 계 203 194 221
포유류 - 17 22

HTML소스

<table class="ar-table ar-hover">
	...
</table>

Responsive Tables

반응형 테이블. 사이즈가 작아지면 가로스크롤이 나온다.

  1996 1998 2005 2008 2010
지정 종수 계 20.3 19.0000000000000 22.00000000000 24.000000000 22.0
포유류 - 17.00000000000 22.00000000 21.000000000000 20.000000

HTML소스

<div class="ar-table-responsive">
	<div class="ar-wrap">
		<table class="ar-table">
			...
		</table>
	</div>
</div>

Table cell - Not Mobile

모바일 사이즈에서 원하는 셀을 표시하지 않는다.

멸종위기 야생 동식물 통계표
  1996 1998 2005
지정 종수 계 203 194 221
포유류 - 17 22

HTML소스

<tr>
	<td>Apple</td>
	<td class="ar-not_mobile">Mango</td>
	<td>Banana</td>
</tr>

Buttons

버튼 스타일은 a, button 엘리먼트에서 사용되는 클래스를 정의한다.

Basic

기본적인 형태의 버튼.
아래 추가적인 속성들은 전부 기본클래스 이름을 같이 붙여줘야한다.
class="ar-button ar-red"

HTML소스

<button class="ar-button">Button</button>

Elements

버튼으로 사용할 수 있는 엘리먼트들이다.
a, button, input[type=submit]이 일반적으로 사용되는 버튼 엘리먼트들이지만 다른 엘리먼트에서도 사용할 수 있다. 하지만 button 엘리먼트 사용을 권장한다.

a 엘리먼트

HTML소스

<button type="button" class="ar-button">button 엘리먼트</button>
<a href=#"" class="ar-button">a 엘리먼트</a>
<input type="submit" class="ar-button" value="input[type=submit]" />

Block

가로 100% 사이즈의 버튼을 만듭니다.

HTML소스

<button type="button" class="ar-button ar-block">button</button>

Colors

버튼의 성격에 따라서 버튼색을 표현할 수 있다.

HTML소스

<button type="button" class="ar-button">Default</button>
<button type="button" class="ar-button ar-red">Red</button>
<button type="button" class="ar-button ar-green">Green</button>
<button type="button" class="ar-button ar-blue">Blue</button>
<button type="button" class="ar-button ar-yellow">Yellow</button>
<button type="button" class="ar-button ar-skyblue">Sky Blue</button>
<button type="button" class="ar-button ar-transparent">Transparent</button>

Size

버튼크기 세트

HTML소스

<button type="button" class="ar-button ar-exsmall">Extra Small (아주작은버튼)</button>
<button type="button" class="ar-button ar-small">Small (작은버튼)</button>
<button type="button" class="ar-button">Medium (보통)</button>
<button type="button" class="ar-button ar-large">Large (큰버튼)</button>
<button type="button" class="ar-button ar-exlarge">Extra Large (아주큰버튼)</button>

Forms

<form/>엘리먼트 내부에서 사용되는 입력폼들의 스타일 세트.

text, textarea, select

input[type=text], input[type=password], textarea, select 에서 사용되는 스타일

input[type=text], input[type=password]



textarea



select



block


disabled


size



HTML소스

<!-- input[type=text], input[type=password] -->
<input type="text" class="ar-form-text" placeholder="Enter Email" />
<input type="password" class="ar-form-text" placeholder="Password" />

<!-- textarea -->
<textarea class="ar-form-text" rows="3">text body</textarea>

<!-- select -->
<select id="formSelect1" class="ar-form-text">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>

<!-- block -->
<input type="text" class="ar-form-text ar-block" placeholder="input block" />

<!-- disabled -->
<input type="text" class="ar-form-text" placeholder="Enter Email" value="email address" disabled />
<select id="formSelect1" class="ar-form-text ar-block" disabled>
	<option value="1">1</option>
	<option value="2">2</option>
</select>

<!-- size -->
<input type="text" class="ar-form-text ar-large" placeholder="large" />
<input type="text" class="ar-form-text" placeholder="medium" />
<input type="text" class="ar-form-text ar-small" placeholder="small" />

checkbox, radio

input[type=checkbox], input[type=radio]에 사용되는 스타일.
inline과 block형태로 구분된다.

inline checkbox


block radio

HTML소스

<!-- inline -->
<div class="ar-form-check ar-inline">
	<label><input type="checkbox" name="formCheck" value="1" /> Checkbox#1</label>
	<label><input type="checkbox" name="formCheck" value="2" /> 체크박스#2</label>
	<label><input type="checkbox" name="formCheck" value="3" /> Checkbox#3</label>
</div>

<!-- block -->
<div class="ar-form-check ar-block">
	<label><input type="radio" name="formCheck" value="1" /> Checkbox#1</label>
	<label><input type="radio" name="formCheck" value="2" /> 체크박스#2</label>
	<label><input type="radio" name="formCheck" value="3" /> Checkbox#3</label>
</div>

Help Message

입력폼에 대한 안내메세지에 대한 스타일이다. 주로 입력폼 하단에 사용된다.
권장하는 엘리먼트는 span

이메일주소를 입력해주세요. 이메일주소를 입력해주세요.

HTML소스

<span class="ar-form-help">이메일주소를 입력해주세요.</span>
<span class="ar-form-help ar-warning">경고 메세지용</span>

Group

레이블과 입력폼을 조합하는 폼 그룹

HTML소스

<div class="ar-form-group">
	<label for="email">Email</label>
	<input type="text" name="email" id="email" placeholder="Enter Email" class="ar-form-text ar-block" />
</div>

Etc

Center content block

블록속성의 엘리먼트를 중앙정렬한다.

box

HTML소스

<div style="width:100px;height:100px; background-color:orange;" class="ar-block-center">box</div>

Clearfix

float속성이 들어간 엘리먼트는 세로 사이즈가 없다. 그것을 해결해주는 핵이 clearfix다. 참고사이트 바로가기

none clearfix

  • box
  • box
  • box


clearfix

  • box
  • box
  • box

HTML소스

<div class="ar-cf">
	...
</div>

Show/Hide contents

컨텐츠 요소를 감추거나 보여주는 기능을 하는 클래스 .blind클래스도 요소를 숨기는 기능 중 하나

HTML소스

<div class="ar-show">show</div>
<div class="ar-hide">hide</div>
<div class="ar-blind">blind</div>

Image

간단하게 이미지를 꾸밀 수 있다. 모서리 라운드, 외곽선, 동그라미 형태로 바꿀 수 있다.

HTML소스

<img src="thum_150x150.png" class="ar-img_round" alt="" />
<img src="thum_150x150.png" class="ar-img_thumnail" alt="" />
<img src="thum_150x150.png" class="ar-img_circle" alt="" />
top