반응형
1. color 속성 – 글자 색 지정하기
① 글자 색상 지정할 때 사용
② 16진수 값, rgb값, hsl 값, 색상 이름으로 표시 가능
③ 기본형 :
color : <색상>
<예제 – color-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트 색상</title>
<style>
h1 {
color: rgb(0, 200, 0); /* rgb 값 사용 - 녹색 계열 */
}
h2 {
color: blue; /* 색상 이름 사용 - 파랑 */
}
.accent {
color: #f00; /*16진수 값은 기본적으로 6자리 표시
#ff0000 처럼 두개씩 중복될 경우 #f00으로 생략하여 사용 가능*/
}
img {
float: left; /* 왼쪽 정렬 */
margin-right: 10px; /* 오른쪽 마진 여백 */
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<h2>세계 3대 미항</h2>
<img src="images/galic.jpg">
<p>시드니(Sydney), 호주</p>
<p class="accent">리우데자네이루(Rio de Janeiro), 브라질</p>
<p>나폴리(Naples), 이탈리아</p>
</body>
</html>
2. text-decoration 속성 – 텍스트에 줄 표시하기/없애기
① 텍스트에 밑줄을 긋거나 취소 선을 표시할 때 사용
② 링크 텍스트의 밑줄 없앨 때도 사용
③ 기본형 :
text-decoration : none | underline | overline | line-through④ 사용 가능한 속성 값
<예제 – text-decoration-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 데코레이션</title>
<style>
p {
text-decoration: none;
}
.edited {
text-decoration: line-through;
}
.edited2 {
text-decoration: underline;
}
.edited3 {
text-decoration: overline;
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<h2>세계 3대 미항</h2>
<img src="images/galic.jpg">
<p class="edited">시드니(Sydney), 호주</p>
<p class="edited2">리우데자네이루(Rio de Janeiro), 브라질</p>
<p class="edited3">나폴리(Naples), 이탈리아</p>
</body>
</html>
3. text-transform 속성 – 텍스트 대/소문자 변환하기
① 텍스트를 대/소문자 변환할 때 사용
② 기본형 :
text-transform : none | capitalize | uppercase | lowercase | full-width;③ 사용 가능한 속성 값
<예제 – text-transform-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 트랜스폼</title>
<style>
.trans1 {
text-transform: uppercase; /* 대문자로 */
}
.trans2 {
text-transform: lowercase; /* 첫 글자만 대문자로 */
}
.trans3 {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<h2>세계 3대 미항</h2>
<img src="images/galic.jpg">
<p class="trans1">시드니(Sydney), 호주</p>
<p class="trans2">리우데자네이루(Rio de Janeiro), 브라질</p>
<p class="trans3">나폴리(naples), 이탈리아</p>
</body>
</html>
4. text-shadow 속성 – 텍스트에 그림자 효과 추가하기
① 텍스트에 그림자 효과를 추가할 때 사용
② 자주 사용하면 지저분해 보여서 제목이나 강조할 글자에만 사용
③ 기본형 :
text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상>④ 사용 가능한 속성 값
<예제 – text-shadow-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 그림자</title>
<style>
p {
font-size: 100;
font-family: "Arial Rounded MT";
}
.shadow1 {
color: orange; /* 글자 색 */
text-shadow: 1px 1px; /* 오른쪽 아래에 글자색과 동일한 그림자 생성 */
}
.shadow2 {
text-shadow: 5px 5px 3px #f00; /* 오른쪽 아래에 번짐 정도가 3px인 빨간색 그림자 생성 */
}
.shadow3 {
color: #fff;
text-shadow: 7px -7px 5px #000; /* 오른쪽 아래에 번짐 정도가 5px인 검은색 그림자 생성 */
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<h2>세계 3대 미항</h2>
<img src="images/galic.jpg">
<p class="shadow1">시드니(Sydney), 호주</p>
<p class="shadow2">리우데자네이루(Rio De Janeiro), 브라질</p>
<p class="shadow3">나폴리(naples), 이탈리아</p>
</body>
</html>
<예제 – text-shadow-002.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 그림자</title>
<style>
body {
background: #222; /* 문서 배경색 */
}
h1 {
font-size: 80px; /* 글자 크기 */
font-family: "Arial Rounded MT"; /* 글꼴 */
letter-spacing: 4px; /* 자간 */
}
.shadow1 {
color: #000; /* 글자 색 */
/* 그림자를 여러개 생성하여 불타는 효과 생성 */
/* (,)로 구분해서 그림자를 여러 개 생성한다. */
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;
}
</style>
</head>
<body>
<h1 class="shadow1">세계 3대 미항</h1>
</body>
</html>
5. white-space 속성 – 공백 처리하기
① 텍스트와 함께 연속해 입력된 여려 개의 공백 처리할 때 사용
② 기본형 :
white-space : normal | nowrap | pre | pre-line | pre-wrap③ 사용 가능한 속성 값
6. letter-spacing과 word-spacing 속성 – 텍스트 간격 조절하기
① 텍스트 자간을 조절할 때 사용하는 속성들
② letter-spacing은 낱 글자 사이 간격 조절
③ word-spacing은 단어와 단어 사이 간격 조절
④ 기본형 :
letter-spacing : normal | <크기>
word-spacing : normal | <크기>
<예제 – letter-spacing-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 그림자</title>
<style>
p {
font-size: 40px;
}
.letter1 {
/*낱 글자 마다 사이 간격 조절*/
letter-spacing: 0.2em;
}
.letter2 {
letter-spacing: 1em;
}
.letter3 {
/*단어와 단어 사이의 간격 조절*/
word-spacing: 1em;
}
</style>
</head>
<body>
<p class="letter1">시드니(Sydney), 호주</p>
<p class="letter2">시드니(Sydney), 호주</p>
<p class="letter3">시드니(Sydney), 호주</p>
<p>시드니(Syeney), 호주</p>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글
| [CSS] 02-4 목록과 링크 스타일 (0) | 2021.09.05 |
|---|---|
| [CSS] 02-3 문단 스타일 (0) | 2021.09.05 |
| [CSS] 02-1 글꼴 관련 스타일 (0) | 2021.09.05 |
| [CSS] 01-5 CSS3와 CSS 모듈 (0) | 2021.09.05 |
| [CSS] 01-4 캐스캐이딩 스타일 시트 (CSS : Cascading Style Sheet) (0) | 2021.09.05 |
댓글