프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성)
2024. 1. 15. 09:19ㆍ프론트엔드
1. 텍스트 관련 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 속성</title>
<style>
.deco1{text-decoration: none;}
.deco2{text-decoration: underline;}
.deco3{text-decoration: overline;}
.deco4{text-decoration: line-through;}
.transform1{text-transform: none;}
.transform2{text-transform: capitalize;}
.transform3{text-transform: uppercase;}
.transform4{text-transform: lowercase;}
</style>
</head>
<body>
<div class="deco1">안녕하세요. 선 없음</div>
<div class="deco2">안녕하세요.밑줄</div>
<div class="deco3">안녕하세요. 윗줄</div>
<div class="deco4">안녕하세요. 취소선</div>
<div class="transform1">hello World.</div>
<div class="transform2">hello World.</div>
<div class="transform3">hello World.</div>
<div class="transform4">hello World.</div>
</body>
</html>2. 텍스트 그림자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 그림자</title>
<style>
[class^=shadow]{
font-weight: bold;
font-size: 30px;}
.shadow1{
text-shadow: 3px 0px 0px red;
}
.shadow2{
text-shadow: 0px 3px 0px red;
}
.shadow3{
text-shadow: 3px 3px 0px red;
}
.shadow4{
text-shadow: 3px 3px 5px red;
}
.shadow5{
text-shadow: 0px 0px 3px black;
color: white;
}
.shadow6{
text-shadow: 1px 1px 3px black;
color: white;
}
.shadow7{
text-shadow: 0px 0px 3px black, 2px, 2px, 3px, blue;
color: white;
}
</style>
</head>
<body>
<div class="shadow1">Hello World</div>
<div class="shadow2">Hello World</div>
<div class="shadow3">Hello World</div>
<div class="shadow4">Hello World</div>
<div class="shadow5">Hello World</div>
<div class="shadow6">Hello World</div>
<div class="shadow7">Hello World</div>
</body>
</html>3. 공백 처리 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공백 처리 속성</title>
<style>
[class ^= box] {
width: 200px;
border: 1px solid black;
font-size: 20px;
}
.box1{white-space: normal;}
.box2{white-space: nowrap;}
.box3{white-space: pre;}
.box4{white-space: pre-line;}
.box5{white-space: pre-wrap;}
</style>
</head>
<body>
<div class="box1">안녕하세요. 제 이름은 홍길동 입니다.
만나서 반갑습니다.</div>
<div class="box2">안녕하세요. 제 이름은 홍길동 입니다.
만나서 반갑습니다.</div>
<div class="box3">안녕하세요. 제 이름은 홍길동 입니다.
만나서 반갑습니다.</div>
<div class="box4">안녕하세요. 제 이름은 홍길동 입니다.
만나서 반갑습니다.</div>
<div class="box5">안녕하세요. 제 이름은 홍길동 입니다.
만나서 반갑습니다.</div>
</body>
</html>4. 글자 간격 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 간격 속성</title>
<style>
[class ^= box]{font-size: 20px;}
.box2{ letter-spacing: -1.5px;}
.box3{ word-spacing: -5px;}
</style>
</head>
<body>
<div class="box1">안녕하세요. 만나서 반갑습니다.</div>
<div class="box2">안녕하세요. 만나서 반갑습니다.</div>
<div class="box3">안녕하세요. 만나서 반갑습니다.</div>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 프론트엔드 2일차 CSS(테두리 관련 속성, 박스 그림자, 여백, position, visivility, z-index, float) (1) | 2024.01.15 |
|---|---|
| 프론트엔드 2일차 CSS(문단 관련 속성, 말줄임, 목록 관련 속성, 크기 속성, display) (1) | 2024.01.15 |
| 프론트엔드 1일차 HTML(폼 관련 태그) (2) | 2024.01.10 |
| 프론트엔드 1일차 HTML(멀티 미디어 관련 태그, 하이퍼 링크 태그) (0) | 2024.01.10 |
| 프론트 엔드 1일차 HTML(표 관련 태그, 영역 관리 태그) (0) | 2024.01.10 |