base_css.html

Base Styles ※ base.css for RWD

TYPOGRAPHY

Heading

헤드라인1 Heading1

헤드라인2 Heading2

헤드라인3 Heading3

헤드라인4 Heading4

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

Paragraph

문단 p (paragraph)

기본 타입은 폰트사이즈 14px 라인하이트 1.6 이상이다.

The base type is 14px over 1.6 line height { line-height:1.666; }

The base type is 16px over 1.75 line height { line-height:1.75; }

Anchor

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

Other styled text tags

강조 strong (strong emphasis)
강조 em (emphasis)
모양 b (bold text style)
모양 i (italic text style)
작은 small (small text style)
삽입 ins cite="" (inserted text)
삭제 del cite="" (deleted text)
약자 abbr (abbreviated form)
주소 address (information on author)

텍스트 디스플레이의 방향 bdo dir="ltr" (direction of text display)
인스턴스 정의 dfn title="" (instance definition)
코드 code (computer code)
키보드 kbd (keyboard text to be entered by the user)
샘플 samp (sample program output, scripts, etc..)
변수 나 프로그램 인수의 예 var (instance of a variable or program argument)
윗첨자 TEXTsup (superscript)
아랫첨자 TEXTsub (subscript)
블록인용 blockquote cite="" (long quotation)
인용 q cite="" (short inline quotation)
인용출처 cite (citation)

LISTS

  1. 순서 있는 목록 항목 li (ordered list item) 1
  2. Item 2
    1. Item 2.1
      1. Item 2.1.1
        1. Item 2.1.1.1
        2. Item 2.1.1.2
      2. Item 2.1.2
    2. Item 2.2
  3. Item 3
정의 목록 용어 definition list term
정의 목록 설명 definition list description
term
description
term
description
term
description

TABLES

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

BUTTONS

Standard buttons

앵커버튼
Anchor button

FORMS

★그룹명 ~

CODE

Spacing

/* 블록간격기본 .mgtbD … 맞춰준다. ☆ 20200220 */
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,menu,blockquote,fieldset,form,pre,hr,figure{
	margin-top:1.25em;
	margin-bottom:1.25em;
}
h1,h2,h3,h4,h5,h6{
	font-weight:600;
	line-height:1.375;
	letter-spacing:-.0625em;
}
/* ( (40 30 24 20 18 16)/16 ) 20190911 */
h1{font-size:2.5em;margin:.5em 0;} /* (1.25/2.5) */
h2{font-size:1.875em;margin:.625em 0;}
h3{font-size:1.5em;margin:.833em 0;}
h4{font-size:1.25em;margin:1em 0;}
h5{font-size:1.125em;margin:1.111em 0;}
h6{font-size:1em;}

Form and Button

form{margin:0;}
fieldset{margin-left:0;margin-right:0;padding:0;}
legend{} /* ☆ */

a[class*=button],
button,
html input[type=button], /* ☆ Avoid [Android4.2.2]bug) audio and video controls  */
input[type=submit],input[type=reset],
input[type=text],input[type=password],input[type=file],
input[type=email],input[type=number],input[type=search],input[type=tel],input[type=url],
textarea,
select,
input[type=radio],input[type=checkbox]{
	…
	box-sizing: border-box;
	…
}

UTILITIES

Clearing …

.brclear{display:block;clear:both;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;}
.clearfix{min-height:0;}
	.clearfix:before,
	.clearfix:after{content:'';display:table;}
	.clearfix:after{clear:both;}
.blind{position:absolute !important;left:-9999px;
	width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;
	/* opacity:0;filter:alpha(opacity=0); ☆Naver */
}
caption.blind{position:relative;}
.blind.onshow:focus{	display:block;
	position:relative !important;
	left:auto;width:auto;height:auto;
	margin:0 0 1em;padding:.5em 1em;background:#ee0;color:#850;
	font-size:1em;line-height:normal;overflow:hidden;
}
.block-center{display:block;
	margin-left:auto;margin-right:auto;
}

Property …

.dpn { display: none !important; }
.fl { float: left !important; }
.fr {float: right !important; }
.w100 { width: 100% !important; }
.border-box { box-sizing: border-box !important; }

MEDIA QUERIES

/* small~xlarge */
@media all and (min-width: 768px) { /* medium */ }
@media all and (min-width: 1000px) { /* large */ }
@media all and (min-width: 1260px) { /* xlarge */ }

모바일 전용 웹사이트는 중단점breakpoint이 없다. 필요하면 base.css 에서 /* RWD ... /RWD */ 코드를 가져와서 활용한다.

Misc.







EXAMPLES



To do next!













History
: 20150526~
20251114.
20240809.
20210517.
20180601.
20180227.
20171026. 20170623. 
20151020. 20150619. 20150618. 20150616. 20150601.