CSS 기초 공부(9) - 텍스트 스타일

CSS를 인테리어로 비유했을 때 텍스트 스타일은 방에 놓이는 가구의 종류나 세부 디자인 등이라고 할 수 있을 것이다.

CSS 텍스트 스타일

• 웹 페이지의 텍스트 모양과 레이아웃을 정의하는 데 사용된다.
• 다양한 속성을 사용하여 글꼴, 크기, 색상, 정렬 등을 제어할 수 있다.

---

텍스트 스타일을 적용할 수 있는 태그들은 다음과 같다.

일반적으로 택스트를 꾸며주는 태그들이다.

• <h1> ~ <h6>:
  • 제목을 나타내는 태그로, 숫자가 작을수록 더 중요한 제목을 의미한다. 기본적으로 굵은 글꼴과 큰 글자 크기가 적용된다.
• <p>:
  • 단락을 나타내는 태그로, 일반적인 텍스트를 표시하는 데 사용된다.
• <span>:
  • 인라인 요소로, 텍스트의 특정 부분에 스타일을 적용할 때 사용된다. 기본적인 스타일이 없는 가장 일반적인 텍스트 태그이다.
• <strong>:
  • 텍스트를 굵게 표시하여 강조하는 태그
• <em>:
  • 텍스트를 기울임꼴로 표시하여 강조하는 태그
• <u>:
  • 텍스트에 밑줄을 표시하는 태그
• <del>:
  • 텍스트에 취소선을 표시하는 태그

---

CSS 텍스트 스타일의 주요 예시

---

1. 글꼴(Font-family)

텍스트에 적용할 글꼴

 

폰트는 가독성이나 글의 분위기 등을 결정하는대 지대한 역할을 한다. 때문에 다양한 글꼴을 사용하면 웹페이지를 다채롭게 꾸미거나 강조하고 싶은 내용을 표현할 수 있다.

---

1. 기본 글꼴 지정

CSS

p {
  font-family: "Arial", sans-serif;
}

 

"Arial": Arial 글꼴을 우선적으로 적용하고 Arial 글꼴을 사용할 수 없는 경우, 시스템에서 지원하는 sans-serif 계열의 글꼴을 적용하는 방식이다.

---

웹 폰트를 사용하는 방식도 있는데 웹 폰트를 사용하면 사용자의 시스템에 글꼴이 설치되어 있지 않아도 원하는 글꼴을 표시할 수 있다.

---

2. 웹 폰트 사용

CSS

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
p {
  font-family: 'Nanum Gothic', sans-serif;
}

 

@import url(...)을 사용해서 Google Fonts와 같은 웹 폰트 서비스를 이용하여 원하는 글꼴을 불러온다.

이후 'Nanum Gothic' 으로 불러온 웹 폰트를 적용했다.

---

2. 글자 크기(Font-size)

텍스트의 크기를 설정한다. 제목, 본문, 작은 텍스트 등에 다양한 크기를 적용할 수 있다.

CSS

body {
  font-size: 16px; /* 기본 글꼴 크기 설정 */
}

h1 {
  font-size: 2em; /* 본문 글꼴 크기의 2배 */
}

p {
  font-size: 1rem; /* 루트 요소의 글꼴 크기와 동일 */
}

.small-text {
  font-size: 0.8em; /* 본문 글꼴 크기의 0.8배 */
}

---

3. 글자 두께(Font-weight)

텍스트의 두께를 설정한다. 키워드 값과 숫자값 두 방식으로 글자의 두께를 지정할 수 있다.

1. 키워드 값

• normal: 기본 글꼴 두께
• bold: 굵은 글꼴 두께입니다.
• bolder: 부모 요소보다 더 굵은 글꼴 두께
• lighter: 부모 요소보다 더 얇은 글꼴 두께

2. 숫자 값

• 100부터 900까지 100 단위로 글꼴 두께를 지정할 수 있다.
• 400은 normal과 같고, 700은 bold와 같다.
• 숫자 값을 사용하면 더 세밀하게 글꼴 두께를 조절할 수 있다.

---

• font-weight: 100; (가장 얇은 두께)
• font-weight: 300; (얇은 두께)
• font-weight: 500; (중간 두께)
• font-weight: 800; (매우 굵은 두께)
• font-weight: 900; (가장 굵은 두께)
   

---

CSS

h1 {
  font-weight: bold; /* 제목을 굵게 표시 */
}

p.highlight {
  font-weight: 600; /* 특정 단락을 약간 굵게 표시 */
}

.light-text {
  font-weight: 300; /* 얇은 글꼴로 표시 */
}​

---

4. 글자 색상(Color)

텍스트의 색상을 설정한다.

 

색상 이름, 16진수 색상 코드(HEX), RGB, RGBA, HSL, HSLA 등으로 색상을 표현할 수 있다.

• color: #333; (어두운 회색, 일반적인 텍스트 색상)
• color: red; (빨간색, 강조할 부분에 사용)
• color: rgba(0, 0, 0, 0.5); (투명도를 가진 검은색)

CSS

p {
  color: red;
}
h2 {
  color: #333; /* 어두운 회색 */
}

---

 

5. 텍스트 정렬(Text-align)

텍스트를 왼쪽, 오른쪽, 가운데 또는 양쪽으로 정렬한다.

• left: 텍스트를 왼쪽으로 정렬
• right: 텍스트를 오른쪽으로 정렬
• center: 텍스트를 가운데로 정렬
• justify: 텍스트를 양쪽으로 정렬(양쪽 여백을 균등하게 분배)

---

 

1. 클래스 선택자를 사용한 예시

HTML

<p class="left">이 텍스트는 왼쪽으로 정렬됩니다.</p>
<p class="right">이 텍스트는 오른쪽으로 정렬됩니다.</p>
<p class="center">이 텍스트는 가운데로 정렬됩니다.</p>
<p class="justify">
  이 텍스트는 양쪽으로 정렬됩니다. 양쪽 정렬은 긴 문단에서 유용하게 사용됩니다.
  양쪽 여백을 균등하게 분배하여 깔끔한 레이아웃을 만들 수 있습니다.
</p>

CSS

/* 왼쪽 정렬 */
.left {
  text-align: left;
}

/* 오른쪽 정렬 */
.right {
  text-align: right;
}

/* 가운데 정렬 */
.center {
  text-align: center;
}

/* 양쪽 정렬 */
.justify {
  text-align: justify;
}

 

HTML에서 클래스를 선언하고 CSS상에서 CLASS에 텍스트 정렬 디자인을 할당한 방식이다.

---

2. 태그 선택자를 사용한 예시

CSS

/* 모든 <p> 태그를 가운데 정렬 */
p {
  text-align: center;
}

/* 모든 <h1> 태그를 오른쪽 정렬 */
h1 {
  text-align: right;
}

 

HTML

<h1>제목입니다.</h1>
<p>이 문단은 가운데로 정렬됩니다.</p>

---

3. 인라인 스타일을 사용한 예시

HTML

<p style="text-align: center;">이 텍스트는 가운데로 정렬됩니다.</p>

---

6. 줄 간격(Line-height)

텍스트 줄 사이의 간격을 설정한다.

• 숫자 값 : 글꼴 크기에 대한 배수를 지정한다. 예를 들어, line-height: 1.5;는 줄 간격을 글꼴 크기의 1.5배로 설정한다.
• 길이 값 : px, em, rem과 같은 길이 단위를 사용하여 줄 간격을 직접 지정한다.
• 백분율 값 : 글꼴 크기에 대한 백분율로 줄 간격을 지정한다.
• normal : 브라우저의 기본 줄 간격을 사용한다.

---

HTML

<p style="line-height: 1.5;">
  이 문단은 줄 간격이 1.5배로 설정되었습니다.
  줄 간격은 텍스트의 가독성을 높이는 데 중요한 역할을 합니다.
</p>

<h1 style="line-height: 1.2;">제목</h1>

 

인라인 스타일로 바로 적용했다.

---

CSS

/* 숫자 값 */
p {
  line-height: 1.5; /* 일반적인 줄 간격 */
}

h1 {
  line-height: 1.2; /* 제목에 적합한 줄 간격 */
}

/* 길이 값 */
p {
  line-height: 24px;
}

/* 백분율 값 */
p {
  line-height: 150%;
}

---

7. 글자 간 간격(Letter-spacing)

글자 사이의 간격을 설정한다. 글자를 넓게 또는 좁게 배치할 수 있다.

• letter-spacing: 1px; (약간 넓은 간격)
• letter-spacing: -1px; (약간 좁은 간격)

CSS

/* 글자 간 간격을 1px 넓게 설정 */
p {
  letter-spacing: 1px;
}

/* 글자 간 간격을 2px 좁게 설정 */
h1 {
  letter-spacing: -2px;
}

/* 글자 간 간격을 0.1em 넓게 설정 */
.spaced-text {
  letter-spacing: 0.1em;
}

 

HTML

<p>이 문단은 글자 간 간격이 1px 넓게 설정되었습니다.</p>
<h1 style="letter-spacing: -2px;">제목</h1>
<p class="spaced-text">이 텍스트는 글자 간 간격이 0.1em 넓게 설정되었습니다.</p>

---

8. 텍스트 변환(Text-transform)

텍스트의 대소문자를 변환한다. 모든 글자를 대문자, 소문자 또는 첫 글자만 대문자로 만들 수 있다.

• uppercase: 모든 글자를 대문자로 변환한다.
• lowercase: 모든 글자를 소문자로 변환 한다.
• capitalize: 각 단어의 첫 글자만 대문자로 변환 한다.
• none: 기본값입니다. 텍스트 변환을 적용하지 않는다.
• inherit: 부모 요소의 text-transform 속성 값을 상속받는다.

 

p {
  text-transform: uppercase;
}

 

<p> 태그의 글자를 모두 대문자로 바꾼다.

---

HTML

<!DOCTYPE html>
<html>
<head>
<style>
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

 

위 예시에서:

• 첫 번째 <p> 요소는 uppercase 클래스를 가지므로 모든 글자가 대문자로 표시된다.
• 두 번째 <p> 요소는 lowercase 클래스를 가지므로 모든 글자가 소문자로 표시된다.
• 세 번째 <p> 요소는 capitalize 클래스를 가지므로 각 단어의 첫 글자만 대문자로 표시된다.