[웹 UI 개발] CSS 리셋

웹 페이지를 제작할 때는 사용자가 모든 브라우저에서 동일한 경험을 할 수 있도록 크로스브라우징 원칙을 지켜야 한다.

그 첫 단계가 바로 CSS 리셋이다.

 

아무런 스타일을 적용하지 않은 html 문서는 브라우저에 따라 다르게 보이는데, 이는 브라우저마다 요소에 적용하는 기본 스타일이 다르기 때문이다.

그래서 우리는 우선 이 기본 스타일을 리셋시켜 모든 브라우저에서 각 요소들이 동일하게 보이도록 해야한다.

 

기본 스타일은 아래와 같이 브라우저에서 확인해 볼 수 있다.

 

크롬 브라우저에서 h1의 기본 스타일

 

크롬 브라우저에서 fieldset의 기본 스타일

이렇게 확인한 기본 스타일에서 자신의 프로젝트에 맞게 속성들을 초기화해주면 된다.

 

/*예시*/
h1, h2, h3, h4, h5, h6,
fieldset {
	margin: 0;
    padding: 0;
}

fieldset {
	border: 0;
}

 

CSS 리셋은 구글에 검색해보면 사람들이 미리 만들어 놓은 파일들도 있다.

그 파일들을 그대로 써도 되지만, 되도록이면 자신의 프로젝트에 맞게끔 직접 리셋하는 것이 좋다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발