5. 텍스트 스타일
페이지 정보
작성자 관리자 댓글 0건 조회 1,273회 작성일 22-01-06 19:35본문
5. 텍스트 스타일
실습 : textstyle.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 스타일</title>
</head>
<body>
<header>
<h1>텍스트 스타일 적용하기</h1>
</header>
<p id="p1">폰트 스타일 1</p>
<p id="p2">폰트 스타일 2</p>
<p id="p3" style="font-weight:normal">폰트 스타일3</p>
<p id="p4">동해물과 백두산이 마르고 닳도록 하느님이</p>
<p id="p5">이 패러그라프는 오버플로우를 연습하는 단락입니다.</p>
<strong>폰트 스타일</strong>
<h1 id="h1">HTML 5</h1>
<h1 id="h2">SHADOW</h1>
</body>
</html>
실습 : textstyle.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 스타일</title>
<style type="text/css">
p {
font-weight:bold;
}
</style>
</head>
<body>
<header>
<h1>텍스트 스타일 적용하기</h1>
</header>
<p id="p1">폰트 스타일 1</p>
<p id="p2">폰트 스타일 2</p>
<p id="p3">폰트 스타일3</p>
<p id="p4">동해물과 백두산이 마르고 닳도록 하느님이</p>
<p id="p5">이 패러그라프는 오버플로우를 연습하는 단락입니다.</p>
<strong>폰트 스타일</strong>
<h1 id="h1">HTML 5</h1>
<h1 id="h2">SHADOW</h1>
</body>
</html>
실습 : 스타일 수정하기
<style type="text/css">
p {
font-weight:bold;
font-family:"돋움";
}
strong{
font:15pt "굴림" bold;
}
</style>
다음과 스타일을 수정한다.
<style type="text/css">
p {
font-weight:bold;
font-family:"돋움";
}
strong{
font:15pt "굴림" bold;
}
#p1 {
text-align:left;
}
#p2{
text-align:right;
}
#p3{
text-align:center;
}
#p4{
text-align:justify;
}
</style>
다음과 같이 스타일을 수정한다.
<style type="text/css">
p {
font-weight:bold;
font-family:"돋움";
}
strong{
font:15pt "굴림" bold;
}
#p1 {
text-align:left;
}
#p2{
text-align:right;
}
#p3{
text-align:center;
}
#p4{
text-align:justify;
}
#h1{
text-shadow:2px 2px 3px #f00;
}
#h2{
text-shadow:0px 0px 4px #ccc, 0px -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -19px 18px #f20;
}
</style>
다음과 같이 스타일을 수정한다.
<style type="text/css">
p {
font-weight:bold;
font-family:"돋움";
}
strong{
font:15pt "굴림" bold;
}
#p1 {
text-align:left;
}
#p2{
text-align:right;
}
#p3{
text-align:center;
}
#p4{
text-align:justify;
}
#h1{
text-shadow:2px 2px 3px #f00;
}
#h2{
text-shadow:0px 0px 4px #ccc, 0px -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -19px 18px #f20;
}
#p5{
white-space:nowrap;
width:200px;
text-overflow:ellipsis;
overflow:hidden;
text-decoration:overline underline;
text-indent:20px;
letter-spacing:1px;
word-spacing:10px;
}
</style>
댓글목록
등록된 댓글이 없습니다.