CSS Component (Sample Demo)

  1. Base Styles (with base.css)
  2. Demo CSS Styles (with base.css, lib.css)
  3. Embed (Video, Audio) Styles (~ lib.css)
  4. Grid12 (~ base.css)
    Grid Best Practice
  5. Box Panel (~ lib.css)
  6. Demo ETC (~ lib.css)
  7. Layout Best Practice
  8. Tabs (~ lib1cp1.css)
  9. 표 반응형 샘플
  10. 글꼴 샘플 선택
  11. 색상 샘플 선택
  12. Cheat Sheet (ToDo)

Component

Body Contents

본문콘텐츠 템플릿 (샘플.기본)
((20210518 (( 20151204. 화면설계 없었음. 최근 템플릿 고도화.
./tp/tp1*.php (기본) (with base.css, lib.css, lib1cp1.css)
  1. $_BBS1 리스트1 (분류2.검색선택1~.정렬메뉴.그림1.글3.아이콘1.쪽.버튼) (쪽매김.접근성보완)
  2. _BBS1 리스트2표1 (목록표.폭좁은화면일부감춤)
  3. $_BBS1 갤러리1사진1 (갤러리.검색선택1.그림1.글2종.쪽.버튼)
    | $~.높이가변
  4. $_BBS1 갤러리1영상1 (갤러리.검색선택1.그림1.글2종.플레이.쪽.버튼)
  5. $_BBS1 상세뷰1 (글제목.정보1.첨부바로보기.내용.그림뷰갤러리1.영상뷰1.답변)
    | _BBS1 상세뷰1+SNS공유+소셜댓글 (글제목.정보1.첨부바로보기.내용.그림뷰갤러리1.답변글)
  6. _BBS1 상세뷰2 (그림뷰갤러리1.정보1(제목.표.정의목록)) - 특산물..
    | _BBS1 상세뷰2. 버튼추가.이미지먼저 (원화보기.다운로드)
    | _BBS1 상세뷰2. 탭패널 (공연안내,공연일정)
  7. $_BBS1 글작성1 (표tr1th1td1..개인정보수집동의)
  8. _BBS1 비밀번호확인1 (그림.글2.버튼2.blue)
  9. $_BBS1 본인인증선택1 (글패널.휴대폰·공공아이핀인증.로그인)
  10. $_우편번호검색 (팝업창.도로명|지번)
  11. _캘린더_시간별예약현황달력 (월.이전다음.범례.표(시간별현황.클릭).모바일UX일별여닫기(단체관람신청현황목록))
  12. _민원안내 목록 (메뉴.검색옵션2.결과.표목록.쪽)
  13. _민원안내 상세 (표,버튼,첨부) Task) 절차추가?
  14. _의약업소안내 목록 (버튼.표.소재지지도링크.상세없음)

inc_demo.html

id값 중복 에러(Error: Duplicate ID)와 폼에서 id값 = for값 연결은 실무에서 바로잡으세요. 여기 데모 코드에서의 결함은 일단 넘어가세요.

Demo CSS Styles ※ with base.css, lib.css for RWD

Table of contents ㆍ 내비게이션 메뉴
ㆍ 선택 메뉴
ㆍ 타이포그래피 ( 제목, 문단, 줄간, 앵커, 강조, 글꼴, 맥락 배경 색상 )
ㆍ 목록
ㆍ 테이블
ㆍ 링크
ㆍ 버튼
ㆍ 폼요소
ㆍ 이미지 배치
ㆍ 임베드 (Video, Audio)
ㆍ 스크롤 (가로 넘침 스크롤 샘플) new
ㆍ ETC (Comingsoon Sample, Text Paragraph Sample)

 |  UX Sample (현재. 스타일 없다.)
 |  Layout / Multi-column (생략)
 |  Popup (현재. 스타일 없다. 모바일 팝업은 삼가하자!)

.cnb1 .mj-menu-even-width

.cnb1 메뉴의 폭을 자동으로 균등하게 만듭니다.


.cnb1 mj-menu2dropdown

.cnb1 메뉴의 폭을 자동으로 균등하게 만듭니다.
좁은폭 화면에서는 드롭다운 메뉴로 만들어줍니다.

.cnb2

자동 균등 폭으로 만듭니다.

메뉴 전체 너비가 작아도 부모 요소만큼 꽉 찬 너비를 만듭니다.

메뉴 한개라도 부모 너비의 50% 를 넘는 경우

Select Menu

Basic

선택메뉴0

href="#selectmenu1option0" 와 id="selectmenu1option0" 를 유일한 같은 값으로 만든다.

Sizing

class="selectmenu1 w100"
선택메뉴1
class="selectmenu1 waha"
선택메뉴2

Advanced

Examples

선택메뉴(목록상자) 여러개

다중 옵션, 버튼.submit 과 텍스트 어울림. 세로 배치에서는 z-index 에 주의해야 한다.

선택하세요 :
선택옵션1
선택옵션2
선택메뉴1

선택메뉴1

TYPOGRAPHY

Heading

헤드라인1 Heading1

헤드라인2 Heading2

헤드라인3 Heading3

헤드라인4 Heading4

헤드라인5 Heading5
헤드라인6 Heading6

헤드라인삼헤드라인삼일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

Paragraph

문단 p (paragraph) 기본 타입은 글꼴크기 16px 줄높이 1.75 이다.
The base type is 16px over 1.75 line height.
))) 웹사이트 스타일에 맞춤 


html{
	font-size:100%; /* 1rem = 16px */
}
body{
	font-size:1em; /* 16px */
	line-height:1.75; /* 28px */
}

문단 샘플입니다. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십 문단 샘플입니다. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

문단 샘플입니다. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십 문단 샘플입니다. 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

불릿을 넣은 문단입니다. 목록과 동일한 불릿을 사용합니다. p.bu

불릿을 넣은 문단입니다. 목록과 동일한 불릿을 사용합니다. p.bu

Anchor

앵커 a (anchor) no href
앵커 a href="?"
앵커 a href="?" target="_blank" rel="noopener" title="새 창"

Other styled text tags

Color Emphasis

강조 em (emphasis) ≥ Contrast 4.5:1 ≥ Contrast 3.0:1
■ em.em /* 색 기본 */ strong 강조
■ em.em1 /* 빨 red */ strong 강조
■ em.em1-2 /* 다홍 red */ strong 강조
■ em.em2 /* 주 orange (dung) */ strong 강조
■ em.em3 /* 노 yellow */ strong 강조
■ em.em3-4 /* 연두 light green */ strong 강조
■ em.em4 /* 초 green */ strong 강조
■ em.em4-5 /* 청록 cyan (green blue) */ strong 강조
■ em.em5 /* 파 blue */ strong 강조
■ em.em5-6 /* 암청 cobalt blue */ strong 강조
■ em.em6 /* 남 navy */ strong 강조
■ em.em7 /* 보 violet */ strong 강조
■ em.em8 /* 심홍 magenta (blue red) */ strong 강조
■ em.em9 /* 분홍 pink */ strong 강조
■ em.em0 /* 흑 black */ strong 강조

Color cv0~cvcvf

■ .cv0 ( 컬러값 #000000 ) 볼드
■ .cv1 ( 컬러값 #111111 ) 볼드
■ .cv2 ( 컬러값 #222222 ) 볼드
■ .cv3 ( 컬러값 #333333 ) 볼드
■ .cv4 ( 컬러값 #444444 ) 볼드
■ .cv5 ( 컬러값 #555555 ) 볼드
■ .cv6 ( 컬러값 #666666 ) 볼드
■ .cv7 ( 컬러값 #767676 ) 볼드
■ .cv8 ( 컬러값 #888888 ) 볼드
■ .cv9 ( 컬러값 #959595 ) 볼드
■ .cva ( 컬러값 #aaaaaa ) 볼드
■ .cvb ( 컬러값 #bbbbbb ) 볼드
■ .cvc ( 컬러값 #cccccc ) 볼드
■ .cvd ( 컬러값 #dddddd ) 볼드
■ .cve ( 컬러값 #eeeeee ) 볼드
■ .cvf7 ( 컬러값 #f7f7f7 ) 볼드
■ .cvf ( 컬러값 #ffffff ) 볼드

font-family

English 와 漢字 잘 보이는가?

base.css 파일에 글꼴 모음 스타일 선언 

[lang|='ko'],
[lang|='ko']>*{
	font-family:
		'Apple SD Gothic Neo', /* 맥용 */
		/* '본고딕',NotoSans,'Noto Sans CJK KR', */
		'Open Sans',OpenSans, /* 영문 */
		'Microsoft JhengHei', /* 한자 */
		'Meiryo', /* 일문 */
		'맑은 고딕','Malgun Gothic', /* 한글 */
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,sans-serif;
}
all.css 파일에 글꼴 모음 스타일 재정의

font-size

.fsS6 {font-size:.625em !important;} /* 10/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsS5 {font-size:.6875em !important;} /* 11/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsS4 {font-size:.75em !important;} /* 12/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsS3 {font-size:.8125em !important;} /* 13/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsS2 {font-size:.875em !important;} /* 14/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsS1 {font-size:.9375em !important;} /* 15/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsD, /* default */
.fs1em {font-size:1em !important;} /* 16/16 <h6> */ 0~9 English Qa (國語) [한글] 만들자
.fsB1 {font-size:1.0625em !important;} /* 17/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB2 {font-size:1.125em !important;} /* 18/16 <h5> */ 0~9 English Qa (國語) [한글] 만들자
.fsB4 {font-size:1.25em !important;} /* 20/16 <h4> */ 0~9 English Qa (國語) [한글] 만들자
.fsB6 {font-size:1.375em !important;} /* 22/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB8 {font-size:1.5em !important;} /* 24/16 <h3> */ 0~9 English Qa (國語) [한글] 만들자
.fsB10 {font-size:1.625em !important;} /* 26/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB12 {font-size:1.75em !important;} /* 28/16 <h2> */ 0~9 English Qa (國語) [한글] 만들자
.fsB14 {font-size:1.875em !important;} /* 30/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB16 {font-size:2em !important;} /* 32/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB18 {font-size:2.125em !important;} /* 34/16 */ 0~9 English Qa (國語) [한글] 만들자
fs34px {font-size:34px !important;} 0~9 English Qa (國語) [한글] 만들자
fs35px {font-size:35px !important;} 0~9 English Qa (國語) [한글] 만들자
fs36px {font-size:36px !important;} 0~9 English Qa (國語) [한글] 만들자
.fsB20 {font-size:2.25em !important;} /* 36/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB22 {font-size:2.375em !important;} /* 38/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB24 {font-size:2.5em !important;} /* 40/16 <h1> */ 0~9 English Qa (國語) [한글] 만들자
.fsB26 {font-size:2.625em !important;} /* 42/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB28 {font-size:2.75em !important;} /* 44/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB30 {font-size:2.875em !important;} /* 46/16 */ 0~9 English Qa (國語) [한글] 만들자
.fsB32 {font-size:3em !important;} /* 48/16 (h0) */ 0~9 English Qa (國語) [한글] 만들자
.fsB34 {font-size:3.125em !important;} /* 50/16 */ 0~9 English Qa (國語) [한글] 만들자

Contextual Backgrounds and Colors

class="bg-base" 20190522. 추가.

class="bg-default" 본문 배경색과 같은 색상값으로 넣어주세요.

class="bg-muted" 좋은 첫인상을 심어주기 위해 과도하게 노력하지 마십시오.

class="bg-primary" 네트워킹 행사의 99%는 시간 낭비입니다.

class="bg-secondary" 최근에 이런 생각들을 해서 그런지, 많은 사람들이 이제는 사양길에 접어들고 있다는 트위터를 나는 오히려 더 좋고 도움이 많이 되는 서비스라고 느끼고 있다. 처음에 내가 트위터를 사용하기 시작했을때 왜 트윗을 140자로 제한했을까라는 불만이 많았다. 뭐 하나 쓰려고 해도 항상 140자의 제한을 받아서 내용을 다시 지우고, 줄이고, 또 쓰고 하길 몇 번이나 반복한 후에야 트윗을 날렸다. 페이스북은 내가 하고 싶은 말을 주저리 주저리 다 적을 수 있는데 트위터는 왜 이 제한을 풀지 않을까라는 불만을 트위터에서 일하는 친구들한테도 자주 표현했다.

class="bg-success" 저녁 행사가 시작되기 전에 체력을 비축해두세요.

class="bg-warning" 형식적인 대화보다는 더욱 진솔하게 마음을 털어놓는 자세가 필요합니다.

class="bg-danger" 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가?

class="bg-alert" 진정한 보호는 아이들이 자신이 처한 위험을 감당하도록 가르치는 것이지 온갖 위험을 피하도록 보호하는 게 아닙니다.

class="bg-info" 네트워킹의 핵심은 네트워킹하지 않는 것입니다.

class="bgc-base cvf" .button.base 과 색상을 동일하게 맞춥니다. 아래 "bgc-문맥배경값" 들도 버튼색과 맞춥니다.

class="bgc-default cvf" 본문 배경색과 전경색의 반전입니다.

class="bgc-muted cvf" 좋은 첫인상을 심어주기 위해 과도하게 노력하지 마십시오.

class="bgc-primary cvf" 네트워킹 행사의 99%는 시간 낭비입니다.

class="bgc-secondary cvf" (덕불고필유린) 덕은 외롭지 않고 반드시 이웃이 있다.

class="bgc-success cvf" 저녁 행사가 시작되기 전에 체력을 비축해두세요.

class="bgc-warning cvf" 형식적인 대화보다는 더욱 진솔하게 마음을 털어놓는 자세가 필요합니다.

class="bgc-dange cvfr" 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가?

class="bgc-alert cvf" 진정한 보호는 아이들이 자신이 처한 위험을 감당하도록 가르치는 것이지 온갖 위험을 피하도록 보호하는 게 아닙니다.

class="bgc-alert1 cvf" 진정한 보호는 아이들이 자신이 처한 위험을 감당하도록 가르치는 것이지 온갖 위험을 피하도록 보호하는 게 아닙니다.

class="bgc-info cvf" 네트워킹의 핵심은 네트워킹하지 않는 것입니다.

class="bgc-info1 text-info1" 네트워킹의 핵심은 네트워킹하지 않는 것입니다.

class="bgc-info2 cvf" 네트워킹의 핵심은 네트워킹하지 않는 것입니다.

class="text-base" 20190522. 추가.

class="text-default" 20150925. 추가.

class="text-muted" 좋은 첫인상을 심어주기 위해 과도하게 노력하지 마십시오.

class="text-primary" 네트워킹 행사의 99%는 시간 낭비입니다.

class="text-secondary" 20150925. 추가.

class="text-success" 저녁 행사가 시작되기 전에 체력을 비축해두세요.

class="text-warning" 형식적인 대화보다는 더욱 진솔하게 마음을 털어놓는 자세가 필요합니다.

class="text-danger" 140자로 간결하게 표현하지 못하는 내용들은 어쩌면 중요하거나 의미있는 내용이 아닐거 같다.

class="text-alert" 20150925. 추가.

class="text-alert1" 20150925. 추가.

class="text-info" 네트워킹의 핵심은 네트워킹하지 않는 것입니다.

class="text-info1" 네트워킹의 핵심은 네트워킹하지 않는 것입니다.

class="text-info2" 네트워킹의 핵심은 네트워킹하지 않는 것입니다.

LISTS

ul.bu

  • 순서 없는 목록 항목 li (unordered list item) Item 1
  • 순서 없는 목록 항목 Item 2
    • 순서 없는 목록 항목 Item 2.1
      • 순서 없는 목록 항목 Item 2.1.1
        • 순서 없는 목록 항목 Item 2.1.1.1 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다.
        • 순서 없는 목록 항목 Item 2.1.1.2
      • 순서 없는 목록 항목 Item 2.1.2
    • 순서 없는 목록 항목 Item 2.2
  • 순서 없는 목록 항목 Item 3

ol.bo

  1. 순서 있는 목록 항목 li (unordered list item) Item 1
  2. 순서 있는 목록 항목 Item 2
    • 순서 있는 목록 항목 Item 2.1
      • 순서 있는 목록 항목 Item 2.1.1
        • 순서 있는 목록 항목 Item 2.1.1.1 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다.
        • 순서 있는 목록 항목 Item 2.1.1.2
      • 순서 있는 목록 항목 Item 2.1.2
    • 순서 있는 목록 항목 Item 2.2
  3. 순서 있는 목록 항목 Item 3

dl.bu

정의 목록 Definition Term

정의 목록 Definition Description. 웹 검색 엔진이나 사이트 관리에 유용한 정보로 메타 데이터를 지정하면 문서 헤더에 메타 태그가 삽입됩니다.

메타 태그 keyword
검색 엔진이 문서를 내용에 따라 분류하는 데 사용됩니다.
메타 태그 description
설명 메타 태그는 문서의 내용을 간단하게 설명하는 데 사용합니다.
HTML5 Quick Reference Guide

ol.bo1

  1. 순서 있는 목록 항목 li (ordered list item) Item 1
  2. 순서 있는 목록 항목 Item 2
  3. 순서 있는 목록 항목 Item 3
  4. 순서 있는 목록 항목 Item 4
  5. 순서 있는 목록 항목 Item 5
  6. 순서 있는 목록 항목 Item 6
  7. 순서 있는 목록 항목 Item 7
  8. 순서 있는 목록 항목 Item 8
  9. 순서 있는 목록 항목 Item 9
  10. 순서 있는 목록 항목 Item 10
  11. 순서 있는 목록 항목 Item 11
  12. 순서 있는 목록 항목 Item 12
  13. 순서 있는 목록 항목 Item 13 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다. 다중 줄 고려한다 다중 줄 고려한다.
  14. 순서 있는 목록 항목 Item 14
    1. 중첩 목록 고려 한다. 중첩 목록 고려 한다.
    2. 중첩 목록 고려 한다. 중첩 목록 고려 한다.
  15. 순서 있는 목록 항목 Item 15
    • 중첩 목록 고려 한다. 중첩 목록 고려 한다.
    • 중첩 목록 고려 한다. 중첩 목록 고려 한다.
  16. 순서 있는 목록 항목 Item 16
    1. 중첩 목록 고려 한다. 중첩 목록 고려 한다.
    2. 중첩 목록 고려 한다. 중첩 목록 고려 한다.
    3. 순서 있는 목록 중첩 스타일 다르게 주려거든 CSS 추가하세요.
  17. 순서 있는 목록 항목 Item 17
    • 중첩 목록 고려 한다. 중첩 목록 고려 한다.
    • 중첩 목록 고려 한다. 중첩 목록 고려 한다.
      1. 중첩 목록 고려 한다. 중첩 목록 고려 한다.
      2. 중첩 목록 고려 한다. 중첩 목록 고려 한다.
      3. 순서 있는 목록 중첩 스타일 다르게 주려거든 CSS 추가하세요.
    • 중첩 목록 고려 한다. 중첩 목록 고려 한다.
      • 중첩 목록 고려 한다. 중첩 목록 고려 한다.
      • 중첩 목록 고려 한다. 중첩 목록 고려 한다.
      • 순서 있는 목록 중첩 스타일 다르게 주려거든 CSS 추가하세요.
  18. 순서 있는 목록 항목 Item 18
  19. 순서 있는 목록 항목 Item 19
  20. 순서 있는 목록 항목 Item 20. 더 하려거든 CSS 추가하세요.

Paragraph

불릿을 넣은 문단입니다. 목록과 동일한 불릿을 사용합니다. p.bu 불릿을 넣은 문단입니다. 목록과 동일한 불릿을 사용합니다. p.bu 불릿을 넣은 문단입니다. 목록과 동일한 불릿을 사용합니다. p.bu 불릿을 넣은 문단입니다. 목록과 동일한 불릿을 사용합니다. p.bu

불릿을 넣은 문단입니다. 목록과 동일한 불릿을 사용합니다. p.bu

TABLES

Base

table : only pure html code
Name Age Sex Location
Dave Gamache 26 Male San Francisco
Dwayne Johnson 42 Male Hayward

Basic

table.t0

table.t0 : 테이블. 선 없는 타입
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t1

table.t1 : 테이블. 가로선만 있는 타입
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t01

table.t01 : 테이블. 안쪽 가로선만 있는 타입
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t2

table.t2 : 테이블. 가로선과 세로선 모두 있는 타입
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열
table.t2 : 테이블. 가로선과 세로선 모두 있는 타입 (caption class="blind")
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t02

table.t02 : 테이블. 안쪽 가로선과 세로선만 있는 타입
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t3

table.t3 : 테이블. 맨위선 강조! 가로세로선 있으나 맨좌우선만 없는 타입. (단위:원)
평가 대상 평가 결과 비고
우수 향상 노력 부진
57개 사업 14 32 8 3 table.t3 표제목 caption : 글꼴 굵기 보통은 class="fwn" 하자. (태그에 직접 caption span{font-weight: normal;} 금지!)
  • 열 너비 width 는 col 태그에 style 속성으로 지정하며 em 또는 % 값 사용한다.
  • 표 자손 셀 정렬
    • <table class="tttac">
      table 자손 th, td 모두 중앙정렬.
    • <thead class="tttac ttvam">
      thead 자손 th, td 모두 중앙정렬.
      thead 자손 th, td 모두 세로중앙정렬.
    • <tbody class="thtal tdtac ttvat">
      tbdoy 자손 th 모두 좌측정렬.
      tbdoy 자손 td 모두 중앙정렬.
      tbdoy 자손 th, td 모두 세로상단정렬.
    • <tr class="thtar">
      tr 자손 th 모두 우측정렬
    • <tbody class="tt3tac">
      tbody 자손 tr 의 3번째 자식만 중앙정렬.
  • 셀(th, td)과 열(col)의 정렬은 각각의 셀(th, td)에 class="tal" "tac" "tar" 지정한다.
★표제목 ★표요약,구조,탐색방법
Heading Note
내부표
(자손표)		 부모표 스타일과 독립적이어야 한다.
※ 표 아래에 있는 텍스트 샘플입니다.
table.t3 : 테이블. 가로선과 세로선 모두 있는 타입 (caption class="blind")
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

샘플. thead 없이 tbody 만 있는 table -- [IE8] border-top 문제 확인하자!

★표제목 : ★표요약,구조,탐색방법
1행제목 1행2열
2행제목 2행2열
BugFix [IE8] thead 없이 tbody 만 있는 경우
(증상) <caption class="blind">표제목</caption> 하면 table{border-top:;} 적용한 선이 td 열 영역에서 사라진다.
(해법) <caption><strong class="blind">표제목</strong></caption>
단, caption 스타일에 따라 표와 이전 콘텐츠 사이에 간격이 발생한다.
예) caption{margin:0;padding:0 0 .666em 0;font-weight:bold;line-height:1.333;text-align:left;}

Advanced

table.t4

table.t4 (테이블. 테두리만)
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t4 caption.table-h1

table.t4 caption.table-h1 (테이블. 테두리만 + 제목 꾸밈.)
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t5

table.t5 (테이블. 테두리만 + border-spacing)
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

table.t6

table.t6 (border-spacing)
1열제목 2열제목
1행제목 1행2열
2행제목 2행2열

Examples

table.t2 caption.table-h1

신청인 정보
이름 정아무개
전화번호 000-0000-0000
주소 경남 김해시 삼정동 650-15
비고 일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

Basic

우리마을 설정하기
  첨부파일 있음   filename.xls   댓글 수:3   지도 찾기   암호   삭제   가을사진01.jpg 첨부파일 삭제   공지

BUTTONS

Basic

without class (base.css)

앵커 Anchor a element

class="button"

앵커 Anchor a element

Button Sizing

a.button
XLarge Button Large Button Medium Button Default Button Semismall Button Small Button Tiny Button Block Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Radius Button Round Button Radius Medium Button Round Medium Button

엑스라지 버튼 라지 버튼 미디엄 버튼 디폴트 버튼 세미스몰 버튼 스몰 버튼 티니 버튼 블록 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 익스팬디드 버튼 라디우스 버튼 라운드 버튼 라디우스 미디엄 버튼 라운드 미디엄 버튼

더 큰 버튼 만들기
xlarge fsXL 버튼 xlarge fsXXL 버튼 xlarge fsXXXL 버튼
a.button.wide
XLarge Button Large Button Medium Button Default Button Semismall Button Small Button Tiny Button Block Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Expanded Button Radius Button Round Button Radius Medium Button Round Medium Button

button.button

Button Colors

버튼 Button Base Button Default Button Muted Button Submit Button Search Button Primary Button Primary1 Button Secondary Button Success Button Warning Button Danger Button Alert Button Alert1 Button Info Button Info1 Button Info2 Button
Disabled Button 버튼 Button Base Button Default Button Muted Button Submit Button Search Button Primary Button Primary1 Button Secondary Button Success Button Warning Button Danger Button Alert Button Alert1 Button Info Button Info1 Button info2 Button
Hollow Button Hollow Button Base Hollow Button Default Hollow Button Muted Hollow Button Submit Hollow Button Search Hollow Button Primary Hollow Button Primary1 Hollow Button Secondary Hollow Button Success Hollow Button Warning Hollow Button Danger Hollow Button Alert Hollow Button Alert1 Hollow Button Info Hollow Button Info1 Hollow Button Info2 Hollow Button
Emboss Button Emboss Button Base Emboss Button Default Emboss Button Muted Emboss Button Submit Emboss Button Search Emboss Button Primary Emboss Button Primary1 Emboss Button Secondary Emboss Button Success Emboss Button Warning Emboss Button Danger Emboss Button Alert Emboss Button Alert1 Emboss Button Info Emboss Button Info1 Emboss Button Info2 Emboss Button
Gray Button white Button black Button gray1 Button gray2 Button gray3 Button gray4 Button gray5 Button gray6 Button gray Button (=gray7) gray7 Button (=gray) gray8 Button gray9 Button graya Button grayb Button grayc Button grayd Button graye Button grayf7 Button grayfc Button
slategray123 Button slategray234 Button slategray345 Button slategray456 Button slategray567 Button slategray Button (=slategray579) slategray579 Button (=slategray) slategray678 Button slategray789 Button slategray89a Button slategray9ab Button slategrayabc Button slategraybcd Button slategraycde Button slategraydef Button slategraye Button slategrayf Button

FORMS

아래 예제 코드는 간단하게 표현되어 있습니다. 실제 서비스할 코드에는 접근성을 위한 코드를 추가해야합니다.
label for="아이디" 와 폼콘트롤의 id="아이디" 를 일치 시키거나, 폼콘트롤에 title="" 속성으로 라벨링을 대체할 수 있습니다.
보조공학으로서 향상된 방법인 aria-label, aria-labelledby 등은.. 요구사항이 있다면 적용바랍니다.

Basic

Forms + Buttons

★그룹명 ~
.fb1control1 (좌정렬 스타일)
( )
.fb1control1.type2 (좌정렬 스타일 디자인 유형2)
( )
.fb1control1.type2.tac (중앙정렬)

Skeleton ) Forms )))) @m

★그룹명

Bootstrap ) Forms ) Basic example )))) @m

Example block-level help text here.

Foundation ) Forms )))) @m

.com

좌우 중앙 고정폭 가변폭

))) .postfix .prefix .midfix 스타일 버림. 필요 시 스타일 재정의.

.even-grid .form-static1 .postfix .prefix .midfix
.com
.com
http://
http://
.com
//
.form-group .form-static1 .postfix .prefix .midfix
.com
.com
http://
http://
.com
//

Advanced

Long Text with radio, checkbox

텍스트가 길면 폼콘트롤과 분리되어 줄바꿈이 일어난다. )) 아래 해법을 사용해야 한다.

좌정렬
"clearfix" "fll mg0 mgt0375em mgr0375em" "dpb ofh"

))) 좌정렬 해법 적용한 라이브러리 스타일 .fb1control1

우정렬
"clearfix" "flr mg0 mgt0375em mgl0375em" "dpb ofh tar"
좌우정렬
"clearfix" "flr mg0 mgl0375em" "fll mg0 mgt0375em mgr0375em" "dpb ofh taj"
@

.form-group

))) 코드가 복잡해지니.. 가급적 사용하지 않는다. ))) 스타일 버림. display:flex; 이용바람

fixed1auto1
auto1fixed1
fixed1auto1fixed1
@
@
@
auto1fixed1auto1
@

IMAGES

Basic

Responsive Images

이미지들은 .img-responsive 와 같은 클래스를 추가하지 않아도 반응형으로 동작합니다.
img 요소에 display: block; max-width: 100%; height: auto; 스타일을 적용했기에 img 요소 크기는 부모 요소에 알맞게 변화합니다.

이미지를 가운데 두기 위해서 .block-center 를 사용하세요. 또한, 부모 요소에 .tac { text-align: center; } 를 사용하여 가로 중앙 정렬할 수도 있습니다.
.block-center 는 아래와 같이 정의되어 있습니다. 


.block-center { display: block; margin-left: auto; margin-right: auto; }

img 에 display: block; 을 적용하면 부모가 text-align: center; 일 때 가운데 정렬이 안되므로, 사용하지 않았습니다.
max-width: 100%; 속성은 지도API 등에서 문제를 일으킬 수 있습니다. 결함이 발견된 콘텐츠들은 max-width: none; 으로 해결바랍니다.

<img src="" alt="" />

★대체텍스트필수

<img src="" alt="" class="block-center" />

★대체텍스트필수

<p class="tac"><img src="" alt="" /></p>

★대체텍스트필수

Advanced

Image Shapes

★대체텍스트필수
class="radius"

 ★대체텍스트필수
class="round"

 ★대체텍스트필수
class="circle"

 ★대체텍스트필수
class="thumb"

 ★대체텍스트필수
class="thumb"
style="padding:4px;border-color:#ddd;"
 ★대체텍스트필수
class="thumb pd10px bdcd"

View Larger Image

((( 이미지 크게 보기 자동 생성 [JS]

이미지 요소에 class="mj-view-larger" 추가하면

<img src="ex.jpg" class="mj-view-larger" /> 아래에 이미지 새창 링크를 생성한다. 

<a href="ex.jpg" target="_blank" rel="noopener" title="새 창" class="a-view-larger"><i class="ic1"></i> <span class="t1">이미지 크게 보기</span></a>

★1대체텍스트필수

★2대체텍스트필수

★3대체텍스트필수

Examples

진짜 본문에 사용하려면.. 인라인 style 속성은 권장하지 않으니.. lib.css 또는 lib1cp1.css 에 class 를 만드세요.

어울림. 유동

★대체텍스트필수

타인에게 공감하는 일은 어렵습니다. 익숙한 관점에서 빠져나와 다른 사람의 관점으로 상황을 바라볼 수 있어야 하기 때문입니다. 그러나 기실 공감하는 능력은 비즈니스에 필수적인 능력이기도 합니다. 당장 팀원들에게 새로운 업무 방식을 가르쳐야 하거나, 투자자를 찾거나, 상품을 구매하도록 소비자를 설득하거나, 대중에게 기부를 요청할 때, 당신의 성공은 그 사람들이 바라고 원하는 것을 정확히 파악하는 데 달려 있습니다.

고객들을 위해 프레젠테이션을 제작하면서 우리는 몇 번이고 비슷한 결론에 도달했습니다. 들을 마음이 들면, 사람들은 메시지를 더 쉽게 받아들입니다. 그들의 반응에 귀기울임으로써 사람들이 진정으로 원하는 것(그들이 원할 거라고 ‘생각’하는 것 말고요)에 대해 더 잘 알 수 있습니다. 이는 장기적인 관계의 원동력이 되어줍니다.

어떻게 해야 공감하는 능력을 기를 수 있을까요? 분야마다 다양한 방법이 있습니다. 제품 개발자는 기존 케이스에 대해 브레인스토밍을 할 뿐 아니라 소비자들이 어떻게 제품과 상호작용할지 알아내기 위해 인터뷰를 실시합니다. 협상가들은 테이블에 앉기 전 미리 맞은 편의 관점을 상상하여 역할놀이를 시도합니다.

어울림. 유동. 이미지고정

★대체텍스트필수

타인에게 공감하는 일은 어렵습니다. 익숙한 관점에서 빠져나와 다른 사람의 관점으로 상황을 바라볼 수 있어야 하기 때문입니다. 그러나 기실 공감하는 능력은 비즈니스에 필수적인 능력이기도 합니다. 당장 팀원들에게 새로운 업무 방식을 가르쳐야 하거나, 투자자를 찾거나, 상품을 구매하도록 소비자를 설득하거나, 대중에게 기부를 요청할 때, 당신의 성공은 그 사람들이 바라고 원하는 것을 정확히 파악하는 데 달려 있습니다.

고객들을 위해 프레젠테이션을 제작하면서 우리는 몇 번이고 비슷한 결론에 도달했습니다. 들을 마음이 들면, 사람들은 메시지를 더 쉽게 받아들입니다. 그들의 반응에 귀기울임으로써 사람들이 진정으로 원하는 것(그들이 원할 거라고 ‘생각’하는 것 말고요)에 대해 더 잘 알 수 있습니다. 이는 장기적인 관계의 원동력이 되어줍니다.

어떻게 해야 공감하는 능력을 기를 수 있을까요? 분야마다 다양한 방법이 있습니다. 제품 개발자는 기존 케이스에 대해 브레인스토밍을 할 뿐 아니라 소비자들이 어떻게 제품과 상호작용할지 알아내기 위해 인터뷰를 실시합니다. 협상가들은 테이블에 앉기 전 미리 맞은 편의 관점을 상상하여 역할놀이를 시도합니다.

EMBED

))) embed.php

SCROLL

))) 아래처럼 브라우저 기본 스크롤을 활용한 코드를 권장한다!

.scroll-x-lt-large > min-width:710px;

.scroll-x > min-width:710px;

본문폭이 710px 이하면 가로스크롤 발생 (768px 미만인 화면에서만 가로스크롤)
710px 값은 내부 콘텐츠에 따라 적당히 변경한다.

키보드 화살표 좌(←)·우(→) 키로 스크롤 가능 ★대체텍스트필수

키보드 화살표 좌(←)·우(→) 키로 스크롤 가능
★표제목 : ★표요약,구조,탐색방법
열제목열제목열제목열제목열제목 열제목열제목열제목열제목열제목 열제목열제목열제목열제목열제목끝
행제목셀내용셀내용셀내용셀내용 행제목셀내용셀내용셀내용셀내용 행제목셀내용셀내용셀내용셀내용끝


ETC

Coming Soon Sample

… 내용 준비 중 …

Text Contents Sample

.badge1 .label1

뱃지 뱃지 22 22 22 22 22 22 22 라벨 라벨 22 22 22 22 22 22

본문 너비 100% ( 미디어쿼리 중단점 :: ~ (640px ~) 768px ~ 1000px ~ 1200px ~ 1260px ~ | (디자인에 맞춤).
기본 글꼴 16px "맑은 고딕" 줄간 1.75 사용.
No WSG 느낌대로 코딩한다!

Text Paragraph Sample

#body{ word-wrap: break-word; }

일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNO

display:inline-block; 요소의 non-CJK 단어 속에서 줄바꿈 확인한다.
class="dpib"
class="dpib mxw100"

일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십

012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNO

https://docs.google.com/spreadsheets/d/1oU16dpp8t_TESWljfcetiD3mggu2qSx2HkpUpqk_V8g/edit?gid=0#gid=0

TOP