#03 reset.css를 Vue 프로젝트 파일에 다 적용시켜보기!

 

👇👇👇 (이 분 블로그 설명이 잘 나와있는 것 같아 참고하였다) 👇👇👇

https://kdinner.tistory.com/77

Vue 관련 잘 몰랐던 개념 정리

 

VUE CSS 범위 설정 방식은 두가지가 있다고 한다.

'Global', 'Scope'.

 

Global은 부모, 자식 말고 모-든 파일에 적용돼서 최상위에서 reset.css 등을 넣는다고 한다.

내가 딱 원하던 글이었다!!! 😋😋

 

css 넣는걸 터득해도 reset.css 같은건 어떻게 넣지?

-라고 생각했는데. 다행이었다.

 

이제 개념을 어느정도 숙지했으니 직접 써보는 타이밍이다!! 🧐

 

 

 

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;

}

 

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;

}

 

reset.css! (src 파일에 넣어주었따)

이제 src 파일 안에 넣으면 되는건가! >_<

 

 

src : 넌 내거야! / reset : ???

 

Header.vue

style 태그 안에 @import './reset.css'; 를 넣어줬다. 과연~~~~~~~~~?

ctrl + S!

 

.

.

.

 

안되네. ' npm run serve ' !

 

으음 ~ 이 달콤한 빨간색 향기!!

 

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

내가 보기에 경로가 이상한 것 같다 다시 바꾸기 ㄱㄱ

근데? 안된다?! 그렇게 나는 생각을 해보는데...

아무래도 내 문제임! 데헷. 다시 경로를 바꾸기로 함.

 

 

드디어ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

 

흑흑,, 엉엉 ,, 드디어 됐다..

reset.css 파일이 상위->상위에 있어서

../reset.css로만 쓰면 안되고

../../reset.css로 써야되는 것이었다ㅠㅠㅠㅠ

 

 

이제 초기화를 했으니! 여백이 있는지 없는지 확인ㅇ..

???????????????????????????????????????????

언니??

 

 

그냥 import 해줄 Header.css 만듬;;

 

헤헤 넌 왜 또 오류야

????????????????????????????????????????????????????????????

아니 나 바보구나.....

앞에 태그명(?)을 안썼구나...........

 

 

 

휴~ 편안 .. :3

 

너무 편안하다.... 이제 확인을 해보자. 두근....

 

 

 

응!!!안녕!!!!!!!!!!!!!!!!!!!!!!1

 

ㅎㅇ가 이렇게 반가울 수가ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

감격이다 감격.. 이젠 웹페이지 간단한 거 만들 수 있겠죠?!?!!?

너무 행복하당 히히히힣ㅎㅎㅎ (텐션高)

다음 개발 일기는 간단한 웹페이지 만들어 보기 ~ >_<