첫번째 문서
<html>
<head>
<title>headline</title>
<meta charset="utf-8">
<style>
pre{
background : #ddadff; /*//yellow;*/
}
h1,h2,h3,h4,h5,h6{
background : #f1d4a5;
}
h1{
color : red;
}
</style>
</head>
<body>
<pre>
pre:입력형태 모습으로 출력
설명을 하기위해서 사용
h1 ~ h6 : 글의 제목을 위한 태그
h1이 가장 크고 h6 이 가진 작은 모양이다
h1~h6태그는 출력시 자동으로 줄이 바뀐다
문서의 스타일 을 위해서는
<style>태그안에서 지정한다
배경색 : background
글자색 : color
</pre>
<h1> Hello~~ HTML</h1>
<h2> Hello~~ CSS</h2>
<h3> Hello~~ JavaScript</h3>
<h4> Hello~~ jQuery</h4>
<h5> Hello~~ 홍길동</h5>
<!-- <h6> Hello~~ 진달래</h6> -->
</body>
</html>
---------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<meta charset="utf-8">
<style>
img {
width : 200px;
height : 200px;
}
</style>
<body>
김소월의 ‘진달래꽃’<br><br>
<img src="../images/진달래.jpg">
<br><br>
나 보기가 역겨워
가실 때에는
말없이 고이 보내 드리오리다
영변에 약산
진달래꽃
아름 따다 가실 길에 뿌리오리다
가시는 걸음 걸음
놓인 그 꽃을
사뿐히 즈려 밟고 가시옵소서
나 보기가 역겨워
가실 때에는
죽어도 아니 눈물 흘리오리다
</body>
</html>
-----------------------------------------------------------------------------------------------------
진달래 pre
<html>
<meta charset="utf-8">
<!-- 외부 css스타일 적용 -->
<link rel="stylesheet" href="../css/public.css">
<style>
img{
width : 200px;
height : 200px;
}
span{
font-weight : bold;
font-style : italic;
}
pre{
}
</style>
<body>
<pre>
외부 css스타일 적용
<link rel="stylesheet" href="../css/public.css">
우리가 이미 만들어놓은 기본틀을 사용한다는 것
<sup> : 윗 첨자
<sub> : 아래첨자
<span> : 일부분의 문자를 분리
글자를 굵게 강하게 볼드 : <b> <strong>
font-weight : bold;
글자를 기울임꼴 강조 이탤릭 : <i> <em>
font-style : italic;
</pre>
<pre>
김소월의 ‘진달래꽃’
<img src="../images/진달래.jpg">
<hr color='red'>
&나 보기가 역겨워
가실 "때에는"
말없이 고이 보내 드리오리다
영변에 약산
진달래꽃
아름 따다 가실 <sup>길</sup>에 뿌리오리다
가시는 걸음 걸음
놓인 그 꽃을
사뿐히 즈려<sub>밟고</sub> 가시옵소서
나 보기가 <span>역겨워</span>
가실 때에는
죽어도 아니 <span>눈물</span> 흘리오리다
</pre>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------진달래 br
<html>
<meta charset="utf-8">
<!-- 외부 css 스타일 적용 -->
<link rel="stylesheet" href="../css/public.css">
<style>
img{
width : 200px;
height : 200px;
}
b, strong{
background : pink;
}
i, em{
background : crimson;
font-size : 1.5em;
}
</style>
<body>
<pre>
외부 css스타일 적용
<link rel="stylesheet" href="../css/public.css">
img{
width : 200px;
height : 200px;
}
b, strong{
background : pink;
}
i, em{
background : crimson;
font-size : 1.5em;
}
</pre>
김소월의 ‘진달래꽃’
<br><br>
<img src="../images/진달래.jpg">
<br><br>
나 보기가 역겨워<br>
<br>
<b>가실 때에는</b><br>
<br>
말없이 고이 보내 드리오리다<br>
<br><br><br>
영변에 약산<br>
<br>
진달래꽃<br>
<br>
아름 따다 <i>가실 길에 뿌리오리다</i>
<br>
<br>
<br>
가시는 걸음 걸음<br>
<br>
놓인 그 꽃을<br>
<br>
<strong>사뿐히 즈려 밟고 </strong>가시옵소서<br>
<br>
<br>
<br>
나 보기가 역겨워<br>
<br>
가실 때에는<br>
<br>
<em>죽어도 아니 눈물 흘리오리다</em><br>
</body>
</html>
댓글
댓글 쓰기