CSS 참조

CSS 참조 CSS 브라우저 지원 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 폴백 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 엔터티

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens image-rendering @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top mask-image mask-mode mask-origin mask-position mask-repeat mask-size max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-wrap overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right row-gap scroll-behavior tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode z-index



CSS 웹 안전 글꼴


HTML 및 CSS를 위한 최고의 웹 안전 글꼴

다음 글꼴은 HTML 및 CSS에 가장 적합한 웹 안전 글꼴입니다.

  • Arial(산세리프체)
  • 베르다나(산세리프체)
  • 헬베티카(산세리프체)
  • 타호마(산세리프체)
  • 트레뷰셋 MS(산세리프)
  • 타임즈 뉴 로만(세리프)
  • 조지아(세리프)
  • 가라몬드(세리프)
  • Courier New(모노스페이스)
  • 브러시 스크립트 MT(필체)

참고: 웹사이트를 게시하기 전에 항상 다른 브라우저와 장치에서 글꼴이 어떻게 나타나는지 확인하고 항상 대체 글꼴 을 사용 하십시오!


Arial(산세리프체)

Arial은 온라인 및 인쇄 매체 모두에서 가장 널리 사용되는 글꼴입니다. Arial은 Google 문서도구의 기본 글꼴이기도 합니다.

Arial은 가장 안전한 웹 글꼴 중 하나이며 모든 주요 운영 체제에서 사용할 수 있습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


베르다나(산세리프체)

Verdana는 매우 인기 있는 글꼴입니다. Verdana는 작은 글꼴 크기에서도 쉽게 읽을 수 있습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


헬베티카(산세리프체)

Helvetica 글꼴은 디자이너들에게 사랑받고 있습니다. 많은 유형의 비즈니스에 적합합니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


타호마(산세리프체)

Tahoma 글꼴은 문자 사이의 간격이 적습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


트레뷰셋 MS(산세리프)

Trebuchet MS는 1996년에 Microsoft에서 설계했습니다. 이 글꼴을 주의해서 사용하십시오. 일부 모바일 운영 체제에서는 지원되지 않습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9



타임즈 뉴 로만(세리프)

Times New Roman은 세계에서 가장 잘 알려진 글꼴 중 하나입니다. 그것은 전문적으로 보이며 많은 신문과 "뉴스" 웹사이트에서 사용됩니다. Windows 장치 및 응용 프로그램의 기본 글꼴이기도 합니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


조지아(세리프)

조지아는 우아한 세리프 글꼴입니다. 다양한 글꼴 크기에서 매우 가독성이 높기 때문에 모바일 반응형 디자인에 적합한 후보입니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


가라몬드(세리프)

Garamond는 많은 인쇄된 책에 사용되는 고전적인 글꼴입니다. 그것은 시대를 초월한 모양과 좋은 가독성을 가지고 있습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Courier New(모노스페이스)

Courier New는 가장 널리 사용되는 고정 폭 세리프 글꼴입니다. Courier New는 디스플레이 코딩과 함께 자주 사용되며 많은 이메일 제공업체에서 기본 글꼴로 사용합니다. Courier New는 영화 시나리오의 표준 글꼴이기도 합니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


브러시 스크립트 MT(필체)

Brush Script MT 글꼴은 필기를 모방하도록 설계되었습니다. 우아하고 정교하지만 읽기 어려울 수 있습니다. 주의해서 사용하십시오.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

팁: 사용 가능한 모든 Google 글꼴 과 사용 방법도 확인하세요.