프로젝트를 시작하면, 초기에 먼저 css를 초기화하고 시작하는 것이 좋다.
이렇게 초기화를 해주는 이유는 브라우저마다 기본으로 제공하는 스타일이 있기때문이다.
예를 들면
내가 margin을 지정하지 않았는데도, 알아서 margin값이 들어있어서 내가 원하는대로 화면을 가득채우는 것이 불가능하다.
아래의 사진은 width를 100%로 주었음에도 불구하고 자세히보면 margin값으로 인해 화면을 가득채우지 못하고 있는 것을 볼 수 있다.
그래서 개발자가 의도한대로 디자인이 나오게 하기위해서는 이러한 설정을 다시 리셋해주는 과정을 거쳐야한다.
(프로젝트를 이미 많이 진행하고 난 뒤에 바꾸는 것은 더 어려우므로 프로젝트 초기에 먼저 설정한 뒤 시작하는 것이 좋다)
🔎 원리
➡️ user agent stylesheet 때문에
이런 원리를 몰랐을때 프로젝트를 하면서 왜 내가 디자인한대로 나오지 않을까?고민하면서 user agent sytlesheet때문인 것을 알게 되었다. 그때 이러한 오류를 해결하면서 정리한 내용인데 이러한 것이 발생하는 원인에 대해서 더 자세하게 정리하였다.
user agent stylesheet란? (css가 제대로 동작하지 않을때, 체크해볼것)
css가 정상적으로 작동하지 않아서, 개발자도구를 켜보니 내가 주지 않은 css가 적용되고 있었다. 나는 img에 이런 css를 주지 않았는데 왜 이런 값이 적용되고 있는걸까? 자세히 보니 img옆에 user age
hihiha2.tistory.com
✅ 해결법
이러한 것을 초기화하기 위해서 상위의 css에 css의 초기값을 입력해주면 된다.
그런데 이러한 과정을 매번 일일이 다 치는 것은 번거로우므로 이미 만들어져 있는 라이브러리를 사용하거나, 아니면 짜여진 코드를 가져와서 import해주는 방식으로 해결한다.
이때 대표적으로 사용하는 2가지가 바로 reset css / normalize css이다.
🔫 차이점
reset css:
거의 다 초기화되어 개발자 맘대로 만들 수 있고 가볍다
normalize.css:
이름처럼 정규화를 시켜준다고 이해하면 된다. 어느정도 초기화되지만 기본적은 디자인은 내장하고 있다.
다른 브라우저로 보더라도 일정한 디자인을 볼 수 있도록 해주기위해서 사용한다.
reset.css보다는 조금 더 무겁고 최근 더 많이 사용된다고 한다.
➡️ 내가 디자인을 다 하고 싶다!!면 reset.css를 사용하고 기본적인것이 조금은 가미된 것을 쓰고 싶다면 normalize를 취향껏 쓰면 될 것같다.
reset css
1-1. reset css 사용법 (1): cdn이용하기
index.html의 <head>태그 안에 cdn을 import한다.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css"
/>
1-2. reset css 사용법 (2): reset.css 파일 만들기
1️⃣ 아래의 페이지에 들어가서 코드 전체를 복사한다.
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
2️⃣ reset.css라는 폴더를 만든다. (나는 src하위로 위치를 지정했다)
3️⃣ 복사한 해당 코드를 reset.css에 붙여넣는다.
4️⃣ app.css에 reset.css를 import해준다.
@import "./reset.css"(각자 저장한 위치에 알맞게 경로를 지정해야한다.)
(위의 reset.css를 index.html에 link로 넣어주는 방법도 있는데, 그렇게 연결해주면 reset이 적용되지 않아서 그냥 app.css에 import하는 방법을 사용하였다)
또 내가 더 넣어주고 싶은 초기설정도 함께 css에 추가하였다.
✚ 추가한 초기설정
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
}
normalize.css
2-1. normalize.css 사용법 (1): cdn이용하기
위에서 reset.css를 index.html에 넣은것과 같이, index.html의 태그 안에 cdn을 import한다.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
버전이 업그레이드 될수도 있으므로 아래의 페이지에서 버전을 확인한뒤, link를 복사하여 사용하는 것이 좋다.
normalize - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Normalize.css as a node packaged module - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We mak
cdnjs.com
2-2. normalize.css 사용법 (2): 터미널에서 install하여 사용하기
npm i normalize.css터미널에서 install하여서도 사용할 수 있다.
아래의 사이트를 참고
normalize.css
A modern alternative to CSS resets. Latest version: 8.0.1, last published: 5 years ago. Start using normalize.css in your project by running `npm i normalize.css`. There are 4117 other projects in the npm registry using normalize.css.
www.npmjs.com
✅ 결론
각자의 취향에 따라 css를 초기화하면 되는 것이고, 딱 정해진 초기세팅은 없는 것 같다.
나는 normalize.css를 사용하였고, cdn의 link를 index.html에 걸어주는 방법을 사용하였다.
또 app.css에 추가설정을 더 넣어서 사용하였다.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
}만들다가 초기값으로 넣으면 좋을 것 같은것이 생기면 여기에 더 추가해서 앞으로 만들때마다 이 방법을 이용하여 만들 생각이다.