font-style.html
font-style.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
p{font-style: italic}
p#txt{font-style: normal;}
</style>
</head>
<body>
<p>세계 3대 미항</p>
<p>시드니(Sydney),호주</p>
<p>리우데자네이루(Rio de Janeiro),브라질</p>
<p id="txt">나폴리(Napoles),이탈리아</p>
</body>
</html>
color.html
color.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
h1{
/* green을 200으로 지정 */
color:rgb(0, 200, 0)
}
h2{
color: blue;
}
.accent{
/* red계열을 ff로 지정 */
/* color:#ff0000; */
/* 중복되는 값 생략 가능 */
color:#f00;
}
img{
/* 오른쪽 배치 */
float:right;
/* 이미지 오른쪽에 여백 생성 */
margin-right: 10px;
}
</style>
</head>
<body>
<h1> 세계 10대 슈퍼 푸드</h1>
<img src="images/galic.jpg">
<h2>마늘(Garlic)</h2>
<p>일해백리는 마늘의 별명이다. 한가지 해가 있고,
<span class="accent">백가지</span> 이로움이 있다는 뜻이다.
</p>
<p>일해백리는 마늘의 별명이다. 한가지 해가 있고,
백가지 이로움이 있다는 뜻이다.
</p>
<p>일해백리는 마늘의 별명이다. 한가지 해가 있고,
백가지 이로움이 있다는 뜻이다.
</p>
</body>
</html>
text-decoration.html
text-decoration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<h2>>, initial-scale=1.0">
<title>Document</title>
<style>
p{
/* 줄간격 */
line-height: 1.8;
}
.edited{
/* text-decoration 속성값이 overline은 윗줄 */
/* text-decoration: overline; */
/* line-through는 취소선 */
text-decoration: line-through;
}
a{
/* none은 줄이 있는 경우 없앰. */
text-decoration: none;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>HTML5</h2>
<p>
다양한 기기로 인터넷에 접속할 수 있는 요즘,<br>
HTML5 HTML4를 공부해야 될 때입니다.
</p>
<p>
<a href="<https://html.spec.whatwg.org>" target="_blank">
<b><span class="edited">HTML5</span> 표준 규악 살펴보기</b></a>
</p>
</body>
</html>
text-transform.html
text-transform.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.trans1{
/* uppercase 영어의 소문자를 대문자로 변환 */
text-transform:uppercase;
}
.trans2{
/* 첫 글자만 대문자로 */
text-transform: capitalize;
}
.trans3{
/* text-transform 속성 값이 lowercase 는 소문자로 변환 */
text-transform: lowercase;
}
.trans4{
/* text-transform 속성 값이 none: 변환 없음 */
text-transform: none;
}
.trans5{
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Have to study</h1>
<ul>
<li class="trans1">html</li>
<li class="trans2">css</li>
<li class="trans3">jsp</li>
<li class="trans4">JQUERY</li>
<li class="trans5">AJAX</li>
</ul>
</body>
</html>
text-shadow1.html
text-shadow1.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
h1{
font-size: 100px;
font-family: "Arial Rounded MT"
}
.shadow1{
color: orange;
/* 가로 1px, 세로 1px 그림자 */
/* 번짐 정도, 그림자색은 기본값: 번짐 정보는 0, 그림자 색은 글자섹 */
text-shadow: 10px 10px;
}
.shadow2{
/* 번짐 정도 3px, 그림자색 빨간색 */
/* 음수로 하면 왼쪽에 그림자, 양수는 오른쪽 */
text-shadow: -5px 5px 3px #f00;
/* text-shadow: 5px 5px 3px #f00; */
}
.shadow3{
color:#fff;
/* 세로를 음수로 하면 위쪽에, 양수는 아래 쪽에 그림자가 생김 */
/* text-shadow: 7px 7px 5px #000; */
/* text-shadow: 7px -7px 5px #000; */
text-shadow: 7px -7px 15px #000;
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
<h1 class="shadow2">HTML5</h1>
<h1 class="shadow3">HTML5</h1>
</body>
</html>