html 글자색 지정하기 css 스타일 color 사용 using html font style

html 에서 글자색을 지정하기 사용되는 스타일은 color 속성이다. color 속성에 색상코드 또는 색상명을 입력해주면 글자색이 변하게 된다. 글자색을 적용할 태그에 style 요소의 color 속성을 지정하면 되며, 어떤 태그에 넣든 글자색은 변경된다.

html 글자색 지정하기 css 스타일 color 사용
using html font style

html의 css 스타일을 이용하면 글자색 또한 변경할 수 있다.

글자색을 변경하면 가독성을 높일 수 있고 보는 사람으로 하여금 흥미를 일으킬 수도 있다.

특정한 제목으로 이끌기 위한 용도로도 사용되면 전체적인 문서의 흐름을 유도할 수도 있다.

적절한 배경색과 함께 사용하면 그 효과는 커진다.

배경색을 지정하는 방법은 이전에 작성한 내용을 참고해 본다.

html 배경색 지정하기 css 스타일 background-color 사용 using html style

html 태그의 배경색을 지정하기 위해 background-color 속성을 사용한다. 이것은 html 의 css style 이기도 하다. background-color 속성에 색상코드를 넣으면 바로 적용이 되는데 이런 배경색에 익숙해지면 별

lngnat.tistory.com

글자색 지정하기

글자색을 지정하기 위해 사용하는 스타일 속성은 color 이다.
이 속성에 색상명 또는 색상코드를 넣어주면 html 태그에 있는 문자들에 색상이 지정된다.

색상에 대한 종류는 색상코드를 검색하면 된다.

사용법은 다음과 같다.

<태그명 style="color: 색상;"></태그명>

html 예제

위의 방법으로 글자에 색상을 넣어보도록 한다.

기본적으로 많이 사용되는 방법은 문단 태그를 이용해 글자색을 지정하는 방법이다.

문단태그는 p 태그에 style 속성의 color 요소를 추가하면 되는 것이다.

코드를 보자.

8가지의 색상을 문단태그에 적용해 본 것이다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>

	<!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <!-- 제목입니다 -->
            <h2>
                html 글자색<br/>
                color: 색상코드
            </h2>
            <!-- // -->
            <!-- 문서 내용 -->
            <p style="color:Tomato;">
                글자색을 Tomato로 설정
            </p>
            <p style="color:Orange;">
                글자색을 Orange로 설정
            </p>
            <p style="color:DodgerBlue;">
                글자색을 DodgerBlue로 설정
            </p>
            <p style="color:MediumSeaGreen;">
                글자색을 MediumSeaGreen로 설정
            </p>
            <p style="color:Gray;">
                글자색을 Gray로 설정
            </p>
            <p style="color:SlateBlue;">
                글자색을 SlateBlue로 설정
            </p>
            <p style="color:Violet;">
                글자색을 Violet로 설정
            </p>
            <p style="color:LightGray;">
                글자색을 LightGray로 설정
            </p>
            <!-- // -->
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

색상코드 보다는 글자색을 변경하기 위해 p 태그에 어떻게 style 이 지정되었는지 살펴본다.

결과화면을 보자.

글자색이 8가지로 적용되어 잘 나오고 있다.

'programming > web' 카테고리의 다른 글

html 색을 지정하는 방법 rgb hex hsl 차이 (0)	2022.04.01
html 테두리색 지정하기 css 스타일 color 사용 using html border style (0)	2022.03.30
html 배경색 지정하기 css 스타일 background-color 사용 using html style (0)	2022.03.24
html 주석 사용하기 using html comment (0)	2022.03.21
html 인용구 태그 종류와 사용 qutation and citation tag (0)	2022.03.19