body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body: 이 선택자는 웹 페이지의 전체 내용을 가리킵니다. 즉, 이 코드는 웹 페이지의 전체 내용에 스타일을 적용하려는 것을 의미합니다.

margin: 0;: 이 속성은 본문(body)의 주변 여백을 설정합니다. 여기서 0은 상하좌우 여백이 없음을 나타냅니다.

font-family: 이 속성은 텍스트에 적용될 폰트 패밀리를 지정합니다. 여기서 지정된 폰트 패밀리들은 운영체제 및 브라우저에 내장된 글꼴 중에서 하나를 선택하도록 합니다. 이 리스트에서 글꼴을 찾지 못하는 경우, sans-serif 글꼴을 사용합니다.

-webkit-font-smoothing: antialiased;: 이 속성은 웹킷 기반의 브라우저(예: Chrome, Safari)에서 텍스트의 폰트 경계를 부드럽게 처리하여 안티앨리어싱 효과를 적용합니다. 즉, 텍스트가 더 부드럽게 보이도록 도와줍니다.

-moz-osx-font-smoothing: grayscale;: 이 속성은 모질라 파이어폭스 브라우저에서 텍스트를 부드럽게 처리하는 방법을 지정합니다. 여기서는 회색조로 처리하는 것을 나타냅니다.

Font fmaily

-apple-system: 이 폰트 패밀리는 애플 운영체제(macOS, iOS)에서 사용되는 시스템 글꼴을 의미합니다. 만약 해당 운영체제에서 이 폰트가 사용 가능하다면, 이것을 사용합니다.

BlinkMacSystemFont: 이 역시도 macOS 및 iOS에서 사용되는 시스템 글꼴 중 하나를 지칭합니다. -apple-system이 사용 불가능한 경우 이 폰트를 사용하려고 합니다.

'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue': 위에서부터 순차적으로 각각의 폰트 패밀리들을 나타냅니다. 이 폰트 패밀리들도 차례대로 사용 가능한지 확인한 후, 사용 가능한 폰트를 찾을 때까지 순차적으로 시도합니다.

sans-serif: 위의 모든 폰트 패밀리들이 사용 불가능한 경우에는 마지막으로 브라우저의 기본 sans-serif 글꼴을 사용합니다. 이는 일종의 보편적인 기본 글꼴입니다.

코드예시
font-family: 'Arial', sans-serif;
여기서는 먼저 'Arial' 글꼴 패밀리를 찾습니다. 만약 시스템에 Arial 글꼴이 없다면, 브라우저는 제네릭 글꼴 패밀리 중 sans-serif를 사용합니다.

제너릭 글꼴이란

제네릭(Generic) 글꼴은 실제로 특정한 글꼴 패밀리의 이름을 지정하지 않고도 일반적인 글꼴 유형을 나타내는 키워드입니다. 이러한 키워드를 사용하면 브라우저는 시스템에서 사용 가능한 해당 유형의 기본 글꼴을 선택하여 텍스트를 렌더링합니다. 제네릭 글꼴은 어떤 종류의 스타일을 나타내는데 도움이 되며, 특히 특정 글꼴이 사용 불가능한 경우에 대비하여 백업 옵션을 제공하는 데 사용됩니다.

주요 제네릭 글꼴 유형은 다음과 같습니다:

serif: 보통 기본적으로 조판을 위해 사용되는 시리프(serif) 글꼴 패밀리를 나타냅니다. 시리프 글꼴은 글자 끝에 작은 "꼬리"를 가지는 글꼴로, 예를 들면 Times New Roman과 같은 글꼴이 있습니다.

sans-serif: 시리프가 없는 글꼴을 나타내며, 간단하고 깔끔한 디자인을 가지고 있습니다. 대표적인 예로 Arial, Helvetica 등이 있습니다.

monospace: 모노스페이스(monospace) 글꼴은 각 문자가 동일한 너비를 가지는 고정폭 글꼴로, 코드나 프로그래밍 문서에서 주로 사용됩니다. Courier New가 대표적인 예입니다.

cursive: 필기체나 손글씨체와 유사한 스타일의 글꼴을 나타냅니다. 주로 미적인 디자인 요소로 사용되며, 구체적인 글꼴 이름이 아닌 일반적인 스타일을 지칭합니다.

fantasy: 장식적이거나 독특한 디자인을 가진 글꼴을 나타냅니다. 주로 특수한 느낌을 전달하기 위해 사용되며, 특정 글꼴 패밀리보다는 스타일을 강조합니다.