스타일 초기화

스타일 초기화를 위한 간단한 reset.css 와 normalize.css

---

1. reset.css

• 완전히 리셋(초기화) 하는 스타일.
• 모든 브라우저의 기본 스타일(여백, 크기, 폰트 등)을 없애버려서 완전히 깨끗한 상태.

예: 자주 초기화되는 것들

/* 모든 여백 제거 */
body, h1, h2, h3, p, ul, ol {
  margin: 0;
  padding: 0;
}

/* 리스트 점 없애기 */
ul, ol {
  list-style: none;
}

/* 박스 크기 초기화 */
* {
  box-sizing: border-box;
}

쉽게 말해: "브라우저 기본 스타일 다 지우고, 내가 스타일을 처음부터 다 정리할게!"라는 느낌이야.

---

2. normalize.css

• 리셋하지 않고, 조정하는 스타일.
• 브라우저마다 기본 스타일이 다르니까, 비슷하게 맞추기 위해 조정만.

예: 자주 조정되는 것들

/* HTML5 요소 스타일 정리 */
article, aside, footer, header, nav, section {
  display: block;
}

/* 폰트 상속 문제 해결 */
button, input {
  font: inherit;
}

/* 테이블 테두리 조정 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

쉽게 말해: "브라우저 기본 스타일을 완전히 없애지는 않고, 조정해서 보기 좋게 만들자!"라는 느낌이야.

---

차이점

reset.css	normalize.css
모든 스타일을 다 없앰	스타일을 조정하고 통일
초기화 후, 스타일을 처음부터 정해야 함	기본 스타일을 보존하면서 수정
강력하고 깔끔하게 초기화됨	더 자연스럽고 부드러운 결과

table에 관한 코드가 reset.css와 normalize.css 둘 다에 해당할 수 있느냐를 따져보면, 상황에 따라 다르다고 할 수 있다.

1. reset.css의 경우

reset.css는 기본적으로 스타일을 전부 제거하거나 0으로 초기화하는 데 집중해.
따라서 border-collapse: collapse;와 border-spacing: 0; 같은 코드는 기본 브라우저 스타일을 없애는 역할로 볼 수 있어.
즉, reset.css에서 충분히 등장할 수 있는 코드야.

2. normalize.css의 경우

normalize.css는 브라우저마다 다른 기본 스타일을 통일하는 데 집중해.

• 테이블의 border-collapse와 border-spacing은 일부 브라우저에서 기본값이 다를 수 있기 때문에, normalize.css에서도 등장할 가능성이 있어.
  다만, normalize.css에서는 테이블의 기본 스타일을 완전히 초기화하기보다는 적당한 초기값으로 조정하는 방향으로 다룬다고 보면 돼.

---

결론

table { border-collapse: collapse; border-spacing: 0; }는 reset.css와 normalize.css 둘 다에서 등장할 수 있는 코드야.

• reset.css: 테이블 스타일을 완전히 제거하는 목적.
• normalize.css: 브라우저 간 차이를 줄이고, 기본값을 통일하기 위한 목적.

언제 어떤 걸 쓰지?

• reset.css: 완전히 깨끗한 상태에서 시작하고 싶을 때.
• normalize.css: 기본 스타일을 살리면서 편하게 작업하고 싶을 때.

---

자주 쓰이는 코드 설명

1. html, body

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

• 기본 여백 제거: 브라우저는 body나 html에 기본적으로 여백(margin)과 안쪽 여백(padding)을 추가하는데, 이걸 없애서 레이아웃을 깔끔하게 만들어.
• 테두리 제거: 기본적으로 붙는 테두리(border)도 없앰.

---

2. ol, ul

ol, ul {
  list-style: none;
}

• 리스트 스타일 초기화: 브라우저는 ul(순서 없는 리스트)과 ol(순서 있는 리스트)에 점이나 숫자 같은 리스트 스타일을 붙여. 이걸 없애서 깔끔한 리스트를 만들도록 초기화한 거야.

---

3. table

table {
  border-collapse: collapse;
  border-spacing: 0;
}

• 테이블 간격 없애기:
  • border-collapse: collapse;: 테이블 셀(border) 사이의 간격을 없앰.
  • border-spacing: 0;: 셀 사이의 간격을 0으로 설정.
• 테이블이 붙어 있는 깔끔한 스타일을 만들 때 필요해.

---

reset.css랑 normalize.css는 스타일 초기화를 위한 CSS 파일인데, 웹 브라우저마다 기본 스타일이 다르기 때문에, 모두 비슷하게 보이도록 만들어주는 역할을 해.

---

참고 😊

• 이 초기화 스타일은 필수는 아니지만 많은 개발자들이 레이아웃 작업 전에 사용하는 기본 템플릿이야.
• 프로젝트의 성격에 맞게 필요한 태그를 추가하거나, 불필요한 부분은 빼려무나.