[코딩 공부_28] reset.css

①  reset.css 

- html 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서 크로스브라우징(=브라우저마다 동일한 모양) 구현할 때 유용하다

  ** 크로스 브라우징이란? 

     - 마크업을 하면서 지켜야 하는 4가지 원칙 중 하나, 웹 표준 / 웹 접근성 / 시맨틱 마크업 / 크로스 브라우징

 

* HTML 요소 기본 CSS 초기화

<Style>
/* 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;

}
</Style>

 

 

* 그 외 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

 

 

* Na빌더 CSS 초기화 코드

/* 초기화 */

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

}

 

** CSS 리셋

  - 브라우저마다 태그를 렌더링하는 스타일이 다르다

  - 모든 브라우저에 동일한 화면을 볼 수 있또록 화면을 초기화 한다

  - CSS 리셋은 각 프로젝트에 맞춰서 사용한다