CSS 선택자와 속성 심화, 실전 스타일링 예시

지난 글에서 CSS의 기본적인 적용 방법을 살펴봤습니다.
오늘은 그 연장선으로, CSS 선택자와 속성을 조금 더 깊게 다뤄보겠습니다.

전자책에서는 복잡한 웹사이트만큼의 화려한 스타일은 쓰지 않지만,
독자의 가독성을 높이고 콘텐츠의 의미를 강조하는 정도의 CSS는 반드시 필요합니다.

 

1. 태그 선택자 (Tag Selector)

HTML 태그 자체를 지정해서 꾸미는 방법입니다.

css

p { font-size: 1.1em; line-height: 1.6; color: #333333; }
h1 { text-align: center; color: darkred; }

👉 장점: 전체 문서에 공통으로 적용 가능
👉 단점: 모든 문단이 똑같이 적용되어 개별 조정이 어렵다.

 

 

2. 클래스 선택자 (Class Selector)

특정 부분에만 스타일을 적용하고 싶을 때 쓰는 방법입니다.
class="..." 형태로 HTML에 표시합니다.

html

<p>이 책은 <span class="highlight">초보자</span>도 쉽게 읽을 수 있습니다.</p>

👉 CSS를 적용하지 않은 상태의 HTML 모습입니다. 기본 글자 크기와 색상만 표시되어, 아주 단순하게 보입니다.

 

css

.highlight {
  color: red;
  font-weight: bold;
  background-color: #fce4e4;
  padding: 2px 4px;
  border-radius: 3px;
}

 

👉 결과: <span class="highlight"> 부분만 빨간색 굵은 글씨 + 연한 배경 박스로 강조됩니다.
👉 활용: 중요한 단어나 용어 설명에 자주 사용됩니다.

 

 

3. 아이디 선택자 (ID Selector)

문서에서 한 번만 등장하는 요소에 적용합니다.

html

<h1 id="book-title">전자책 제작 가이드</h1>

👉 CSS를 적용하지 않은 상태의 HTML 모습입니다. 기본 글자 크기와 색상만 표시되어, 아주 단순하게 보입니다.

 

css

#book-title {
  text-align: center;
  font-size: 1.5em;
  color: navy;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
}

👉 결과: 책 제목이 중앙 정렬되고, 밑줄 장식이 생깁니다.
👉 활용: 전자책의 표지 제목, 각 장의 메인 제목 등 고유한 위치에 적합합니다.

 

 

4. 구역 나누기 – <div> 활용

문단이나 인용문을 묶어 꾸밀 때 자주 씁니다.

html

<div class="quote">
<p>“책은 마음의 양식이다.”</p>
</div>

👉 CSS를 적용하지 않은 상태의 HTML 모습입니다. 기본 글자 크기와 색상만 표시되어, 아주 단순하게 보입니다.

 

css

.quote {
  margin: 20px;
  padding: 15px;
  border-left: 3px solid #555;
  font-style: italic;
  background-color: #fafafa;
}

👉 결과: 인용문처럼 왼쪽에 세로줄이 생기고, 기울임꼴로 강조됩니다.
👉 활용: 책 속 인용문, 팁 박스, 참고 설명 등을 넣을 때 자주 사용됩니다.

 

 

📌 시행착오
처음엔 모든 걸 태그 선택자로만 꾸미다 보니, 전자책 전체가 단조로워졌습니다.
예를 들어, 중요한 문구도 그냥 다른 문장과 똑같이 보이는 거죠.
그 후 <span class="highlight"> 같은 클래스를 활용하니, 책의 리듬이 생기고 독자가 필요한 부분을 더 쉽게 찾을 수 있었습니다.

전자책에서는 화려함보다 의미를 살려주는 최소한의 꾸밈이 훨씬 효과적입니다.

 

---

 

✅ 오늘의 정리
- 태그 선택자: 문서 전체에 적용 (기본 스타일)
- 클래스 선택자: 반복적으로 쓰이는 강조 부분에 적용
- 아이디 선택자: 문서에서 고유하게 한 번만 쓰이는 요소에 적용
- div 구역 스타일링: 인용문, 참고 박스 등 특정 구역 꾸미기에 유용
- 전자책 CSS는 심플하게, 의미 전달 중심으로 작성할 것

 

 

---

👉 지난 글 :  css 기초 정리

전자책 디자인의 시작, CSS 기초 완전 정리

 

👉 다음 글 :  css로 텍스트 꾸미기

CSS로 텍스트 꾸미기 – 글자 크기, 색상, 줄 간격, 여백 설정하기