CSS 초기세팅 값 (개인적)

웹 표준

웹 표준을 따르는 것이 서로 다른 브라우저에서 동일한 화면을 보여주는 것

웹페이지 제작 시 웹 표준에 따라서 작업을 하더라도 서로 다른 웹 브라우저에서 동일하게 보이지 않는 경우가 많이 있습니다. 각각의 브라우저들이 서로 다른 렌더링 방식을 가지고 있거나, 표준에 대한 지원율도 차이를 보이기 때문입니다. 웹페이지를 만들면서 사용자가 각기 다른 브라우저에서 웹페이지가 동일하게 보이도록 하는데 많은 시간을 들이게 됩니다. 이를 위한 일반적인 해결 방법으로는 CSS를 사용하여 각 다른 브라우저의 디폴트 스타일을 지우고 무효화하는 것입니다. 마진과 패딩 등을 0으로 설정하여 기본 설정 없이 모든 상황이 동일한 상태에서 설정을 다시 시작하는 것입니다. 자신이 필요한 기능을 만들어서 사용해도 좋지만 이미 잘 만들어진 게 있다면 가져와 사용하는 것도 나쁘지 않습니다.

미리 만들어 놓은 리셋 사이트를 밑의 링크했습니다.

• Eric Meyer's Reset CSS <cdn>
• HTML5 Doctor CSS Reset
• YUI 3 Reset CSS
• Normalize.css <cdn>

참고로 똑 같아야 하나 싶기도 합니다. (개인적인 생각입니다) 개인적으로 많이들 사용하는 것이 Eric Meyer's Reset CSS와 Normalize·css인것 같습니다. 물론 최신 버전이 Normalize·css인것 같지만 약간의 디자인 면이 가미된 것 같습니다. 말 그대로 리셋이면 Eric Meyer's Reset CSS가 좋을 것 같습니다.

기타 사이트 참고

• Bootstrap
• UIkit

개인적인 Css 리셋

제가 사용하는 리셋css입니다. 개인적으로 위의 소스를 기본으로 하여 기본에 충실하고자 노력도 하고 했지만 저의 기타 사항도 많이 가미된 부분 CSS(UIKit에 많이 영향을 받음.)입니다. 

@charset "utf-8";

*,
*::before,
*::after {
  /* 테두리를 기준으로 크기를 정합니다. */
  box-sizing: border-box;
}

/* 텍스트 마우스 드래그시 색상 변경방법 */
::selection,
::-moz-selection {
  background : #39f;
  color      : #fff;
  text-shadow: none;
}

html {
  font-family: -apple-system,
    BlinkMacSystemFont,
    /* 한글 폰트 들어갈 자리 */
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* `font` 속성 리셋 */
  font-size                  : 16px;
  /* 기본 글골 사이즈 정의            : 16x => 1rem */
  font-weight                : normal;
  line-height                : 1.5;
  /* 단위 쓰지 말것 */
  background-color           : #fff;
  color                      : #4d5058;
  /* 글꼴 크기 조정을 방지 */
  -webkit-text-size-adjust   : 100%;
  /* 폰트를 부드럽게 */
  -webkit-font-smoothing     : antialiased;
  -moz-osx-font-smoothing    : grayscale;
  /* 웹킷 마음대로 눌림 하이라이트 막음 */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

/* 기본 셋업 */
header,section,article,aside,footer,main,a,button,input,textarea,img,nav,ul,ol,li,p,h1,h2,h3,h4,h5,h6,div,span{
  margin   : 0;
  padding  : 0;
  /* 폰트 크기 상속 */
  font-size: inherit;
}

a:active,
a:hover {
  outline: none;
}

a {
  color          : #1e87f0;
  text-decoration: none;
  cursor         : pointer;
}

a:hover {
  color          : #0f6ecd;
  text-decoration: underline;
}

abbr[title] {
  text-decoration              : underline dotted;
  /* Safari에서는 '밑줄 점선'이 지원되지 않음. */
  -webkit-text-decoration-style: dotted;
}

b,
strong {
  font-weight: bolder;
}

:not(pre)>code,
:not(pre)>kbd,
:not(pre)>samp {
  font-family: Consolas, monaco, monospace;
  font-size  : 0.875rem;
  color      : #f0506e;
  white-space: nowrap;
  padding    : 2px 6px;
  background : #f8f8f8;
}

em {
  color: #f0506e;
}

ins {
  background     : #ffd;
  color          : #666;
  text-decoration: none;
}

mark,
.mark {
  background: #ffd;
  color     : #666;
}

q {
  font-style: italic;
}

small,
.small {
  font-size: 80%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

canvas,
img,
video {
  max-width : 100%;
  height    : auto;
  box-sizing: border-box;
}

@supports (display:block) {
  svg {
    max-width : 100%;
    height    : auto;
    box-sizing: border-box;
  }
}

svg:not(:root) {
  overflow: hidden;
}

img:not([src]) {
  min-width : 1px;
  visibility: hidden;
}

iframe {
  border: 0;
}

p {
  margin-top   : 0;
  margin-bottom: 1rem;
}

/* 인접한 요소 인 경우 여백 추가 */
*+p {
  margin-top: 1rem;
}

ul,
ol,
dl,
pre,
address,
fieldset,
figure {
  margin: 0 0 20px 0;
}

/* 인접한 요소 인 경우 여백 추가 */
*+ul,
*+ol,
*+dl,
*+pre,
*+address,
*+fieldset,
*+figure {
  margin-top: 20px;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  margin        : 0 0 20px 0;
  font-weight   : normal;
  color         : #333;
  text-transform: none;
}

/* 인접한 요소 인 경우 여백 추가 */
*+h1,*+h2,*+h3,*+h4,*+h5,*+h6,*+.h1,*+.h2,*+.h3,*+.h4,*+.h5,*+.h6{margin-top:40px;}

h1,
.h1 {
  font-size  : 2.23125rem;
  line-height: 1.2;
}

h2,
.h2 {
  font-size  : 1.7rem;
  line-height: 1.3;
}

h3,
.h3 {
  font-size  : 1.5rem;
  line-height: 1.4;
}

h4,
.h4 {
  font-size  : 1.25rem;
  line-height: 1.4;
}

h5,
.h5 {
  font-size  : 16px;
  line-height: 1.4;
}

h6,
.h6 {
  font-size  : 0.875rem;
  line-height: 1.4;
}

@media (min-width:960px) {

  h1,
  .h1 {
    font-size: 2.625rem;
  }

  h2,
  .h2 {
    font-size: 2rem;
  }
}

ul,
ol {
  padding-right: 0px;
}

ul>li>ul,
ul>li>ol,
ol>li>ol,
ol>li>ul {
  margin: 0 0 0 15px
}

dt {
  font-weight: bold;
}

dd {
  margin-right: 0;
}

hr {
  overflow  : visible;
  text-align: inherit;
  margin    : 0 0 20px 0;
  border    : 0;
  border-top: 1px solid #e5e5e5;
}

/* 인접한 요소 인 경우 여백 추가 */
*+hr {
  margin-top: 20px;
}

address {
  font-style: normal;
}

blockquote {
  margin     : 0 0 20px 0;
  font-size  : 1.25rem;
  line-height: 1.5;
  font-style : italic;
  color      : #333;
}

/* 인접한 요소 인 경우 여백 추가 */
*+blockquote {
  margin-top: 20px;
}

blockquote p:last-of-type {
  margin-bottom: 0;
}

blockquote footer {
  margin-top : 10px;
  font-size  : 0.875rem;
  line-height: 1.5;
  color      : #666;
}

blockquote footer::before {
  content: "— ";
}

pre {
  font         : 0.875rem / 1.5 Consolas, monaco, monospace;
  color        : #666;
  -moz-tab-size: 4;
  tab-size     : 4;
  /* 1 */
  overflow     : auto;
  padding      : 10px;
  border       : 1px solid #e5e5e5;
  border-radius: 3px;
  background   : #fff;
}

pre code {
  font-family: Consolas, monaco, monospace;
}

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

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

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

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding   : 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: listbox;
}

textarea {
    overflow: auto;
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

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

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none;
}

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

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

[hidden] {
    display: none !important;
}

/* HTML5 elements  ========================================================================== */
details,
main {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

/* 브라우저는 렌더링 속도, 정밀도에 대한 가독성을 강조 */
@media screen and (min-width:960px) {

    html,
    body {
        text-rendering: optimizeLegibility;
    }
}