하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

5. 텍스트 스타일

페이지 정보

작성자 관리자 댓글 0건 조회 543회 작성일 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>



1.PNG



실습 : 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>



2.PNG



실습 : 스타일 수정하기


<style type="text/css">

p {

font-weight:bold;

font-family:"돋움";

}


strong{

font:15pt "굴림" bold;

}

</style>



3.PNG



다음과 스타일을 수정한다.


<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>



4.PNG


다음과 같이 스타일을 수정한다.


<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>



5.PNG



다음과 같이 스타일을 수정한다.


<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>



6.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.