CSS를 사용하면 문서의 텍스트 색상을 쉽게 설정할 수 있습니다. 페이지의 단락을 특정 색상으로 렌더링하려면 외부 스타일 시트에 단락을 지정하면 브라우저가 선택한 색상으로 텍스트를 표시합니다. 텍스트 단락에서 단 한 단어 (또는 단지 몇 단어)의 색상을 변경하려는 경우에는 어떻게됩니까? 이를 위해서는 태그와 같은 인라인 요소를 사용해야합니다.
궁극적으로 문장 내에서 단일 단어 나 작은 단어 그룹의 색상을 변경하는 것은 CSS를 사용하는 것이 쉽고 태그 는 유효한 HTML이기 때문에 일종의 해킹이되는 것에 대해 걱정하지 마십시오. 이 접근 방식을 사용하면 폐기 된 태그와 HTML의 과거 시대의 산물 인 "font"와 같은 속성을 사용하지 않아도됩니다.
이 기사는 HTML 및 CSS에 익숙하지 않은 초기 웹 개발자를위한 것입니다. HTML 태그와 CSS를 사용하여 페이지의 특정 텍스트 색상을 변경하는 방법을 배우는 데 도움이됩니다. 즉,이 방법에는 몇 가지 단점이 있으며,이 기사의 끝 부분에서 설명하겠다. 지금 당장이 텍스트 색상을 변경하는 단계를 읽어보십시오! 그것은 매우 쉽고 약 2 분이 걸릴 것입니다.
단계별 지침
- 좋아하는 텍스트 HTML 편집기에서 업데이트 할 웹 페이지를 엽니 다. Adobe Dreamweaver 와 같은 프로그램이거나 메모장, 메모장 ++, 텍스트 편집기 등의 텍스트 편집기 일 수 있습니다.
- 문서에서 페이지의 다른 색으로 표시 할 단어를 찾습니다. 이 자습서에서는 텍스트의 큰 단락 내에있는 단어를 사용할 수 있습니다. 해당 텍스트는 thetag 쌍에 포함됩니다. 색상을 편집하려는 두 단어 중 하나를 찾습니다.
- 색상을 변경하려는 단어 또는 단어 그룹의 첫 번째 문자 앞에 커서를 놓습니다. Dreamweaver와 같은 WYSIWYG 편집기를 사용하는 경우 "코드 뷰"도구로 작업하고 있음을 기억하십시오.
- 클래스 속성을 포함하여 변경하려는 색상의 텍스트를 태그로 둘러 쌉니다. 전체 단락은 다음과 같이 보일 수 있습니다 : 이것은 문장에서 집중되는 텍스트입니다.
- 우리는 인라인 요소 인 the를 사용하여 특정 텍스트에 CSS에서 사용할 수있는 "후크"를 제공했습니다. 다음 단계는 외부 CSS 파일로 이동하여 새 규칙을 추가하는 것입니다.
- CSS 파일에서 다음을 추가해 보겠습니다.
- .focus-text {
- color : # F00;
- }
- 이 규칙은 인라인 요소 인을 빨간색으로 표시하도록 설정합니다. 문서의 텍스트를 검정색으로 설정 한 이전 스타일이있는 경우이 인라인 스타일로 인해 스팬 텍스트가 집중되고 다른 색상으로 눈에 띄게됩니다. 이 규칙에 다른 스타일을 추가 할 수도 있습니다. 텍스트를 이탤릭체로하거나 굵은 글씨로 강조하여 더욱 강조 할 수 있습니다.
- 귀하의 페이지를 저장하십시오.
- 즐겨 사용하는 웹 브라우저에서 페이지 를 테스트하여 변경 사항을 확인하십시오.
- 일부 웹 전문가는 또는 태그 쌍과 같은 다른 요소를 사용하기로 선택합니다. 이 태그는 "굵게"와 "기울임 꼴"로 사용되었지만 더 이상 사용되지 않고 및로 대체되었습니다. 태그는 여전히 최신 브라우저에서 작동하지만 많은 웹 개발자가 인라인 스타일링 후크로 사용합니다. 이것은 최악의 접근법은 아니지만, 더 이상 사용되지 않는 요소를 피하려면이 유형의 스타일링 요구 사항에 태그를 사용하는 것이 좋습니다.
조심할 팁과주의 사항
이 방식은 작은 스타일링 요구 사항에 적합하지만 문서에서 하나의 작은 텍스트를 변경해야하는 경우처럼 빠르게 제어 할 수 없습니다. 페이지가 인라인 요소로 흩어져있는 것을 발견하면 CSS 파일에서 사용하는 고유 한 클래스가 모두 있습니다. 잘못된 것일 수도 있습니다. 페이지에있는 태그가 많을수록 해당 페이지를 계속 유지하는 것일 수 있습니다. 또한, 좋은 웹 타이포그래피는 거의 모든 종류의 색상 등을 페이지 전체에 걸쳐 가지고 있습니다!