[CSS] Resetting Defaults

안녕하세요 동기 여러분! 오늘은 새해 기념으로 CSS의 마진(Margin)과 페딩(padding)의 값을 초기화하는 방법을 알아봅시다!

 

Resetting Defaults

우리가 많이 사용하는 크롬, 파이어 폭스, 마이크로소프트 엣지 등등 큰 회사의 브라우저들은 외부의 스타일시트가 없을 경우 자동으로 적용되는 기본 스타일시트가 있습니다.

 

이 기본 스타일 시트를 유저 에이전트 스타일시트(User Agent Stylesheet)라고 부릅니다.

 

---

 

크롬에서 외부 스타일 시트 없이 웹 페이지를 만들면

• 저는 CSS파일을 연동은 했지만 비워둔채 실행을 했는데요.
• 빨간 네모안을 보면 user agent stylesheet라고 쓰여 있고 margin: 8px;라고 설정이 되어 있습니다.

 

---

 

위와 같이 유저 에이전트 스타일시트가 설정되면 생기는 문제점과 해결방법

웹 페이지를 꾸미는 데 있어서 문제가 생기는데 요소를 배치하는데 내가 원하는 지점보다 더 밑으로 밀린다던지, 당겨진다던지, 겹쳐진다던지 이런 어려움을 겪을 수 있습니다.

 

이럴 때 사용하는 방법은 아주 간단합니다.

* {
  margin: 0;
  padding: 0;
}

• *으로 모든 요소들을 선택하여 설정을 할 준비를 하고
• margin과 padding을 0으로 설정하면 끝입니다.

 

네 끝입니닼

 

---

 

오늘의 느낌

나는 지금 공부를 하고 있는데 밖에 새해라고 소리 지르고 난리가 났다ㅋㅋㅋ 한국에 살 때 사람들이 이렇게 소리 지르는 건 2002년 월드컵밖에 없었음... 신기방기