여기서 뒤쪽이 w3css에서 디폴트로 지정한 색상이야.
그러므로 #f44336 를 여러분이 선호하는 색상번호로 바꾸고 저장하면, 앞으로 w3-red 라는 클래스를 사용하면 새로 변경한 색상으로 보이겠지?
그런데 이 방법도 좋은 방법은 아니야.
왜냐하면 (1) 내가 만드는 사이트 마다 '빨간색'의 색감을 조금씩 다를게 할 필요도 있어.
그때 마다 w3.css를 변경해서 사이트 마다 다른 w3.css 파일을 사용하면 나중에 상당히 헷갈려.
(2) 만일 w3css 에서 다음 버전이 나왔다고 생각해봐.
그러면 w3school 에서 제공하는 w3.css 가 변경될텐데 만일 새 버전을 사용하고 싶으면 새 w3.css 를 받아서 그 자리들을 또 일일이 수정해야 돼.
그럼 좋은 방법이 없을까?? 당연히 있지..
3. 내 스타일의 css 파일 추가
가장 완벽한 방법은 나의 스타일 파일을 하나 추가하는 거야.
예를들어 기존 w3.css 파일 선언 바로 아래줄에 다음과 같이 내 스타일 파일을 하나 만드는 것이지.
그리고 w3.css 파일에서 변경하고자 하는 색상 클래스들을 복사해서 my.css 에 넣고 색상번호를 바꾸는 거야.
브라우저는 여러분의 홈페이지를 로드하면서 먼저 윗줄의 w3.css 를 읽고 w3-red 의 색상을 F44336 로 기억했다 다음 줄의 my.css 에서 다시 w3-red의 색상이 FF0000 로 지정되어 있으면 이것을 바꾸어서 기억해.
이렇게 하면 기존 w3.css를 전혀 건드리지 않고 클래스 이름에 따른 색상을 내가 원하는 대로 변경할 수 있어.
4. w3 의 색상템플릿 이용
미술을 전공했던 분들이라면 잘 알겠지만 색상에는 서로 궁합이 잘 맞는 조합이 있어.
w3schools 에는 이렇게 어율리는 색상들을 테마라는 이름으로 제공하고 있으니 홈페이지의 색상선택에 고민이 많다면 이것을 사용해 보는 것도 좋은 선택이야.
w3schools 에 들어가서 [W3.CSS Color] 라는 섹션에 가 보면 Material, Flat, Metro, Win8, iOS, Fashion.. 등 여러분 홈페이지의 내용과 성격에 따라 어울리는 색상들을 다양하게 제시하고 있어.
이 중 마음에 드는게 있으면 다운 받아서 위에서 내 스타일에 추가하면 바로 멋진 색상 조합을 사용할 수 있어.
5. w3css pro 사용
고급 디자이너들은 자신만의 색상조합 라이브러리를 가지고 있는 경우도 많아.
즉 각 색상에 대해 클래스명과 코드 조합을 별도의 css 파일에 만들어서 사용하는 거지.
이런 분들이라면 w3pro.css 를 사용할 수도 있어.
이 w3pro.css 는 기본 w3.css 에서 색상과 관련된 클래스는 다 빠진 버전이야.
쓰지도 않는 클래스 괜히 가지고 있을 필요가 없잖아. 당연히 더 작고 더 빠르겠지?
이 w3pro.css 는 아래 링크에서 복사해 오거나 링크를 CDN 으로 연결해서 쓰면 되겠지?