반갑습니다
안녕하세요! 아름다운가게 웹사이트 Styleguid에 오신 것을 환영합니다.
웹에서 쉽게 스타일을 만들고 유지, 관리 할 수 있도록 그 가이드를 작성해 두었습니다. 기본적인 가이드를 활용하여 전체 톤앤매너는 유지하는데 도움이 되기를 바랍니다.
이 파일은 page-styleguide2.php 페이지에서 추가로 편집할 수 있습니다.
색상
녹색과 검정의 두 가지 주요 색상이 있습니다. 추가적으로 배경을 설정할때 사용합니다.
cmyk, rgbcolor pallete
-
.bg-magenta
-
.bg-black
-
.bg-grey
-
.bg-blue
#60bb46 r 96, g 187, b 70 C 65, m 4, y 90, k 0
폰트
기본 폰트는 ‘본고딕 시리즈(Noto Sans CJK KR)’입니다. 에디터에서 제목1, 제목2, 제목3, 제목4, 본문으로 선택하여 작성할 수 있습니다.
이것은 제목1 입니다. <h1>
22px, 2.2rem
500
이것은 제목2 입니다. <h2>
18px, 1.8rem
500
이것은 제목3 입니다. <h3>
16px, 1.6rem
500
이것은 제목 4 입니다. <h4>
14px, 1.4rem
500
이것은 본문입니다. <p>
14px, 1.4rem
300
버튼
페이지 내 링크를 연결하고자 할때는 아래에 버튼 중 콘텐츠 내용에 적당한 버튼을 골라 삽입합니다. a링크 테그에 각각의 class명으로 명령을 내립니다.
- button 1: class="btn btn-xlg btn01"
- button 2: btn btn-xlg btn02
- button 3: btn btn-lg btn01
- button 4: btn btn-lg btn02
- button 5: btn btn-lg btn03
- button 6: btn btn-md btn01
- button 7: btn btn-md btn02
- button 8: btn btn-md btn03
- button 9: btn btn-sm btn01
- button 10: btn btn-sm btn02
- button 11: btn btn-sm btn03
- button 12: btn btn-link
리스트
순서있는 목록 <ol>
- 아이템1
- 아이템2
- 아이템3
순서없는 목록 <ul>
- 아이템1
- 아이템2
- 아이템3
표
기본 스타일
| 그물코정신 |
‘관계’라는 눈으로 세상의 진실을 봅니다. 씨줄과 날줄로 빈틈없이 서로 엮인 그물코처럼 우리는 모두 서로의 삶에 책임이 있는 존재입니다. |
|---|---|
| 되살림정신 |
나눔과 순환을 통해 세상의 생명을 연장합니다. 과도한 소비와 이기주의로 인한 아픔을 치유하기 위해 나눔과 순환을 실천합니다. |
| 참여와변화 |
당신의 참여가 세상의 아름다운 변화를 만듭니다. 하나의 기증품, 한 시간의 자원활동이 세상을 아름답게 바꿀 수 있다고 믿습니다. |
숫자 스타일
| 연번 | 기관 명 | 아동 수 | 지원 금액(원) |
|---|---|---|---|
| 1 | 동내지역아동센터 | 15 | 1,550,000 |
| 2 | 꿈빛나무지역아동센터 | 20 | 2,650,000 |
- 숫자 테이블 명령: table class ="table-num"
- 텍스트 정렬: td class="align-left", td class="align-right", td class="align-center"
박스
아름다운가게는 물건의 재사용과 재순환을 도모하여 우리 사회의 생태적-친환경적 변화를 추구하며, 우리의 삶의 근본이 변하게 하여 사람과 자연이 아름답게 공존하게 하는 ‘조용한 생활의 혁명’을 긴 안목으로 전망합니다. 아름다운가게는 재사용과 재순환의 과정에서 얻어지는 수익금과 기부금을 지치고 힘든 이웃들과 그들을 위해 일하는 사람들, 단체들과 함께 나눕니다.
<div class="box box02"></div>
아름다운가게는 물건의 재사용과 재순환을 도모하여 우리 사회의 생태적-친환경적 변화를 추구하며, 우리의 삶의 근본이 변하게 하여 사람과 자연이 아름답게 공존하게 하는 ‘조용한 생활의 혁명’을 긴 안목으로 전망합니다. 아름다운가게는 재사용과 재순환의 과정에서 얻어지는 수익금과 기부금을 지치고 힘든 이웃들과 그들을 위해 일하는 사람들, 단체들과 함께 나눕니다.
기타 스타일
따움표 <blockquote></blockquote> 또는 에디터 따움표
