처음 리셋을 하지 않은 상태에서 스타일을 적용했을 때
생각과는 조금은 다르게 적용이 되었다.
뭔가 시작점이 (0,0)이 아닌 느낌!
오늘은 우리가 CSS의 디폴트 값을 초기화, 무효화할 때
유용하게 사용할 수 있는 사이트를 몇 가지 적어보려고 한다.
왜 사용할까?
#크로스브라우징
우리가 적용한 그대로 반영되지않는 이유는
브라우저마다 기본 값으로 설정된 여백, 들여 쓰기 등의 값이 존재하기 때문이다!
즉, 같은 스타일 요소라도 브라우저에 따라서 조금씩 다르게 보일 수 있다는 이야기이다.
그래서 다른 브라우저를 사용하더라도 동일하게 보이도록 초기화나 재설정 과정을 거치는 것이다.
아래는 CSS Reset과 CSS Normalize의 차이점을 그림으로 쉽게 설명해준다.
뭐가 뭔지 헷갈린다면 한번 보는 것을 추천한다! 👇🏻👇🏼
그림으로 이해하는 CSS Reset
CSS Reset? Normalize? 1분이면 이해하기 충분! | 프론트 엔드(Front-End) 개발을 전문으로 하는 Eljah Manor가 그린 "Visualizing CSS Resets" 아티클 번역. 시각 장애인을 위한 캡션 그림으로 이해하는 CSS 리셋 번
brunch.co.kr
CSS - Resetting VS Normalize
Resetting과 Normalize최근 외국의 한 블로거를 통해 작업 전 기본적으로 브라우저별 태그에 대한 기본 스타일링을 제어하는 두가지 방법을 비교한 글을 본적 있다.하지만 국내에서는 대부분 front-end
tuhbm.github.io
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
Normalize.css: Make browsers render all elements more consistently.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
necolas.github.io
Reboot
Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
getbootstrap.com
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
'CSS' 카테고리의 다른 글
| [CSS] 줄바꿈 규칙 : word-break ? (0) | 2021.08.02 |
|---|---|
| [CSS] <button> : #1 Sign in with Apple 🍎 (0) | 2021.08.01 |
| [CSS] 그리드 : 8 Column Grid (1) | 2021.07.22 |
| [CSS] 그리드 : Grid Layout에 발가락을 담궈보자. (0) | 2021.07.21 |
| [CSS] FLEXBOX FROGGY 🐸 : 게임으로 CSS 배우기 (0) | 2021.07.01 |