Reset CSS와 Normalize CSS

웹개발에서는 브라우저가 제공하는 기본 스타일이 서로 다를 수 있기 때문에, 이를 통일하여 일관된 디자인을 구현하는 것이 중요합니다. 

Reset CSS와 Normalize CSS는 모두 브라우저간의 스타일 차이를 줄이기 위해 사용되는 CSS 파일입니다. 두 방법은 목적이 같지만 방식에 차이가 있습니다. 

 

Reset CSS

모든 브라우저의 기본 스타일을 완전히 제거하는 방식입니다. 예를 들어 HTML 요소에 기본적으로 적용된 여백, 패딩, 글자 크기 등을 초기화하여, 모든 요소를 스타일이 전혀 없는 상태로 만듭니다. 이렇게 하면 개발자는 특정 브라우저의 기본 스타일에 영향을 받지 않고 완전히 통제된 상태에서 스타일링을 시작할 수 있습니다. Reset CSS는 모든 요소를 초기화하기 때문에, 스타일을 처음부터 새롭게 작성해야하는 수고가 있지만, 완전한 스타일 통일성을 보장합니다. 

* { /* 모든 기본 스타일요소를 초기화 */
	margin : 0;
    padding : 0;
    border : 0;
    font-size : 100%;
    font : inherit;
    vertical-align : baseline;
}

 

Normal CSS

브라우저 간 스타일 차이를 줄이는데 중점을 둔 방식입니다. 모든 요소의 기본 스타일을 완전히 제거하는 대신, 브라우저간에 일관되지않은 스타일만 수정하여 자연스러운 기본값을 유지합니다. 예를 들어 Normalize CSS는 제목 태그의 기본크기나 폰트를 브라우저마다 일관되게 조정하면서도, 요소의 기본적인 스타일은 그대로 웁니다. 이를 통해 자연스러운 초기 스타일을 유지하면서, 브라우저간의 주요한 차이만 해소하는 것입니다.

/*브라우저 기본 스타일을 일관되게 유지*/
h1 {
	font-size : 2em;
    margin:0.67em 0;
}

a{
	background-color:transport;
}

 

무엇을 선택하는 것이 좋을까?

이는 프로젝트 상황이나 개인의 취향에 따라 다를 수 있습니다. 예를 들어 데드라인이 넉넉하지 않은 프로젝트에서는 처음부터 일일이 스타일링할 여력이 없으니 Normalize CSS를 선택하는 것이 유리할 수 있습니다. 한편, 디자인 시스템과 같이 모든 것을 직접 스타일링하는 것이 중요한 상황에서는 Reset CSS를 선택하는 것이 유리할 수 있습니다.