스타일 블록에서 main과 h1의 스타일을 정의했습니다. 이 main, h1 클래스는 현재 컴포넌트의 인스턴스에만 적용되어 다른 컴포넌트나 상위 컴포넌트와는 독립적입니다.

크롬 브라우저의 개발자 도구를 열어 상단에 Elements를 선택한 뒤에 main과 h1를 찾아보았습니다. 크롬 개발자 도구 단축키는 F12(macOS는 옵션 + 커맨드 +  i )입니다.

▲ 그림 3-3 해시 형태의 class 이름

그림처럼 class는 svelte-XXXXXX 형태입니다. 빌드 시 스벨트가 다른 CSS 클래스명과 중복되지 않는 임의의 해시 형태로 정의하기 때문에 다른 컴포넌트에는 영향을 주지 않고 스타일이 적용됩니다.