<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-blue {
color: blue;
}
/* 밑줄 */
.underline {
text-decoration: underline;
}
/* 윗줄 */
.overline {
text-decoration: overline;
}
/* 취소선 */
.delline {
text-decoration: line-through;
}
/* 장식선 업음 */
.text-none {
text-decoration: none;
}
/* text-decoration */
/* 4가지 하위 프로퍼티 */
/* text-decoration-style : 장식선 스타일(점선, 직선 등) */
/* text-decoration-line : 장식 종류(밑줄, 윗줄, 가운데줄 등) */
/* text-decoration-color : 장식선 색상 */
/* text-decoration-thickness : 장식선 두께 */
.underoverline {
text-decoration: dashed underline overline pink 5px;
/* text-decoration-style: dashed;
text-decoration-line: overline underline;
text-decoration-color: pink;
text-decoration-thickness: 5px; */
}
/* 모든 알파벳 문자를 대문자로 변환 */
.uppercase {
text-transform: uppercase;
}
/* 모든 알파벳 문자를 소문자로 변환 */
.text-lowercase {
text-transform: lowercase;
}
/* 영어 문장에서 각 단어의 첫무자만 대문자로 변환 */
.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<!-- 기본적인 텍스트 관련 스타일링 -->
<!-- CSS 파일을 만들지 않은 사람도 알 수 있게끔 클래스명을 정해야한다. -->
<h1 class="text-center">가운데 정렬</h1>
<h1 class="text-right">오른쪽 정렬</h1>
<!-- 텍스트 색상 -->
<h1 class="text-blue">파란색</h1>
<!-- 텍스트 장식선 -->
<p class="underline">밑줄을 가진 글씨입니다.</p>
<p class="overline">윗줄을 가진 글씨입니다.</p>
<p class="delline">취소선을 가진 글씨입니다.</p>
<p class="text-none">
<a href=""></a> a 태그의 기본 값인 밑줄을 없앤 글씨입니다.
</p>
<p class="underoverline">윗줄과 밑줄 글씨입니다.</p>
<!-- 텍스트 변환 -->
<p class="uppercase">
only the first letter of a word is converted to uppercase
</p>
<p class="text-lowercase">
only the first letter of a word is converted to uppercase
</p>
<p class="capitalize">
only the first letter of a word is converted to uppercase
</p>
<input type="text" class="uppercase" />
<!-- CSS는 단순히 디자인을 위한 언어 -->
<!-- 눈에 보이는 값만 대문자로 보이게할 뿐, 실게 그 값이 대문자로 변환되는 것이 아니다. -->
<!-- 대문자로 된 값을 받아야하는 경우, javascript의 toUpperCase()를 이용하여 받아야한다. -->
</body>
</html>
html & css/개념
