나의 reset.css
:root {
-webkit-tap-highlight-color: transparent;
/* 링크나 버튼을 터치했을 때 강조 효과를 제거 */
-webkit-text-size-adjust: 100%;
/* 웹킷 브라우저에서 텍스트 크기 조정을 해제 */
text-size-adjust: 100%;
/* 일반 텍스트 크기 조정을 해제 */
cursor: default;
/* 기본 커서 스타일로 설정 */
line-height: 1.5;
/* 줄 간격 설정 */
overflow-wrap: break-word;
/* 긴 단어나 문자열을 줄바꿈으로 처리 */
-moz-tab-size: 4;
/* 모질라 브라우저에서 탭 문자 크기 설정 */
tab-size: 4;
/* 탭 문자 크기 설정 */
}
html {
font-size: 10.5px;
/* HTML 요소의 기본 폰트 크기를 설정 (루트 요소에 영향을 줌) */
line-height: 10.5px;
/* HTML 요소의 기본 줄 간격 설정 */
}
* {
margin: 0;
/* 모든 요소의 마진 초기화 */
padding: 0;
/* 모든 요소의 패딩 초기화 */
font: inherit;
/* 모든 요소의 글꼴을 부모 요소의 글꼴로 상속 */
color: inherit;
/* 모든 요소의 텍스트 색상을 부모 요소의 색상으로 상속 */
}
*, :after, :before {
box-sizing: border-box;
/* 모든 요소의 상자 모델을 변경하지 않도록 설정 */
flex-shrink: 0;
/* 모든 요소의 flex 축소를 비활성화 */
}
html, body {
height: 100%;
/* HTML과 body 요소의 높이를 100%로 설정 */
}
img, picture, video, canvas, svg {
display: block;
/* 이미지 및 다른 미디어 요소를 블록 레벨 요소로 설정 */
max-width: 100%;
/* 이미지 및 미디어 요소의 최대 너비를 100%로 설정 */
}
button {
background: none;
/* 버튼의 배경을 없애고 투명하게 설정 */
border: 0;
/* 버튼의 테두리를 없애고 투명하게 설정 */
cursor: pointer;
/* 버튼 위에 마우스 커서를 포인터로 변경 */
}
a {
text-decoration: none;
/* 링크의 밑줄 스타일을 없앰 */
}
table {
border-collapse: collapse;
/* 테이블의 셀 경계를 붕괴하여 경계를 없앰 */
border-spacing: 0;
/* 테이블의 셀 간의 간격을 없앰 */
}
ul {
list-style: none;
/* 목록 요소의 기본 목록 스타일을 없앰 */
}
fieldset {
border: 0;
/* fieldset의 테두리를 없앰 */
}
input, select, button {
appearance: none;
/* 브라우저별로 랜더링이 다른 스타일링을 빼줌 */
-webkit-appearance: none;
/* 웹킷 브라우저에서 랜더링이 다른 스타일링을 빼줌 */
border: 0;
/* 입력, 선택, 버튼 요소의 테두리를 없앰 */
}
body {
font-size: 1.4rem;
/* 본문 텍스트의 기본 글꼴 크기를 1.4rem으로 설정 */
line-height: 1.7rem;
/* 본문 텍스트의 기본 줄 간격을 1.7rem으로 설정 */
color: #101010;
/* 본문 텍스트의 기본 색상을 설정 */
font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
/* 글꼴 패밀리 설정 */
font-weight: 500;
/* 본문 텍스트의 기본 글꼴 두께 설정 */
letter-spacing: -0.4px;
/* 글자 간격 설정 */
}:root
:root는 CSS의 가상 선택자 중 하나로, HTML 문서의 루트 요소인 <html> 요소를 선택하는데 사용됩니다. 즉, 웹 페이지의 최상위 부분인 <html> 요소를 대상으로 스타일을 적용하려는 경우에 사용됩니다.
:root는 다른 선택자와 다르게 특정 요소를 선택하는 것이 아니라, 전역 스코프에서 변수를 선언하고 스타일을 정의하는데 사용됩니다. 주로 CSS 변수(또는 Custom Properties)를 정의하는데 활용됩니다.
:root와 CSS 변수를 사용하면 웹 페이지에서 일관된 스타일을 유지하고 관리하기 쉽게 만들 수 있으며, 스타일을 한 곳에서 중앙 관리할 수 있습니다.
rem
rem은 CSS(스타일 시트) 단위(unit) 중 하나로, 상대적인 길이 단위입니다. "rem"은 "root em"을 나타내며, HTML 문서의 루트 요소인 <html> 요소의 글꼴 크기(font-size)를 기준으로 상대적인 크기를 나타냅니다.
vw
vw는 CSS(스타일 시트) 단위 중 하나로, 뷰포트 너비(Viewport Width)를 기준으로 하는 상대적인 길이 단위입니다. 뷰포트 너비란 웹 페이지를 표시하는 브라우저 창의 너비를 의미합니다. 브라우저 창의 가로 너비가 100%인 상태를 1vw로 표현할 수 있습니다.
font-family
font-family 속성은 웹 페이지에서 사용할 폰트 패밀리(글꼴 패밀리)를 지정하는 CSS 속성입니다. 이 속성을 사용하여 특정 폰트 패밀리를 웹 페이지의 텍스트에 적용할 수 있습니다. 주어진 코드에서 각 폰트 패밀리가 순서대로 지정되어 있으며, 브라우저는 이 목록을 왼쪽에서 오른쪽으로 순서대로 확인하며 사용 가능한 폰트를 찾습니다.
