[CSS 2-4] 문장(텍스트 - Text) 관련 스타일 속성

임승현·2022년 11월 14일

CSS

목록 보기

6/14

🐧문장(텍스트 - Text) 관련 스타일 속성

📌direction : 문장 쓰기 방향에 대한 스타일 속성

◈ 속성값 : ltr(왼쪽 > 오른쪽 : 기본), rtl(오른쪽 > 왼쪽)
.dir1 { direction : ltr; }
.dir2 { direction : rtl; }

📌text-align : 문장 정렬에 대한 스타일 속성

◈ 속성값 : left(기본), right, center, justify(양쪽)
.align { width: 150px; }
.align1 { text-align: left; }
.align2 { text-align: right; }
.align3 { text-align: center; }
.align4 { text-align: justify; }

📌text-shadow : 문장의 그림자 효과에 대한 스타일 속성

◈ 속성값속성값 : 가로 세로 범짐 색상
.shadow {
	font-size: 30px;
	font-weight: bold;
	color: gray;
	text-shadow: 3px 3px 3px #000;
}

📌overflow : 박스모델의 폭을 벗어난 문장에 대한 처리 관련 스타일 속성

◈ 속성값 : visiable(기본) - 출력 처리, hidden - 숨김 처리, scroll - 스크롤 처리
◈ 박스모델보다 큰 태그내용은 자동 줄바꿈 없이 그대로 출력
→ 태그내용이 박스모델의 폭을 벗서안 상태로 출력 처리
.overflow {
	width: 200px;
	white-space: nowrap;
}
.overflow1 { overflow: hidden; }
.overflow2 { overflow: scroll; }
📌text-overflow : 숨겨진 문장에 대한 처리 관련 스타일 속성

◈ 속성값 : clip(기본) - 잘라내기, ellipsis - [...] 기호로 출력하여 표현
.overflow3 { 
	overflow: hidden;
	text-overflow: ellipsis;
}

📌text-decoration : 문자 라인(선) 관련 스타일 속성

◈ 속성값 : none(기본), underline, line-through, overline
.deco1 { text-decoration: underline; }
.deco2 { text-decoration: line-through; }
.deco3 { text-decoration: overline; }

📌text-indent : 문장 들여쓰기 관련 스타일 속성 - 문장 앞부분에 여백 발생 */
.in1 { text-indent: 20px}
.in2 { text-indent: 30px}
.in3 { text-indent: 40px}

📌text-transform : 문장 변형(알파벳 처리)에 대한 스타일 속성

◈ 속성값 : none(기본), uppercase(대문자), lowercase(소문자), capitalize(첫문자만 대문자)
.trans1 { text-transform: uppercase; }
.trans2 { text-transform: lowercase; }
.trans3 { text-transform: capitalize; }

📃14_text.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	margin: 15px;
	width: 500px;
	border: 1px solid red;
}
/* direction : 문장 쓰기 방향에 대한 스타일 속성 */
/* 속성값 : ltr(왼쪽 > 오른쪽 : 기본), rtl(오른쪽 > 왼쪽) */
.dir1 { direction : ltr; }
.dir2 { direction : rtl; }
/* text-align : 문장 정렬에 대한 스타일 속성 */
/* 속성값 : left(기본), right, center, justify(양쪽) */
.align { width: 150px; }
.align1 { text-align: left; }
.align2 { text-align: right; }
.align3 { text-align: center; }
.align4 { text-align: justify; }
/* text-shadow : 문장의 그림자 효과에 대한 스타일 속성 */
/* 속성값 : 가로 세로 범짐 색상 */
.shadow {
	font-size: 30px;
	font-weight: bold;
	color: gray;
	text-shadow: 3px 3px 3px #000;
}
/* overflow : 박스모델의 폭을 벗어난 문장에 대한 처리 관련 스타일 속성 */
/* 속성값 : visiable(기본) - 출력 처리, hidden - 숨김 처리, scroll - 스크롤 처리 */
.overflow {
	width: 200px;
	/* 박스모델보다 큰 태그내용은 자동 줄바꿈 없이 그대로 출력 */
	/* → 태그내용이 박스모델의 폭을 벗서안 상태로 출력 처리 */
	white-space: nowrap;
}
.overflow1 { overflow: hidden; }
.overflow2 { overflow: scroll; }
/* text-overflow : 숨겨진 문장에 대한 처리 관련 스타일 속성 */
/* 속성값 : clip(기본) - 잘라내기, ellipsis - [...] 기호로 출력하여 표현 */
.overflow3 { 
	overflow: hidden;
	text-overflow: ellipsis;
}
/* text-decoration : 문자 라인(선) 관련 스타일 속성 */
/* 속성값 : none(기본), underline, line-through, overline */
.deco1 { text-decoration: underline; }
.deco2 { text-decoration: line-through; }
.deco3 { text-decoration: overline; }
/* text-indent : 문장 들여쓰기 관련 스타일 속성 - 문장 앞부분에 여백 발생 */
.in1 { text-indent: 20px}
.in2 { text-indent: 30px}
.in3 { text-indent: 40px}
/* text-transform : 문장 변형(알파벳 처리)에 대한 스타일 속성 */
/* 속성값 : none(기본), uppercase(대문자), lowercase(소문자), capitalize(첫문자만 대문자) */
.trans1 { text-transform: uppercase; }
.trans2 { text-transform: lowercase; }
.trans3 { text-transform: capitalize; }
</style>
</head>
<body>
	<h1>문장(텍스트 - Text) 관련 스타일 속성</h1>
	<hr>
	<div class="dir1">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="dir2">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<hr>
	<div class="align align1">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="align align2">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="align align3">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<div class="align align4">브라우저에 출력될 아주 중요한 내용입니다.</div>
	<hr>
	<div class="shadow">HTML5와 CSS3를 배우고 있습니다.</div>
	<hr>
	<div class="overflow overflow1">HTML5와 CSS3를 배우고 있습니다.</div>
	<div class="overflow overflow2">HTML5와 CSS3를 배우고 있습니다.</div>
	<div class="overflow overflow3">HTML5와 CSS3를 배우고 있습니다.</div>
	<hr>
	<div class="deco1">웹프로그램은 Servlet 또는 JSP를 이용하여 작성합니다.</div>
	<div class="deco2">웹프로그램은 Servlet 또는 JSP를 이용하여 작성합니다.</div>
	<div class="deco3">웹프로그램은 Servlet 또는 JSP를 이용하여 작성합니다.</div>
	<hr>
	<div class="in1">문장에 관련된 스타일 속성을 배우고 있습니다.</div>
	<div class="in2">문장에 관련된 스타일 속성을 배우고 있습니다.</div>
	<div class="in3">문장에 관련된 스타일 속성을 배우고 있습니다.</div>
	<hr>
	<div class="trans1">css3 배우고 javaScript를 배울 예정입니다.</div>
	<div class="trans2">css3 배우고 javaScript를 배울 예정입니다.</div>
	<div class="trans3">css3 배우고 javaScript를 배울 예정입니다.</div>
</body>
</html>