|
스타일 시트 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>
|
◎ 요소 내에 문자열 정렬하는 방법 |
▼ 샘플은 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>
|
◎ 요소 내에서 수직으로 정렬하기 |
▼ 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' 카테고리의 다른 글
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
|---|---|
| 스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 (0) | 2019.03.17 |
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
| 스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기 (0) | 2019.02.21 |
| 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
| 스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 (0) | 2019.01.06 |
| 인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
| 스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 (0) | 2018.10.21 |
