<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 속성</title>
<style>
/*
- text-indent : 들여쓰기
- 음수는 앞쪽으로, 양수는 뒤쪽으로 들여쓰기
- text-align : 글자정렬
- left, right, conter, justify(양쪽정렬)
- 블록 태그만 가능
- 글자 정렬에서 인라인 태그들은 조상 태그들 중 가장 가까운 조상 블록 태그의 영향을 받음
- text-decoration : 선
- none : 없음
- underline : 밑줄
- overline : 윗줄
- line-through : 취소선
- 단위
- em : 현재 폰트의 배수
- % : 현재 폰트의 %
- rem : 문서의 root 폰트의 배수
- px : 픽셀 수
- deg : 각도
*/
.indent{
text-indent: -10px;
}
.decoration{
text-decoration: line-through;
}
.align{
text-align:center
}
</style>
</head>
<body>
<div class="indent">안녕하세요.</div>
<div class="decoration">안녕하세요.</div>
<div class="align"><i><b>안녕하세요.</b></i></div>
<span class="align">안녕하세요.</span>
<!-- 네이버로 이동할 수 있는 링크를 생성하는데 가운데 정렬이 되게 하세요-->
<div class="align"><a href ="http://naver.com" target="_blank">네이버</a> </div>
<!-- 인라인태그는 가운데 정렬이 안됨. 길이만큼의 구역에서 가운데 정렬을 해봤자 움직일 공간이 없음-->
</body>
</html>