[CSS] 6. Paragraph

in Web on CSS


Paragraph



문단 관련 속성은 가로 정렬, 세로 정렬, 들여쓰기 ,대소문자, 줄치기, 자간 조절 등이 있습니다.

text-align



text-align 속성은 문단을 블록의 왼쪽, 가운데, 오른쪽, 양쪽 등으로 정렬시켜줍니다.

쓸 수 있는 값: left(왼쪽), center(중앙), right(오른쪽), jusify(양쪽)

그리고 블록요소에만 쓸 수 있습니다. 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>text-align 속성 연습</title>
	<style>
		*{width: 80%;}
		p:nth-child(1){text-align:left}
		p:nth-child(2){text-align:right}
		p:nth-child(3){text-align:center}
		p:nth-child(4){text-align:justify}
	</style>
</head>
<body>
	<p>안녕하세요 꾸리입니다.</p>
	<p>안녕하세요 꾸리입니다.</p>
	<p>안녕하세요 꾸리입니다.</p>
	<p>안녕하세요 꾸리입니다.</p>
</body>
</html>



image



vertical-align



vertical-align 속성은 이미지나 폼 요소를 위, 가운데, 아래 등으로 세로 정렬시켜 줍니다.

쓸 수 있는 값들: top(위쪽 정렬), middle(중앙 정렬), bottom(아래쪽 정렬)

img, input, select, 테이블의 th, td 등에 사용합니다. 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>vertical-align 속성 연습</title>
	<style>
		p:nth-child(1) img{vertical-align:top} /* 글자와 그림의 높낮이를 위에 맞춘다 */
		p:nth-child(2) img{vertical-align:middle} /* 글자와 그림의 높낮이를 중앙에 맞춘다 */
		p:nth-child(3) img{vertical-align:bottom} /* 글자와 그림의 높낮이를 아래에 맞춘다 */
		img{width:200px}
	</style>
</head>
<body>
	<p>위쪽 정렬 <img src="C:\Users\Administrator\Desktop\img.png" alt=""></p>
	<p>중앙 정렬 <img src="C:\Users\Administrator\Desktop\img.png" alt=""></p>
	<p>아래쪽 정렬 <img src="C:\Users\Administrator\Desktop\img.png" alt=""></p>
</body>
</html>




image



text-indent



text-indent 속성은 문단의 첫머리를 들여쓰기합니다.

쓸 수 있는 값들: px, % 등의 단위로 수치를 적용합니다.

블록 요소에만 적용할 수 있습니다. 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>text-indent 속성 연습</title>
	<style>
		#blog{text-indent: 30px} /* '꾸리블로그' 가 오른쪽으로 30px 밀려납니다 */
	</style>
</head>
<body>
	<h1>꾸리 블로그</h1>
	<h1 id="blog">꾸리 블로그</h1>
</body>
</html>




image



text-transform



text-transform은 대소문자의 변경을 실행합니다.

쓸 수 있는 값: uppercase(대문자), lowercase(소문자),capitalize(첫 글자만 대문자) 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>text-transform 속성 연습</title>
	<style>
		p:nth-child(1){text-transform: capitalize} /* 첫글자만 대문자 */
		p:nth-child(2){text-transform: uppercase} /* 대문자 */
		p:nth-child(3){text-transform: lowercase} /* 소문자 */
	</style>
</head>
<body>
	<p>happy birth day to you!</p>
	<p>happy birth day to you!</p>
	<p>happy birth day to you!</p>
</body>
</html>




image



text-decoration



text-decoration은 글자에 밑줄, 윗줄, 가운데 줄을 치거나, 원래 있던 밑줄을 없애줍니다.

쓸 수 있는 값: underline(밑줄), overline(윗줄), line-through(가운데 줄), none(밑줄 제거) 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>text-decoration 속성 연습</title>
	<style>
		p:nth-child(1){text-decoration: underline} /* 밑줄 */
		p:nth-child(2){text-decoration: overline} /* 윗줄 */
		p:nth-child(3){text-decoration: line-through} /* 가운데 줄 */
		p:nth-child(4) a{text-decoration: none} /* 밑줄제거 */
	</style>
</head>
<body>
	<p>꾸리블로그</p>
	<p>꾸리블로그</p>
	<p>꾸리블로그</p>
	<p><a href="">꾸리블로그</a></p>
	<p><a href="">꾸리블로그</a></p>
</body>
</html>




image



letter-spacing



letter-spacing은 글자와 글자간의 간격을 부여합니다.

쓸 수 있는 값: px, % 등의 단위 


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>text-decoration 속성 연습</title>
	<style>
		p{letter-spacing: 20px;} /* 글자 간격 20px */
	</style>
</head>
<body>
	<p>속담과 표준말의 상호관계</p>
</body>
</html>



image