본문으로 바로가기

html 글자색 입니다

category HTML 2017. 11. 7. 03:51

html 글자색 입니다

HTML 작업 시 글자 색상을 별도로 작업하는 경우가 있습니다. html에서 전체 글자 색을 변경할 수 도 있으며 일 부분에만 색을 적용할 수도 있기도 하고 특정 태그의 색상을 변경할 수도 있습니다. 예전에는 font color을 사용했지만 요즘엔 span 태그에 스타일을 적용해서 많이 사용합니다. 이번 시간은 htm에서 스타일을 이용한 글자색 변경하는 방법을 알아보겠습니다.  

html 글자색 입니다



간단한 html 을 준비했습니다.  

글자들이 있고 div 태그로 감쌌습니다 

일부 글자에 특정 색을 지정 해보겠습니다.

html 글자색 입니다



미리보기를 하면 아래와 같이 나옵니다

html 글자색 입니다



우선 전체 글자에 파랑색을 적용해보겠습니다. div 태그로 감싸져 있어서 div 태그에 색을 주면 전체에 적용됩니다.

방법은 <head> 태그 사이에 <style> 를 넣고  div 라는 오프젝트에 색을 주는 겁니다.

사용방법은 아래와 같이 하시면 됩니다. 

<head>

          <style>

                    div {

                             color : blue ; 

                         }

          </style>

</head>


실제 태그에 적용해보겠습니다. 

html 글자색 입니다



html 에서 확인해보니 파란색으로 보입니다.

html 글자색 입니다



이번엔 특정 글자 부분에 색을 지정해보겠습니다.

지정하려는 글자에 <span>테그로 묶은 후 스타일을 주면 됩니다.

 <span style ="color:red">

            글자

</span>


실제 적용해보겠습니다.

html 글자색 입니다



적용한 html 코드에서 결과를 보면 아래와 같이 일부 글자에만 지정된 색으로 표시 됩니다. 

html 글자색 입니다



색상코드값으로 많이 사용하는데요 방법은 동일합니다.

<span style="color:#ffff00">글자</span>  

실제 코드에 적용하면 아래와 같이 됩니다.

html 글자색 입니다



적용한 코드의 결과를 보면 특정 부분에 노란색으로 나오는것을 확인할 수 있습니다.

html 글자색 입니다




많이 사용되진 않지만 그래도 간간히 특수 기능으로 사용되는 mark 로 하는 형광펜입니다.

변경하려는 글자에 <mark>태그로 감싸면 됩니다. 

 <mark>글자</mark>


html 글자색 입니다



적용된 결과 입니다. 

이렇게 글자에 색지정하는 방법은 스타일을 통해서 여러가지로 적용할 수 있습니다. 

<font color="red">글자</font> 이렇게 사용도 할 수 있으나 요즘엔 감소 추세 입니다.

태그를 한번 더 감싸야 하고 코드량도 늘어나기 때문에 잘 사용하지 않고 있습니다.   

html 글자색 입니다

이상 html 에서 글자색 지정하는 방법을 알아보았습니다.

반응형