1976s

모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어서 CSS가 없어도 작동합니다. 그런데 웹브라우저에 따라 디폴트 스타일이 다르고 지원하는 tag나 style도 제각각이어서 주의가 필요합니다.

Reset CSS

Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용합니다. 즉 브라우저 별로 제각각인 것을 디폴트 스타일로 통일시켜 주는 역할도 합니다. 인터넷에는 많은 스타일들이 있습니다. 그중에 저에게 맞는 스타일을 찾고 짜깁기 하여 사용하고 있습니다.

 

인터넷의 기본 Reset CSS

• Eric Meyer’s reset
  CDN : https://cdnjs.com/libraries/meyer-reset
• normalize.css
  CDN : https://cdnjs.com/libraries/normalize
• HTML5 Doctor CSS Reset
• Yahoo! (YUI 3) Reset CSS
• Universal Selector ‘*’ Reset

위의 코드는 기본입니다. 이것으로는 기본만 되고 그후에 자기에 맞게 수정하셔야 합니다.

 

나에게 맞는 Reset CSS 참고 사이트

• https://getbootstrap.com/docs/5.3/content/reboot/
• https://getuikit.com/

위 2곳의 css를 짜집기 해서 이곳 블로그에 사용하고 있습니다.

 

제가 사용하는 CSS

:root {
  --ko-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --link-rgb: 250, 41, 50;
  --link-hover-rgb: 198, 32, 39;
}

*, :after, :before {
  box-sizing: border-box;
  border: 0 solid
}

body {
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1.625;
  color: #212529;
  word-break: keep-all;
  word-wrap: break-word;
  font-family: var(--ko-font);
  background-color: #fff;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased
}

code {
  font-size: 90%;
  padding: 1px  5px;
  border-radius: 2px
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin: 0 0 20px 0;
  font-weight: 500 !important;
  line-height: 1.2;
  color: currentColor
}

* + h1, * + h2 {
  margin-top: 5rem
}

* + h3 {
  margin-top: 4rem
}

* + h4, * + h5, * + h6 {
  margin-top: 80px;
}

h1, h1[data-ke-size], .h1 {
  font-size: calc(1.375rem + 1.5vw)
}

@media (min-width:1400px) {
  h1, h1[data-ke-size], .h1 {
    font-size: 2.5rem
  }
}

h2, h2[data-ke-size], .h2 {
  font-size: calc(1.325rem + 0.9vw)
}

@media (min-width:1400px) {
  h2, h2[data-ke-size], .h2 {
    font-size: 2rem
  }
}

h3, h3[data-ke-size], .h3 {
  font-size: calc(1.3rem + 0.6vw)
}

@media (min-width:1400px) {
  h3, h3[data-ke-size], .h3 {
    font-size: 1.75rem
  }
}

h4, h4[data-ke-size], .h4 {
  font-size: calc(1.275rem + 0.3vw)
}

@media (min-width:1400px) {
  h4, .h4 {
    font-size: 1.5rem
  }
}

h5, .h5 {
  font-size: 1.25rem
}

h6, .h6 {
  font-size: 1rem
}

a {
  color: #fa2932;
  text-decoration: underline
}

a:hover {
  color: #c62027
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none
}

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

* + p, * + ul, * + ol, * + dl, * + pre, * + address, * + fieldset, * + figure {
  margin-top: 20px;
}

img, svg {
  vertical-align: middle
}

button {
  border-radius: 0
}

button:focus:not(:focus-visible) {
  outline: 0
}

small.small {
  font-size: 80%
}

code, kbd, pre, samp {
  font-family: var(--font-monospace);
  font-size: 1em
}

code {
  font-size: .875em;
  color: #d63384;
  word-wrap: break-word
}

.mark, mark {
  padding: 0.1875em;
  background-color: #fff3cd;
}

kbd {
  padding: 0.1875rem 0.375rem;
  font-size: .875em;
  color: #fff;
  background-color: #212529;
  border-radius: 0.25rem;
}

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

tbody, td, tfoot, th, thead, tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

마치며

Reset CSS를 알아보았습니다.