CSS로 글자와 배경 꾸미기

p {
  color: red;
}

<p>이 문장은 빨간색으로 보입니다.</p>

p {
  color: red;
}

p {
  color: #333333;
}

p {
  font-size: 18px;
}

.small-text {
  font-size: 14px;
}

.big-text {
  font-size: 24px;
}

<p class="small-text">작은 글자입니다.</p>
<p class="big-text">큰 글자입니다.</p>

p {
  font-weight: bold;
}

.normal-text {
  font-weight: normal;
}

.bold-text {
  font-weight: bold;
}

<p class="normal-text">보통 굵기의 글자입니다.</p>
<p class="bold-text">굵은 글자입니다.</p>

p {
  line-height: 1.6;
}

<p class="description">
  CSS를 사용하면 글자의 색, 크기, 굵기, 줄 간격을 조절할 수 있습니다.
  줄 간격을 적절히 주면 글을 읽기가 더 편해집니다.
</p>

.description {
  line-height: 1.6;
}

.box {
  background-color: yellow;
}

<div class="box">
  배경색이 들어간 박스입니다.
</div>

.box {
  background-color: yellow;
  padding: 20px;
}

.hero {
  background-image: url("background.jpg");
}

<div class="hero">
  <h2>배경 이미지 영역입니다.</h2>
</div>

.hero {
  background-image: url("background.jpg");
  height: 200px;
}

.hero {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 200px;
}

<h1 class="title">CSS로 글자 꾸미기</h1>
<p class="text">
  글자 색, 크기, 굵기, 줄 간격을 CSS로 조절할 수 있습니다.
</p>

.title {
  color: navy;
  font-size: 32px;
  font-weight: bold;
}

.text {
  color: #333333;
  font-size: 18px;
  line-height: 1.6;
}

<section class="banner">
  <h2>배경 꾸미기</h2>
  <p>배경색과 배경 이미지를 사용할 수 있습니다.</p>
</section>

.banner {
  background-color: #f2f2f2;
  padding: 30px;
}

.banner {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 30px;
}

<div class="card">
  <h2>CSS 카드 예시</h2>
  <p>
    CSS를 사용하면 글자와 배경을 원하는 모습으로 꾸밀 수 있습니다.
  </p>
</div>

.card {
  background-color: #f5f5f5;
  padding: 24px;
}

.card h2 {
  color: navy;
  font-size: 28px;
  font-weight: bold;
}

.card p {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
}

글자 꾸미기: color, font-size, font-weight, line-height
배경 꾸미기: background-color, background-image