좋은 활판 인쇄 디자인은 성공적인 웹 사이트의 중요한 부분입니다. CSS를 사용하면 웹 페이지의 텍스트 모양을 효과적으로 제어 할 수 있습니다. 여기에는 사용하는 글꼴의 색상을 변경하는 기능이 포함됩니다.
글꼴 색상은 외부 스타일 시트 또는 내부 스타일 시트를 사용하여 변경하거나 HTML 문서에서 인라인 스타일을 사용하여 변경할 수 있습니다. 모범 사례는 CSS 스타일에 외부 스타일 시트를 사용해야한다고 규정하고 있습니다. 문서의 "머리 부분"에 직접 작성된 스타일 인 내부 스타일 시트는 일반적으로 작은 한 페이지짜리 사이트에만 사용됩니다. 인라인 스타일은 수년 전에 처리했던 예전 '글꼴'태그와 비슷하므로 피해야합니다. 이러한 인라인 스타일은 인라인 스타일의 모든 인스턴스에서 글꼴 스타일을 변경해야하므로 글꼴 스타일을 관리하기가 매우 어렵습니다.
이 기사에서는 외부 스타일 시트와 단락 태그에 사용되는 스타일을 사용하여 글꼴 색상을 변경하는 방법을 학습합니다.
태그를 포함하여 텍스트를 둘러싼 모든 태그의 글꼴 색상을 변경하는 데 동일한 스타일 속성을 적용 할 수 있습니다.스타일을 추가하여 글꼴 색 변경
이 예제의 경우 페이지 마크 업용 HTML 문서와 해당 문서에 첨부 된 별도의 CSS 파일이 있어야합니다. HTML 문서는 그 안에 많은 요소를 만들 것입니다. 이 글의 목적을 위해 우리가 염려하는 것은 단락 요소이다.
다음은 외부 스타일 시트를 사용하여 단락 태그 내에서 텍스트의 글꼴 색상을 변경하는 방법입니다.
색상 값은 색상 키워드, RGB 색상 번호 또는 16 진수 색상 번호로 표현할 수 있습니다.
- 단락 태그에 style 속성을 추가하십시오.
- p {}
- 스타일에 color 속성을 배치합니다. 해당 속성 뒤에 콜론을 추가하십시오.
- p {color :}
- 그런 다음 속성 뒤에 색상 값을 추가하십시오. 그 값을 세미콜론으로 끝내십시오 :
- p {color : black;}
이제 페이지의 단락이 검은 색이됩니다.
이 예제에서는 "black"이라는 컬러 키워드를 사용합니다. 그것은 CSS에서 색상을 추가하는 한 가지 방법이지만 매우 제한적입니다. "검은 색"과 "흰색"에 키워드를 사용하는 것은 그 두 가지 색상이 매우 구체적이기 때문에 간단하지만 "빨강", "파랑"또는 "녹색"과 같은 키워드를 사용하면 어떻게됩니까? 적색, 청색 또는 녹색의 그늘은 정확히 무엇입니까? 키워드로 원하는 색조를 정확하게 지정할 수 없습니다. 이것이 색상 키워드 대신 16 진수 값이 사용되는 이유입니다.
p {color : # 000000; }
# 000000의 16 진수 코드가 검은 색으로 변환되기 때문에이 CSS 스타일은 단락의 색상을 검은 색으로 설정합니다. 그 16 진수 값으로 축약어를 사용하고 # 000으로 쓰면 똑같은 결과를 얻을 수 있습니다.
앞서 언급했듯이 단순히 검정색이나 흰색이 아닌 색상이 필요할 때 16 진수 값이 잘 작동합니다. 다음은 그 예입니다.
p {color : # 2f5687; }
이 16 진수 값은 단락을 파란색으로 설정하지만 키워드 "파란색"과 달리이 16 진수 코드는 매우 구체적인 음영을 설정할 수 있습니다. 디자이너가 인터페이스를 만들 때 디자이너가 선택할 가능성이 높습니다. 이 웹 사이트. 이 경우 색상은 중간 범위의 슬레이트와 같은 파란색입니다.
마지막으로 RGBA 색상 값을 글꼴 색상으로 사용할 수도 있습니다. RGCA는 모든 최신 브라우저에서 지원되므로 웹 브라우저에서 지원되지 않을 것이라는 걱정없이이 값을 사용할 수 있지만 쉽게 폴백을 설정할 수도 있습니다.
p {color : rgba (47,86,135,1); }
이 RGBA 값은 앞에서 지정한 슬레이트 파란 색과 동일합니다. 처음 세 값은 빨강, 녹색 및 파랑 값을 설정하고 마지막 숫자는 알파 설정입니다. "1"로 설정되어 "100 %"를 의미하므로이 색상은 투명하지 않습니다. 이것을 .85와 같은 십진수로 설정하면 85 % 불투명도로 변환되고 색상은 약간 투명 해집니다.
색상 값을 지정하려면 다음과 같이하십시오.
p {
color : # 2f5687;
color : rgba (47,86,135,1);
}
이 구문은 16 진 코드를 먼저 설정합니다. 그런 다음 해당 값을 RGBA 번호로 덮어 씁니다. 즉, RGBA를 지원하지 않는 이전 브라우저는 첫 번째 값을 가져오고 두 번째 값은 무시합니다. 최신 브라우저는 CSS 캐스케이드 당 두 번째 브라우저를 사용합니다.