DAY31, 32 - 페이지 만들기 코드 복습 - reset.css

reset.css

@charset "UTF-8";

/* reset css */
html, body {
   width: 100%;
   height: 100%;
}
html {
   overflow-y: scroll;
}
body, div, dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6, form, fieldset, p, button {
   margin: 0;
   padding: 0;
}
body, h1,h2,h3,h4, input, textarea, button, select, option {
   font-family: '돋움', dotum, Helvetica, sans-serif; 
   font-size: 12px;
   color: #444;
}
img, fieldset {
   border: 0;
}
li {
   list-style: none;
}
input, select, button {
   vertical-align: middle;
}
img {
   vertical-align: top;
}
em, address {
   font-style: normal;
}
a {
   color: #666;
   text-decoration: none;
}
a:hover, a:focus {
   color: #222;
   text-decoration: underline;
}
table {
   border-collapse: collapse; /* 이중테두리 없애기  */
}

---

1. @charset "UTF-8";

@charset "UTF-8";

• 이 줄은 CSS 파일의 문자 인코딩을 UTF-8로 설정한다. UTF-8은 대부분의 언어를 지원하며, 한글 등 다양한 문자 집합을 표현할 수 있다.

---

2. Reset CSS

html, body {
   width: 100%;
   height: 100%;
}

• html과 body 요소의 너비와 높이를 각각 100%로 설정한다. 이는 웹 페이지가 전체 화면을 차지하도록 보장한다.

---

html {
   overflow-y: scroll;
}

• html 요소에 수직 스크롤바(overflow-y)를 항상 표시되도록 한다. 콘텐츠가 화면 크기보다 짧을 경우 스크롤바가 보이지 않아 페이지가 약간 이동하는 현상을 방지한다.

---

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, p, button {
   margin: 0;
   padding: 0;
}

• 여러 HTML 요소(body, div, dl, ul, h1~h6 등)에 기본적으로 설정된 여백(margin)과 패딩(padding)을 제거한다. 이를 통해 요소들이 기본 스타일 없이 화면에 그려지게 된다.

---

body, h1, h2, h3, h4, input, textarea, button, select, option {
   font-family: '돋움', dotum, Helvetica, sans-serif; 
   font-size: 12px;
   color: #444;
}

• font-family: dotum, Helvetica, sans-serif 폰트로 설정한다.
• font-size: 기본 폰트 크기를 12px로 설정한다.
• color: 텍스트 색상을 #444(어두운 회색)로 설정한다.

---

img, fieldset {
   border: 0;
}

• 이미지(img)와 필드셋(fieldset) 요소의 테두리(border)를 제거한다. 기본적으로 브라우저가 제공하는 테두리 스타일을 없애기 위해 사용한다.

---

li {
   list-style: none;
}

• 목록 아이템(li)의 기본 목록 스타일(예: 불릿 포인트)을 제거한다.

---

input, select, button {
   vertical-align: middle;
}

• 수직 정렬을 middle로 설정하여, 다른 인라인 요소들과 중앙에 정렬되도록 한다.

---

img {
   vertical-align: top;
}

• 이미지(img)의 수직 정렬을 top으로 설정한다. 다른 요소들과 정렬할 때 이미지의 상단이 맞춰지도록 한다.

---

em, address {
   font-style: normal;
}

• 강조 태그(em)와 주소 태그(address)의 기본 기울임꼴(italic) 스타일을 제거하여 일반 텍스트처럼 보이도록 설정한다.

---

a {
   color: #666;
   text-decoration: none;
}

 

• color: 링크의 텍스트 색상을 #666(회색)으로 설정한다.
• text-decoration: 링크에 밑줄을 제거한다.

---

a:hover, a:focus {
   color: #222;
   text-decoration: underline;
}

 

 

링크에 마우스를 올리거나(hover) 키보드로 포커스(focus)했을 때의 스타일을 정의한다.

• color: 링크의 텍스트 색상을 #222(짙은 회색)로 설정한다.
• text-decoration: 링크에 밑줄을 추가하여 시각적인 변화를 준다.

---

table {
   border-collapse: collapse; /* 이중테두리 없애기  */
}

• 테이블의 테두리 스타일을 설정한다. border-collapse: collapse;는 테두리를 하나로 합쳐 이중 테두리가 나타나지 않도록 한다.