CSS의 각 요소는 미리 지정된 기본 스타일을 가지고 있습니다. 예를 들어 <p> 요소의 경우 기본적으로 마진을 가지기 때문에
화면에 아래와 같이 표시됩니다.
문제점
기본 스타일은 때에 따라서 필요한 경우도 있지만 스타일 작업 시 기본 스타일도 고려하려야 하기 때문에 스타일링 작업을 힘들게 하는 요소로 작용합니다. 또 브라우저마다 각 요소의 기본 스타일이 다르게 설정되어 있어 같은 웹사이트라도 브라우저마다 다르게 표시되어 사용자에게 부정적인 경험을 줄 수 있겠죠.
기본 스타일 제거하기
따라서, 스타일 작업에 앞서 기본 스타일을 제거하거나 일반화하는 작업이 필요한데요. 아래와 같은 방법 중 하나로 가능합니다.
1. CSS reset
말 그래도 CSS 스타일을 리셋하고 시작하는 방식으로 아래와 같은 코드를 사용합니다. 주로 마진이나 패딩 또 박스에 설정되는 보더가 스타일링을 복잡하게 만드는 경우 많으므로 아래와 같이 해당 속성들을 초기화합니다. 참고로 'box-sizing'은 크기 산정 시 보더의 크기도 포함하여 산정하게 해 줍니다 (기본은 이를 제외하고 너비, 높이 산정).
/* main.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}보이는 것처럼 해당요소에 우선하여 스타일이 적용되어
아래와 같이 <p> 요소의 기본 마진도 사라졌습니다.
※ CSS reset 라이브러리들
https://meyerweb.com/eric/tools/css/reset/reset.css
CSS reset 방식의 단점은 모든 요소에 일률적으로 적용되는 경우 설정된 유용한 스타일까지 초기화되는 점인데요. 아래 두 가지 방식은 이러한 점을 보완하여 각 요소의 기본 스타일을 유지하며 각 브라우저에 동일한 스타일을 제공하는데 집중합니다.
2. 노멀라이저 (Nomalizer)
각 브라우저 간 동일한 스타일을 적용하는 CSS코드로 CSS reset처럼 일률적으로 각 요소의 스타일을 제거하지 않는다는 장점이 있습니다.
먼저, 노멀라이저가 적용되지 않는 경우와 노멀라이저가 적용된 경우를 비교해 보면 스타일 상에 큰 차이는 찾을 수 없는데요.
하지만 해당 요소에 적용된 스타일을 보면 아래와 같이 일부 스타일이 변경된 것을 확인 가능합니다.
노멀라이저 사용은 원하는 노멀라이저 파일을 다운로드하여 적용하면 되는데 아래와 같이 파일로 추가하는 방식이 많이 사용됩니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- custom style -->
<link rel="stylesheet" href="./normalize.css">
<link rel="stylesheet" href="main.css" />
<script defer src="index.js"></script>
</head>※ 노멀라이저 다운로드
normalize.css (csstools.github.io)
normalize.css
normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
csstools.github.io
노멀라이저 방식의 단점은 브라우저 간에 통일성을 목적으로 하기 때문에 스타일링 작업의 편의성 향상에는 크게 도움이 되지 않습니다.
3. 스타일 라이브러리
스타일 라이브러리는 스타일의 통일성을 향상하고 작업 통제력을 향상하기 위해 기본 스타일 초기화를 설정해 두는데요.
예를 들어, 부트스트랩을 추가해 보면
<!-- index.html -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<!-- custom style -->
<!-- <link rel="stylesheet" href="normalize.css"> -->
<link rel="stylesheet" href="main.css" />
<script defer src="index.js"></script>
</head>스타일 변화와 함께
기본 스타일 초기화도 적용됩니다.
※ 스타일 라이브러리들
Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.com
스타일 라이브러리를 사용하는 방식의 단점은 새로운 문법을 배워야 한다는 점과 라이브러리의 종류에 따라 (테일윈드) 큰 용량으로 인해 구현하고자 하는 애플리케이션에 대비 스타일 파일이 너무 커진다는 점입니다.
이상으로 CSS 스타일 리셋에 대해서 알아보았습니다.
참고
html - What exactly does normalization in CSS do? - Stack Overflow
What exactly does normalization in CSS do?
I was trying some code with unordered lists in HTML on JSFiddle and I was irritated to death to find out that the bullets in the <ul> won't show for no apparent reason. On trying different th...
stackoverflow.com
Normalize vs Reset CSS - this vs that (thisthat.dev)
Normalize vs Reset CSS - this vs that
Normalize vs Reset CSS
thisthat.dev
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 컴포넌트 - 로딩 (9) | 2023.02.03 |
|---|---|
| 단위 (0) | 2023.01.03 |
| Inline VS Block and Inline-block (0) | 2022.12.30 |
| Absolute (0) | 2022.12.29 |
| Fixed (0) | 2022.12.29 |
