전자책(epub)제작을 위한 css - 글자색 color

epub전자책 제작을 위한 css실습입니다. 글자색 설정 color에 대해 알아보겠습니다. 

 

글자색 속성

글자색을 바꿔주는 css속성은  color 입니다. 

 

글자색 속성값

속성값은 색의 영문명을 쓰거나 html색상코드값을 넣으면 됩니다. 

영문명은 red, blue, yellow 이런 식으로 색의 이름을 적으면 됩니다. 

html색상값은 #FFE400, #0100FF 이런 식으로 넣으면 됩니다. 

 

html색상코드값을 찾는 가장 간단한 방법은 네이버의 "색상팔레트"를 이용하는 것입니다. 

1. 네이버에서 "색상팔레트"라고 검색합니다. 

2. 원하는 색을 선택합니다. 

3. 상단의 html 색상 코드값을 복사합니다. 

 

글자색 css, html 연습

css에 아래와 같이 스타일을 만듭니다. 

 

.c1{

color: red;}

 

html에는 아래와 같이 적용합니다. 

<p class="c1">글자색이 빨간색</p>

 

글자색 예제

첫번째 문장은 빨간색, 두번째 문장은 옅은 빨강정도로 적용되게 시길(Sigil)에서 만들어 보겠습니다. 

 

스타일 적용전의 미리보기입니다. 

 

시길(Sigil)의 css에서 

 

.c1{color: red;}

.c2{color: #F15F5F;}

이렇게 입력합니다. 속성값으로 c1에는 빨간색-red를 c2에는 옅은 빨강-#F15F5F으로 네이버 색상팔레트를 이용해 코드를 붙여넣기 합니다. 

 

css에 만든 두개의 스타일을 각각 html 본문 p태그에 적용합니다. 

 

<p class="c1">첫번째 문장은 빨간색</p>

<p class="c2">두번째 문장은 옅은 빨간색</p>

 

스타일을 적용하면 위와 같이 각각 색이 표현됩니다.