color 속성-글자색 지정하기
웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 떄는 color속성을 사용합니다.
- color 속성에서 사용할 수 있는 생상 값은 16진수, RGB, HSL또는 색상 이름으로 표기할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>뉴욕타임즈 10대 식품</title>
<style>
h1 {color:rgb(0,200,0);} /* rgb 값 사용 - 녹색 계열 */
h2 {color:blue;} /* 색상 이름 사용 - 파랑 */
.accent {color:#f00;} /* 16진수 사용 - 빨강, #ff0000으로도 사용 */
img {
float:right; /* 오른쪽 정렬 */
margin-right:10px; /* 오른쪽 마진 여백 */
}
</style>
</head>
<body>
<h1>세계 10대 슈퍼푸드</h1>
<img src="images/galic.jpg" alt="">
<h2>마늘(Garlic)</h2>
<p>일해백리(一害百利)는 마늘의 별명이다. 한가지 해가 있고 백가지 이로움이 있다는 뜻이다.
그 한 가지 해란, 아린 맛으로 인해 위에 부담을 준다는 것이다. </p>
<p>마늘 특유의 아린 맛은 <span class="accent">알리신</span>이라는 성분 때문으로, 살균 및 항균 작용을 하며
마늘에 들어 있는 아연이 피로 회복에 도움을 준다.</p>
</body>
</html>
text-decoration 속성-텍스트에 줄표시하기/없애기
앞에 text- 가 붙는 속성들에 대해 알아보겠습니다.
- text-decoration속성을 이용하면 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있습니다.
| 속성 값 | 설명 |
|---|---|
| none | 밑줄을 표시하지 않습니다.(default) |
| underline | 밑줄을 표시합니다. |
| overline | 영역 위로 선을 그립니다. |
| line-through | 영역을 가로지르는 선(취소선)을 그립니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>웹 표준 기술 살펴보기</title>
<style>
p {line-height: 1.8;}
a {text-decoration:none;} /* 밑줄 없앰 */
.edited {text-decoration:line-through;} /* 취소선 */
</style>
</head>
<body>
<h2>HTML5</h2>
<p>다양한 기기로 인터넷에 접속할 수 있는 요즘, <br>
<span class="edited">HTML4</span> HTML5를 공부해야 할 때입니다.</p>
<p><a href="https://html.spec.whatwg.org/" target="_blank"><b>HTML5 표준 규약 살펴보기</b></a></p>
</body>
</html>
text-transform 속성-텍스트 대,소문자 변환하기
| 속성 값 | 설명 |
|---|---|
| none | 변환하지 않습니다. |
| capitalize | 시작하는 첫 번째 글자를 대문자로 변환합니다. |
| uppercase | 모든 글자를 대문자로 바꿉니다. |
| lowercase | 모든 글자를 소문자로 바꿉니다. |
| full-width | 가능한 모든 문자를 전각 문자로 변환합니다.(고정 폭 영문자 너비의 두 배 정도 너비의 문자) |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>text-transform</title>
<style>
.trans1 {text-transform:uppercase;} /* 대문자로 */
.trans2 {text-transform:capitalize;} /* 첫글자만 대문자로 */
</style>
</head>
<body>
<h1>Have to study</h1>
<ul>
<li class="trans1">html</li>
<li class="trans1">css</li>
<li class="trans2">javascript</li>
</ul>
</body>
</html>
text-shadow 속성-텍스트에 그림자 효과 추가하기
텍스트에 그림자 효과도 줄 수 있습니다. 본문에서 자주 사용하면 지저분해 보이지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눌에 띄게 만들 수 있습니다.
- shadow속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀더 입체적으로 보이게 합니다.
- 그림자 값은 쉼표로 구분해 여러값을 지정할 수 있습니다.
| 속성 값 | 설명 |
|---|---|
| 가로 거리 | 텍스트부터 그림자까지의 가로 거리를 입력합니다. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만듭니다.필수 속성입니다. |
| 세로 거리 | 텍스트부터 그림자까지의 로 거리를 입력합니다. 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만듭니다.필수 속성입니다. |
| 번짐 정도 | 그림자가 번지는 정도를 나타냅니다. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시됩니다. 반대로 음수 값은 그림자가 모든 방향으로 축소되어 보입니다. 기본값은 0이다. |
| 색상 | 그림자 색상을 지정합니다. 한 가지로만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있습니다. 기본 값은 현재 글자 색입니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>text-transform</title>
<style>
h1 {
font-size:100px; /* 글자 크기 */
font-family:"Arial Rounded MT"; /* 글꼴 */
}
.shadow1{
color:orange; /* 글자색 */
text-shadow:1px 1px; /* 텍스트 그림자 */
}
.shadow2 {
text-shadow: 5px 5px 3px #f00; /* 텍스트 그림자 */
}
.shadow3 {
color:#fff; /* 글자색 */
text-shadow:7px -7px 5px #000; /* 텍스트 그림자 */
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
<h1 class="shadow2">HTML5</h1>
<h1 class="shadow3">HTML5</h1>
</body>
</html>
white-space 속성-공백 처리하기
텍스트에는 글자뿐만 아니라 공백이 있습니다.이 공백이 하나의 원칙으로 처리되지 않는다면 문서가 지저분해 보일 수도 있습니다.
- 이럴 때 white-space 속성을 사용하면 텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있습니다.
| 속성 값 | 설명 |
|---|---|
| normal | 여러 개의 공백을 하나로 표시합니다.(default값) |
| nowrap | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한줄로 표시합니다. |
| pre | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한줄로 표시합니다. |
| pre-line | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다. |
| pre-wrap | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다. |
letter-spacing 과 word-spacing속성-텍스트 간격 조절하기
텍스트 공백을 조절해 보았으니 이번에는 텍스트 자간을 조절해 보겠습니다.
- 강조하고 싶은 글자나
<hn>태그를 이용해 크게 표시한 글자들은 글자 사이 간격을 조절해 좀 더 여유 있게 표시하면 읽기 편합니다. - letter-spacing 속성은 낱 글자 사이 간격을 조절하고.
- word-spacing 속성은 단어와 단어 사이 간격을 조절하는데 주로 단어 사이 간격은 수정하지 않고 letter-spacing 속성을 사용해 자간을 조절합니다.
다음 예제는 자간,즉 letter-spacing을 2.0em으로 했을 경우와 0.5em으로 했을 경우를 비교한 것입니다. 자간은 가능하면 em단위로 지정하는 것이 좋습니다. 그래야만 바뀌는 글꼴에 맞추어 자간이 유지되기 때문입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>letter-spacing와 word-spacing</title>
<style>
h1 {font-size:40px;} /* 글자 크기 */
.letter1 {
letter-spacing: 0.2em; /* 자간 */
}
.letter2{
letter-spacing:0.5em; /* 자간 */
}
</style>
</head>
<body>
<h1>HTML5</h1>
<h1 class="letter1">HTML5</h1>
<h1 class="letter2">HTML5</h1>
</body>
</html>
블로그 이전합니다! https://jyyoun1022.tistory.com/