# 내 입맛에 맞춘 Reset.css




Reset.css 는 (브라우저간의 차이를 최소화시켜) 스타일을 초기화 시키고, 그 상태에서 디자인을 만들어나가기 위해 생겨났습니다.



아래의 reset.css는 자주 사용되는 초기화와,  여러 프로젝트를 경험하면서 추가 시킨
제 입맛에 맞춘 reset.css 입니다.

아래의 css 외에,  reset.css에 추가하면 좋을 듯한 여러분의 의견을 언제나 환영합니다  : )


reset.css (v.20180403)
html, body, div, span, 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, figcaption, figure,
footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

html, body {
    height:100%;
    /* font:normal 14px 'Noto Sans', dotum, '돋움', sans-serif;
       color:#333;
       letter-spacing:-0.5px; */
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ul, ol{
    list-style:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color:inherit;
}

a:link, a:visited {
    text-decoration:none;
    color:inherit;
}

a:hover {
    text-decoration:underline;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/*
caption, legend{
    position:absolute;
    left:-100000px;
    top:auto;
    overflow:hidden;
    margin:0;
    padding:0;
    border:0;
    width:0;
    height:0;
    font-size:0;
    line-height:0;
}
*/

input, select {
    vertical-align:middle;
}

ol, ul, li {
    list-style:none;
}

img {
    border:0;
    vertical-align:top;
}

fieldset {
    vertical-align:middle;
}

'Front-end dev > HTML || CSS' 카테고리의 다른 글

Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
Normalize.css (v8.0.0)  (527) 2018.04.03
시멘틱 마크업을 위한 콘텐츠 요소 판별  (586) 2018.03.30

Normalize.css (v8.0.0)




모든 브라우저에는 고유한 스타일이 있습니다. Normalize.css 는 모든 브라우저에서 스타일을 일관성 있게 만드는 작업을 합니다.


Reset.css 와의 차이


Reset CSS는 말 그대로 초기화를 시켜버리는 것을 중점으로 한다면

Normalize의 경우는 초기화는 시키지만 어느정도 스타일이 담겨있다고 이해하면 좋을것 같습니다.


1. Normalize.css는 모든 것을 "정리 해제"하기보다는 유용한 기본값을 보존합니다. 

예를 들어, element는 normalize.css를 포함 한 후 "그냥 작동" sup하거나 sub(정상적으로 작동합니다.) 실제로 reset.css를 포함하면 시각적으로 일반 텍스트와 구분할 수없는 반면 실제로는 더 강하게 만듭니다. 따라서 normalize.css는 시각적 시작점 (동질성)을 부여하지 않습니다. 이것은 모든 사람의 취향이 아닐 수도 있습니다. 가장 좋은 방법은 두 가지를 실험 해보고 어떤 젤을 선호하는지 확인하는 것입니다.


2. Normalize.css는 reset.css의 범위를 벗어나는 몇 가지 일반적인 버그를 수정합니다. 

reset.css보다 넓은 범위를 가지고 있으며 HTML5 요소의 표시 설정, font양식 요소 의 상속 부족 font-size렌더링 수정 pre, IE9의 SVG 오버플로 및 buttoniOS 의 스타일 버그 와 같은 일반적인 문제에 대한 버그 수정을 제공합니다 .


3. Normalize.css는 개발자 도구를 혼란스럽게하지 않습니다. 

reset.css를 사용할 때 공통적 인 염려는 브라우저 CSS 디버깅 도구에 표시되는 커다란 상속 체인입니다. 타겟팅 된 스타일 때문에 normalize.css와 같은 문제가 아닙니다.


4. Normalize.css는 모듈 식입니다. 

프로젝트는 상대적으로 독립적 인 섹션으로 나뉘어 있으므로 웹 사이트에서 절대로 필요하지 않은 섹션을 쉽게 제거 할 수 있습니다 (양식 정규화와 같은).


5. Normalize.css에는 더 나은 문서가 있습니다. 

normalize.css 코드는 GitHub Wiki 에서 더 포괄적으로 인라인으로 문서화됩니다 즉, 코드의 각 행이 무엇을하는지, 왜 포함되었는지, 브라우저간에 차이점이 무엇인지, 그리고 자신의 테스트를보다 쉽게 ​​실행할 수 있는지를 알 수 있습니다. 이 프로젝트의 목적은 브라우저가 기본적으로 요소를 렌더링하는 방법을 사람들에게 알리고 개선 제안을하기 쉽도록하는 것입니다.




Normalize.css (v8.0.0)

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
* 1. 모든 브라우저에서 줄 높이를 맞춤
* 2. ios와 IE에서 기기 회전시에 사용자가 확대하지 않아도 글씨 크기가 재조정되는 것을 예방
*/

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
========================================================================== */

/**
* 모든 브라우저의 여백(margin)을 제거
*/

body {
    margin: 0;
}

/**
Chrome, Firefox, and Safari에서 'section'과 'article' 내부의 'h1' 요소의 글꼴 크기와 여백(margin) 값이 다른 것을 통일시킴
*/

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/**
* 1. Firefox와 다른 브라우저들 사이의 차이점 해결
* 2. Edge and IE에 'overflow'를 적용
*/

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
* 1. 모든 브라우저에서 글꼴 크기를 맞춰줌
* 2. 모든 브라우저에서 글꼴 크기를 'em'으로 맞춰줌
*/

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
========================================================================== */

/**
* IE10에서 링크가 'active' 일 때 회색 배경색을 제거
*/

a {
    background-color: transparent;
}

/**
* 1. Chrome 57- 에서 border-bottom 을 제거
* 2. Chrome, Edge, IE, Opera, and Safari에서 밑줄(underline)을 추가
*/

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
* Chrome, Edge, and Safari에서 폰트 두께 설정
*/

b,
strong {
    font-weight: bolder;
}

/**
* 1. 모든 브라우저에서 글꼴 크기의 상속과 크기 조정
* 2. 모든 브라우저에서 글꼴 크기를 'em'으로 맞춰줌
*/

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
* 모든 브라우저에서 글꼴 크기를 맞춤
*/

small {
    font-size: 80%;
}

/**
* 모든 브라우저에서 `sub` and `sup` 요소가 줄높이(line-height)에 영향을 미치지 않도록 함
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
========================================================================== */

/**
* IE 10의 링크 안의 이미지의 테두리(border) 제거
*/

img {
    border-style: none;
}

/* Forms
========================================================================== */

/**
* 1. 모든 브라우저에서 글꼴 스타일 변경
* 2. Firefox and Safari에서 여백(margin) 제거
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
* IE에서 'overflow' 표시
* 1. Edge에서 'overflow' 표시
*/

button,
input { /* 1 */
    overflow: visible;
}

/**
* Edge, Firefox, 및 IE에서 텍스트 변형의 상속을 제거
* 1. Firefox에서 텍스트 변형의 상속을 제거
*/

button,
select { /* 1 */
    text-transform: none;
}

/**
* iOS, Safari에서 스타일을 클릭 할 수 없는 오류를 수정
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
* Firefox의 내부 테두리(border)와 안쪽 여백(padding)을 제거
*/

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
* 이전 규칙에 따라 설정 해제 된 포커스 스타일을 복원
*/

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
* Firefox에서 안쪽 여백(padding)을 수정
*/

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
* 1. Edge, IE에서 텍스트 배치를 수정 
* 2. IE의 `fieldset` 요소에서 색상 상속을 수정
* 3. Remove the padding so developers are not caught out when they zero out
* 모든 브라우저의 `fieldset` 요소
*/

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
* Chrome, Firefox, 및 Opera에서 수직 정렬(vertical-align)을 추가
*/

progress {
    vertical-align: baseline;
}

/**
* IE 10+에서 기본 세로 스크롤을 제거
*/

textarea {
    overflow: auto;
}

/**
* 1. IE 10에 상자 크기(box-sizing) 설정
* 2. IE 10에서 안쪽 여백(padding)을 제거
*/

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
* Chrome에서 증가 및 감소 버튼의 스타일을 수정
*/

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Safari에서 outline 스타일 수정
*/

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
macOS에서 Chrome, Safari의 안쪽 여백(padding)을 제거
*/

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
* 1. iOS,Safari에서 스타일을 클릭 할 수 없는 문제를 수정
* 2. Safari에서 글꼴 속성을 '상속(inherit)' 으로 변경
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
========================================================================== */

/*
* Edge, IE 10+, 및 Firefox에 올바른 디스플레이(display) 추가
*/

details {
    display: block;
}

/*
* 모든 브라우저에 올바른 디스플레이(display) 추가
*/

summary {
    display: list-item;
}

/* Misc
========================================================================== */

/**
* IE 10+에 올바른 디스플레이(display) 추가
*/

template {
    display: none;
}

/**
IE 10에 올바른 디스플레이(display) 추가
*/

[hidden] {
    display: none;
}



[출처] http://necolas.github.io/ 바로가기



'Front-end dev > HTML || CSS' 카테고리의 다른 글

Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03
시멘틱 마크업을 위한 콘텐츠 요소 판별  (586) 2018.03.30

# 시멘틱 마크업을 위한 콘텐츠 요소 판별






[출처] html5.creation.net 바로가기



'Front-end dev > HTML || CSS' 카테고리의 다른 글

Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03
Normalize.css (v8.0.0)  (527) 2018.04.03

+ Recent posts