<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>test2</title>
<style>
p{
color : red;
border : 2px solid #C8C8FF; /* color 16진수 줄때 #을 앞에 붙인다*/
font-size : 20px;
margin : 50px;
padding : 50px 100px;
}
.pp1{
color : blue;
}
#pp2{
color : green;
}
pre{
background-color : skyblue;
font-sizw : 20px;
border : 3px solid blue;
margin : 50px 100px; /* margin :테두리의 바깥쪽 여백 (위아래 50, 좌우 100) */
padding : 20px; /* padding :테두리의 안쪽 여백 */
}
</style>
</head>
<body>
<p class="pp1">무궁화 꽃이 피었습니다</p>
<p id="pp2">무궁화 꽃이 피었습니다</p>
<p>무궁화 꽃이 피었습니다</p>
<p>무궁화 꽃이 피었습니다</p>
<p>무궁화 꽃이 피었습니다</p>
<p>무궁화 꽃이 피었습니다</p>
<p>무궁화 꽃이 피었습니다</p>
<pre> <!-- 서식 그대로 출력 -->
진달래꽃
나 보기가 역겨워
가실 때에는
말없이 고이 보내 드리우리다
영변에 약산
진달래꽃
아름 따다 가실 길에 뿌리우리다
가시는 걸음걸음
놓인 그 꽃을
사뿐히 즈려밟고 가시옵소서
나 보기가 역겨워
가실 때에는
죽어도 아니 눈물 흘리우리다
</pre>
무궁화 꽃이 피었습니다
</body>
</html>
<주석정리>
◾ <meta charset = "utf-8"> 이클립스에서 가져가서 실행할때 한글 안깨지게 함
◾ border : 2px solid #C8C8FF; /* color 16진수 줄때 #을 앞에 붙인다*/
◾ margin : 50px 100px; /* margin :테두리의 바깥쪽 여백 (위아래 50, 좌우 100) */
◾ padding : 20px; /* padding :테두리의 안쪽 여백 */
◾ <pre> <!-- 서식 그대로 출력 -->
❗ 실행
