스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음

스타일시트 CSS

스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음

 

환경: Eclipse Mars

 

이번에 소개할 텍스트 관련 스타일은 단락을 꾸미는데 이용할 수 있는 단락 첫 들여쓰기와 요소 안에 들어간 텍스트의 줄, 단어 간격, 문자 간격을 조절할 수 있는 것들입니다. 그리고 텍스트를 inline 요소일 때 수직 정렬하는 방법과 문자열을 요소 내에서 좌우 정렬하는 속성을 알아보겠습니다.

 

단락에 관련된 텍스트 적용 스타일

 

텍스트를 편집할 수 있는 스타일 중 단락과 관련된 것들입니다. 단락에서 첫 줄 들여쓰기를 해주는 text-indent 와 줄, 문자, 단어 간격을 조절할 수 있는 옵션입니다. line-height 는 행간, 줄 간격을 나타냅니다. letter-spacing 은 문자 하나하나의 간격을 나타냅니다. 마지막 word-spacing letter-spacing 와 달리 단어 들의 간격입니다. 그러니까 space 키로 띄운 간격을 조절하는 것이죠. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
		margin: 0;
	}
	div {
		width: 400px;
		margin: 10px;
		padding: 3px;
		border: 2px solid;
		background-color: #bcecba
	}
	#text1 {text-indent: 30px;}
	#text2 {line-height: 30px;}
	#text3 {letter-spacing: 10px}
	#text4 {word-spacing: 10px}
	
</style>
</head>
<body>
	<div id="text1">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
	<div id="text2">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
	<div id="text3">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
	<div id="text4">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
</body>
</html>


스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음

 

요소 내에 문자열 정렬하는 방법

 

샘플은 div 내에서 text-align 을 이용해서 단락을 정렬했습니다. 속성에 값은 4가지 있는데 left, right, center, justify 가 있습니다. 결과 이미지에서 보듯이 left, right, center 은 어떻게 배치가 되는지 이해가 가지만 justify 는 어떤 차이가 있는지 눈에 확 띄지 않을 겁니다. justify 은 요소내에서 줄 바꿈을 할 때 끝 부분을 들쑥날쑥하지 않게 양쪽 모두 정렬시켜주는 기능을 합니다. left right 를 합친 것이죠

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
		margin: 0;
	}
	div {
		width: 400px;
		margin: 10px;
		padding: 3px;
		border: 2px solid;
		border-color: black;
		color: white;
		background-color: #4e539a
	}
	#text1 {text-align: left;}
	#text2 {text-align: right;}
	#text3 {text-align: center;}
	#text4 {text-align: justify;}
	
</style>
</head>
<body>
	<div id="text1">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
	<div id="text2">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
	<div id="text3">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
	<div id="text4">
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>
</body>
</html>

스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음

 

요소 내에서 수직으로 정렬하기

 

vertical-align 은 요소들 간의 수직 정렬을 조절하는 옵션입니다. block 요소에는 적용이 되지 않고 inline 요소에만 가능합니다. <span> 태그가 아닌 <div> 요소에서 적용하려면 display : table-cell 을 적용해서 inline 요소로 변경해야 합니다. <div> 요소가 줄 바꿈이 되지 않고 옆으로 정렬된 것은 inline 요소로 바뀐 것입니다.  

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 300px;
		height: 100px;
		border: 1px solid;
		border-color: black;
		color: white;
		background-color: #4e539a;
		display: table-cell;
	}
	#text1 {vertical-align: top;}
	#text2 {vertical-align: top;}
	#text3 {vertical-align: middle;}
	#text4 {vertical-align: bottom;}
</style>
</head>
<body>
	<div id="text1">vertiacl-align 정렬 : top</div>
	<div id="text2"><p>vertiacl-align 정렬 : top</p></div>
	<div id="text3"><p>vertiacl-align 정렬 : top</p></div>
	<div id="text4"><p>vertiacl-align 정렬 : top</p></div>
</body>
</html>

스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군