반응형
텍스트 관련 속성
콘텐츠에 들어가는 글자(자식요소 포함)에 대한 설정
★ color : 글자 색상
★ text-align : 정렬 방식. left(기본값), center, right.
☆ vertical-align : 수직 정렬. 이미지 + 글자일 때
- top : 글자와 이미지를 윗선에 정렬.
- middle : 가운데에 정렬.
- bottom : 밑선에 정렬.
★ text-decoration : 장식 설정 및 제거.
- overline - 윗줄
- underline - 밑줄
- line-through - 취소선(삭제선)
★ text-transform : 글자 변환.
- uppercase : 소 -> 대문자로 변환
- lowercase : 대 -> 소문자로 변환
- capitalize : 단어의 첫글자를 대문자로 변환.
★ text-indent : 들여쓰기.
★ letter-spacing : 글자 간격.
★ line-height : 줄 간격. 공간태그(div 등)의 높이와 같게 하면 내용물을
수직중앙에 정렬 효과를 볼 수 있다.
★ word-spacing : 단어 간격.
★ white-spacing : 내부 공백
- normal : 일반 상태
- nowrap : 연속 공백을 하나로 합침. <br>로 줄바꿈
- pre : 연속 공백 유지
- pre-wrap : 연속 공백 유지. 개형문자(엔터)와 <br>로 줄바꿈
- pre-line : 연속 공백을 하나로 합침. 개형문자(엔터)와 <br>로 줄바꿈
- break-space : 연속 공백이 줄의 끝에 위치해도 공간 차지,
연속 공백의 중간과 끝에서도 자동 줄바꿈, 유지한 연속 공백은 요소 외부로
넘치지 않으며 박스의 크기에 영향을 줌.
★ text-shadow : 글자에 그림자 효과 추가.
text-shadow: 수평이동수치 수직이동수치 흐림수치 색상;
수치단위 - px
text_effect.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자 효과</title>
<style type="text/css">
#h1 {
text-align: left;
text-decoration: overline;
}
#h2 {
text-align: center;
text-decoration: underline;
}
#h3 {
text-align: right;
direction: rtl;
unicode-bidi: bidi-override;
text-decoration: line-through;
}
div#d1 {
border: 1px solid;
padding: 10px;
width: 150px;
text-align: jistify;
text-transform: capitalize;
text-indent: 30px;
letter-spacing: 1px;
line-height: 1.6;
}
img {
vertical-align: middle;
}
#lh {
height: 50px;
border: 1px solid;
line-height: 50px;
/* x축 - y축 - 퍼짐효과 - 색상 */
text-shadow: 2px 2px 5px purple;
font-size: 20px;
color: white;
}
p {
word-spacing: 20px;
}
div#d2 {
border: 1px solid;
padding: 10px;
width: 300px;
white-space: pre;
overflow: auto;
}
</style>
</head>
<body>
<h3 id="h1">글자의 위치</h3>
<h3 id="h2">글자의 위치</h3>
<h3 id="h3">글자의 위치</h3>
<div id="d1">
Lorem Ipsum is simply dummy text
of the printing and typesetting industry.
</div>
<p>이 그림은 <img src="images/jo.jpg" width="100">저의 로고입니다.</p>
<div id="lh"><b>글자의 높이</b></div>
<div id="d2">
Lorem Ipsum is
simply dummy text<br>
of the printing and typesetting industry.
</div>
</body>
</html>반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 링크버튼, 박스그림자(box-shadow) (0) | 2023.07.07 |
|---|---|
| [CSS] 높이, 너비 사이즈 (0) | 2023.07.07 |
| [CSS] 여백(margin, padding) (0) | 2023.07.06 |
| [CSS] 테투리(경계선) (0) | 2023.07.06 |
| [CSS] 배경 (0) | 2023.07.06 |
