<p class="keyword-color">키워드로 설정한 색상</p>
<p class="hex-color">HEX 코드로 설정한 색상</p>
<p class="rgb-color">RGB로 설정한 색상</p>
<p class="rgba-color">투명도가 있는 RGBA 색상</p>

.keyword-color {
  color: red;
}
.hex-color {
  color: #00ff00;
}
.rgb-color {
  color: rgb(0, 0, 255);
}
.rgba-color {
  color: rgba(255, 0, 0, 0.5);
}

<div>
  <p>안녕하세요</p>
</div>

div {
  color: sandybrown;
}
p {
  border: 1px solid currentColor;
}

<div class="px-size">
  <div class="px-size">px 단위로 설정한 크기</div>
</div>
<div class="em-size">
  <div class="em-size">em 단위로 설정한 크기</div>
</div>
<div class="rem-size">
  <div class="rem-size">rem 단위로 설정한 크기</div>
</div>

.px-size {
  font-size: 18px;
}
.em-size {
  font-size: 1.2em;
}
.rem-size {
  font-size: 1.2rem;
}

<p class="normal-weight">일반 굵기의 텍스트</p>
<p class="bold-weight">굵은 텍스트</p>
<p class="custom-weight">사용자 정의 굵기의 텍스트</p>
<h1>
  hello world
  <h1>
    <p class="heading-1">hello world</p>
  </h1>
</h1>

.normal-weight {
  font-weight: normal;
}
.bold-weight {
  font-weight: bold;
}
.custom-weight {
  font-weight: 600;
}
.heading-1 {
  font-weight: 700;
}

<p class="left-align">
  이 텍스트는 왼쪽 정렬입니다. 웹에서 가장 일반적인 정렬 방식입니다.
</p>
<p class="right-align">
  이 텍스트는 오른쪽 정렬입니다. 주로 날짜나 숫자 등에 사용됩니다.
</p>
<p class="center-align">
  이 텍스트는 중앙 정렬입니다. 제목이나 특별한 강조가 필요한 경우에 사용합니다.
</p>
<p class="justify-align">
  이 텍스트는 양쪽 정렬입니다. 긴 문단에 사용될 수 있지만, 불규칙한 간격으로
  인해 가독성이 떨어질 수 있습니다. 따라서 사용 시 주의가 필요합니다.
</p>

.left-align {
  text-align: left;
}
.right-align {
  text-align: right;
}
.center-align {
  text-align: center;
}
.justify-align {
  text-align: justify;
}

<div>
  텍스트
  <div class="box baseline">baseline</div>
</div>
<div>
  텍스트
  <div class="box top">top</div>
</div>
<div>
  텍스트
  <div class="box middle">middle</div>
</div>
<div>
  텍스트
  <div class="box bottom">bottom</div>
</div>
<div>
  텍스트
  <div class="box text-top">text-top</div>
</div>
<div>
  텍스트
  <div class="box text-bottom">text-btm</div>
</div>

div {
  line-height: 2.5;
}

div > div {
  line-height: 1;
  background: yellow;
}

.box {
  display: inline-block;
}

.baseline {
  vertical-align: baseline;
}
.top {
  vertical-align: top;
}
.middle {
  vertical-align: middle;
}
.bottom {
  vertical-align: bottom;
}
.text-top {
  vertical-align: text-top;
}
.text-bottom {
  vertical-align: text-bottom;
}

<span>
  <img src="https://picsum.photos/200/" alt="Placeholder" class="bottom" />
</span>

span {
  background: hotpink;
}
/* .bottom { vertical-align: bottom; } */

<p class="normal-line-height">
  이 텍스트는 기본 행간을 사용합니다. 때로는 줄 간격이 좁아 가독성이 떨어질 수
  있습니다.
</p>
<p class="increased-line-height">
  이 텍스트는 증가된 행간을 사용합니다. 줄 사이의 간격이 넓어져 읽기가 더
  쉬워집니다.
</p>

.normal-line-height {
  line-height: normal;
}
.increased-line-height {
  line-height: 1.6;
}

<h2 class="normal-spacing">일반 자간</h2>
<h2 class="wide-spacing">넓은 자간</h2>
<h2 class="narrow-spacing">좁은 자간</h2>

.normal-spacing {
  letter-spacing: normal;
}
.wide-spacing {
  letter-spacing: 0.3em;
}
.narrow-spacing {
  letter-spacing: -0.05em;
}