CSS

[intro] CSS - CSS RESET(= CSS리셋 = CSS초기화 = HTML요소초기화)

목차
  1. HTML 요소 기본 CSS 초기화
  2. 그외 CSS 초기화 코드
  3. 나리야빌더 CSS 초기화 코드

 

HTML 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서, 

크로스브라우징 (= 브라우저마다 동일한 모양) 구현할 때 유용.

 

HTML 요소 기본 CSS 초기화

 

/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/


html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

 

 

https://cssreset.com/scripts/eric-meyer-reset-css/

 

그외 CSS 초기화 코드

 

Eric Meyer’s “Reset CSS” 2.0 

https://meyerweb.com/eric/tools/css/reset/

 

HTML5 Doctor CSS Reset

https://html5doctor.com/html-5-reset-stylesheet/

 

Yahoo! (YUI 3) Reset CSS

https://yuilibrary.com/yui/docs/cssreset/

 

Normalize.css 1.0

https://github.com/necolas/normalize.css

 

참고 http://rwdb.kr/코딩필수css-reset모음/

 

[참고]

나리야빌더 CSS 초기화 코드

/theme/NA-Basic/css/theme.css 약 17 ~ 78라인

 

/* 초기화 */

html, h1, h2, h3, h4, h5, h6, form, fieldset, img {

    margin:0;

    padding:0;

    border:0;

}


ul, dl,dt,dd {

    margin:0;

    padding:0;

    list-style:none;

}


legend {

    position:absolute;

    margin:0;

    padding:0;

    font-size:0;

    line-height:0;

    text-indent:-9999em;

    overflow:hidden;

}


label, input, button, select, img {

    vertical-align:middle; 

}


input[type="submit"] {

    cursor:pointer;

}


button {

    cursor:pointer;

}


select {

    margin:0;

}


fieldset legend, hr {

    display:none;

}


p {

    margin:0;

    padding:0;

    word-break:break-all;

}


a { 

    color: #000; 

    text-decoration: none; 

}


a:hover, a:focus, a:active { 

    color: crimson; 

    text-decoration: none; 

}


.placeholdersjs {

    color:#aaa !important

}

 



분류 제목
selector CSS - [attribute|=value] 속성선택자 - 해당속성값 또는 뒤에 하이픈 연결된 속성값 보유 …
selector CSS - [attribute^=value] 속성선택자 ★ - 지정 속성값 문자열로 시작하는 요소. (=시…
selector CSS - [attribute$=value] 속성선택자 - 지정 속성값 문자열로 끝나는 요소 (IE7)
selector CSS - [attribute*=value] 속성선택자 - 지정 속성값 문자열 포함 모든 요소 (IE7)
selector CSS - :link 가상선택자 - 미방문링크 (= 링크선택자)
selector CSS - :visited 가상선택자 ★ -이미 방문한 링크 선택 (= 읽은글/방문글/확인글 표시 = 비지티…
selector CSS - :hover 가상선택자 ★ - 요소에 마우스커서위치시 효과 (= :hover선택자 = 허버선택자,…
selector CSS - :active 가상선택자 - 링크클릭순간 (= 액티브선택자, 링크선택자)
selector CSS - :focus 선택자 - 포커스 된 요소 선택 (= :focus선택자 = 포커스선택자) (IE8…
selector CSS - ::first-letter 가상선택자 - 요소의 첫번째글자 선택 (= ::first-letter선…
selector CSS - ::first-line 가상선택자 - 요소의 첫번째라인 선택 (= ::first-line선택자 =…
selector CSS - :first-child 가상선택자 - 그부모요소의 첫번째자식요소 (= 퍼스트차일드선택자, IE7)
selector CSS - ::before 가상선택자 - 요소 앞에 내용삽입 (= ::before선택자 = 비포어선택자/비…
selector CSS - ::after 가상선택자 ★ - 요소 뒤에 내용삽입 (= ::after선택자 = 에프터선택자/애프…
selector CSS - :lang(language) 가상선택자 - 특정언어속성요소 (= 언어선택자 = 랭선택자, IE8)
2/33
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인