전자책(epub)제작을 위한 css - 배경색 background

epub전자책 제작을 위한 css실습입니다. 배경색을 바꿔주는 background에 대해 알아보겠습니다. 

 

1. 배경색 속성 background

배경색을 바꿔주는 css속성은 background 입니다. 

 

2. 배경색 속성값

속성값은 색의 영문명이나 색의 HTML코드값을 씁니다.

색의 HTML코드값을 확인하는 가장 간단한 방법은 네이버에서 "색상팔레트"라고 검색한 뒤 색을 찍어서 나오는 코드값을 복사-붙여넣기 하면 됩니다. 

 

색상팔레트 : 네이버 검색

 

 

3. CSS, HTML 연습 

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

 

.back1{

background: yellow;}

 

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

 

<p class="back1">배경색 노란색</p>

 

3.3. 예제

위와 같이 두개의 문단에 노란색 배경색을 지정하고, "첫 번째", "두 번째" 이 부분은 붉그스름한 색을 적용하는 전자책을 시길(sigil)로 만들어 보겠습니다. 

 

 

시길(Sigil)의 css에

 

.back1{background: yellow;}

.back2{background: #F15F5F;} 

 

이라고 2개의 스타일을 만듭니다. back2의 배경색 속성값 #F15F5F는 네이버에서 색상팔레트라고 검색 후 색을 선택하고 나온 코드값을 붙여넣기 하면 됩니다. 

 

back1, back2 2개의 스타일을 html에 적용합니다. 

 

<div class="back1">

<p><span class="back2">첫 번째</span> 문단</p>

<p><span class="back2">두 번째</span> 문단</p>

</div>

 

배경색 노란색은 <div>태그로 두 문단을 묶은 뒤 back1 스타일을 적용합니다. 

"첫 번째", "두 번째" 이 부분은 한 문단 안의 일부분이기 때문에 <span>태그로 묶은 뒤 back2 스타일을 적용합니다.