color

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.h2-name {
			/* 색상명으로 지정합니다. */
			color: aqua;
		}
		.h2-hex {
			/* 16진수로 색깔을 지정합니다. */
			color: #00ff1e;
		}
		.h2-rgb {
			/* rgb로 색깔을 지정합니다. */
			color: rgb(194, 159, 159);
		}
		.h2-rgba {
			/* rgba로 색깔을 지정합니다. */
			color: rgba(194, 159, 159, 0.1);
		}
		.h2-hsla {
			/* hsla로 색깔을 지정합니다. */
			color: hsl(258, 100%, 50%);
		}
	</style>
</head>
<body>
	<div>
		<h2 class="h2-name">색상명</h2>
		<h2 class="h2-hex">16진수</h2>
		<h2 class="h2-rgb">RGB</h2>
		<h2 class="h2-rgba">RGBA</h2>
		<h2 class="h2-hsla">HSLA</h2>
	</div>
</body>
</html>

Untitled

text-decoration

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.none {
			/* 아무 효과를 주지 않습니다. */
	    text-decoration: none;
		}
		.underline {
			/* 텍스트에 밑줄을 그어줍니다. */
	    text-decoration: underline; 
		}
		.line-through {
			/* 텍스트에 취소선을 그어줍니다. */
	    text-decoration: line-through;
		}
	</style>
</head>
<body>
	<p class="none">효과없음</p>
	<p class="underline">밑줄</p>
	<p class="line-through">취소선</p>
</body>
</html>

Untitled

text-align

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.height {
				/* 가운데 기준 정렬 */
        text-align: center; 
    }
    .left {
				/* 좌 기준 정렬 */
        text-align: left;
    }
    .right {
				/* 우 기준 정렬 */
        text-align: right;
    }
	</style>
</head>
<body>
	<p class="height">애국가(愛國歌)</p>
	<p class="left">애국가(愛國歌)</p>
	<p class="right">애국가(愛國歌)</p>
</body>
</html>

Untitled

line-height

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
    .box {
      /*  배경색을 지정 */
      background-color: cadetblue;
      /* 블럭 레벨 요소의 width를 설정 */
      width: 300px;
      /* 블럭 레벨 요소의 height를 설정 */
      height: 100px;
    }
    .line-height {
      line-height: 2rem;
    }
    .center {
      /* 텍스트를 가운데 기준 정렬 */
      text-align: center;
      /* height속성과 같은 속성값을 설정하여 중앙 정렬 */
      line-height: 100px;
    }
  </style>
</head>
<body>
    <div class="box line-height">
        <p>애국가(愛國歌)</p>
        <p>애국가(愛國歌)</p>
    </div>
  <p class="box center">애국가(愛國歌)</p>
</body>
</html>

Untitled

text-transform

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
    .capitalize {
        /* 영어 첫번째 글자를 대문자로 변환해 줍니다. */
        text-transform: capitalize;
    }
    .uppercase {
        /* 영어 대문자로 변환해 줍니다. */
        text-transform: uppercase;
    }
    .lowercase {
        /* 영어 소문자로 변환해 줍니다. */
        text-transform: lowercase;
    }
	</style>
</head>
<body>
	<h1 class="capitalize">abcd</h1>
	<h1 class="uppercase">abcd</h1>
	<h1 class="lowercase">ABCD</h1>
</body>
</html>

Untitled

letter-spacing

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .spacing {
      /* 자간을 설정합니다. */
      letter-spacing: 1.5rem;
    }
  </style>
</head>
<body>
  <p>애국가(愛國歌)</p>
  <p class="spacing">애국가(愛國歌)</p>
</body>
</html>

Untitled