Reset

Reset

Fomantic UI의 Reset은 모든 컴포넌트가 일관된 기준선에서 시작하도록 HTML 기본 스타일을 초기화하는 기반 작업이에요. 이 페이지에서는 기본 테마가 어떤 초기화를 포함하는지, 그리고 필요에 따라 어떤 옵션을 고를 수 있는지 살펴볼게요.

출처: Reset

본문

리셋에는 무엇이 들어있나요?

Fomantic의 기본 테마는 최신 Normalize CSS를 포함해 HTML 리셋의 기준선을 제공해요. 여기에 Fomantic UI는 요소들이 너비 정의를 동일한 방식으로 처리하도록 Box-sizing 리셋도 요구해요.

리셋은 Fomantic UI 컴포넌트가 제대로 동작하기 위해 필수이며, 개별 컴포넌트만 사용할 때도 반드시 포함해야 해요.

리셋 옵션

기본 테마에는 필요한 box-sizing 리셋만 포함되고 그 외에는 아무것도 없어요. 반면 resetcss 테마는 좀 더 의견이 덜 들어간 CSS 리셋인 Reset CSS 버전을 제공해요.

리셋 테스트

html

sans-serif 폰트 패밀리를 가져야 해요 (의견 반영)

abcdefghijklmnopqrstuvwxyz

body

margin이 없어야 해요 (의견 반영)

(이 페이지에는 빨간 배경이 보이면 안 됩니다)

article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary

block으로 렌더링되어야 해요

article
aside

  summary
  details


    figure
    figcaption

더 알아보기

Reset은 컴포넌트 시작 전에 반드시 포함해야 하는 기반 계층이에요. 다음 단계로는 전역 변수와 페이지 스타일을 정의하는 Site 문서를 함께 살펴보면 좋아요.