여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 색상 테마
w3.css – 색상 테마
2주전 작성
1개월전 수정

 

w3.css

색상 테마

W3.CSS를 사용하면 색상 테마로 애플리케이션을 쉽게 사용자 정의할 수 있다.

영화 2014

  • 겨울 왕국

    애니메이션에 대한 반응은 우스꽝스러웠습니다.

  • 우리 별의 결점

    만지고, 움켜쥐고, 정말 잘 만들어졌습니다.

  • 어벤저스

    마블과 디즈니의 큰 성공


«
»

영화 2014

  • 겨울 왕국

    애니메이션에 대한 반응은 우스꽝스러웠습니다.

  • 우리 별의 결점

    만지고, 움켜쥐고, 정말 잘 만들어졌습니다.

  • 어벤저스

    마블과 디즈니의 큰 성공


«
»

여러분이 해야 할 일은 미리 정의된(또는 직접 만든) 테마에 대한 링크를 추가하는 것뿐이다.

예제
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">
기본 예시
예제 보기

사전 정의된 테마

다음은 W3.CSS에 사전 정의된 테마다.

w3-테마-빨간색 시도 해봐
w3-테마-핑크 시도 해봐
w3-테마-보라색 시도 해봐
w3-테마-딥 퍼플 시도 해봐
w3-테마-인디고 시도 해봐
w3-테마-블루 시도 해봐
w3-테마-밝은 파란색 시도 해봐
w3-테마-시안 시도 해봐
w3-테마-청록색 시도 해봐
w3-테마-녹색 시도 해봐
w3-테마-연두색 시도 해봐
w3-테마-라임 시도 해봐
w3-테마-카키 시도 해봐
w3-테마-노란색 시도 해봐
w3-테마-호박 시도 해봐
w3-테마-오렌지 시도 해봐
w3-테마-딥-오렌지 시도 해봐
w3-테마-블루-그레이 시도 해봐
w3-테마-브라운 시도 해봐
w3-테마-회색 시도 해봐
w3-테마-진한 회색 시도 해봐
w3-테마-블랙 시도 해봐
w3-테마-w3학교 시도 해봐

그라디언트 추가

한 독자가 우리에게 다음과 같은 제안을 보냈습니다. 각 테마에 그라디언트를 추가하는 것이 좋다.

이 그라데이션을 만들기 위해 파란색 테마의 l2 및 l1 색상을 사용했다.

예제
.w3-theme-gradient {
  color: #000 !important;
  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
기본 예시
예제 보기

다운로드 가능한 색상 테마

다음은 Google의 머티리얼 디자인에서 영감을 받은 다운로드 가능한 색상 테마다.

스타일 시트 설명
w3-테마-amber.css 색상 테마 호박색
w3-테마-black.css 색상 테마 블랙
w3-테마-blue.css 색상 테마 블루
w3-테마-블루-그레이.css 색상 테마 블루 그레이
w3-테마-brown.css 색상 테마 브라운
w3-테마-시안.css 색상 테마 청록색
w3-테마-dark-grey.css 색상 테마 다크 그레이
w3-테마-깊은-오렌지.css 색상 테마 딥 오렌지
w3-테마-딥-퍼플.css 색상 테마 딥 퍼플
w3-테마-green.css 색상 테마 녹색
w3-테마-grey.css 색상 테마 그레이
w3-테마-indigo.css 색상 테마 인디고
w3-테마-khaki.css 색상 테마 카키
w3-테마-light-blue.css 색상 테마 라이트 블루
w3-테마-light-green.css 색상 테마 밝은 녹색
w3-테마-lime.css 컬러 테마 라임
w3-테마-orange.css 색상 테마 오렌지
w3-테마-pink.css 색상 테마 핑크
w3-테마-purple.css 색상 테마 보라색
w3-테마-red.css 색상 테마 레드
w3-테마-teal.css 색상 테마 청록색
w3-테마-yellow.css 색상 테마 노란색
참고
Mingg`s Diary
밍구
공부 목적 블로그