[유튜브 클론코딩] 5. STYLING - 1

2021. 3. 9. 17:35Projects/유튜브 클론코딩

728x90
반응형

reset.scss

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;
}
a {
  all: unset;
  cursor: pointer;
}
*,
input {
  box-sizing: border-box;
}
input {
  border: none;
  box-sizing: border-box;
  &:focus,
  &:active {
    outline: none;
  }
}

↑ reset.scss

(reset: 브라우저의 기본 값들을 초기화해서 값들을 0으로 만들어주는 것을 말한다.

margin도 날려버리고 기타 등등, 그런 걸 reset이 하는 것이다.

나는 reset css라고 검색해서 복붙, 그리고 니콜라스의 코드 보고 없는 부분 복사해서 만들었음)

 

728x90
반응형