HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>semantic(시맨틱)태그를 사용하여 블로그 만들기</title>
<link rel="stylesheet" href="css/style_2.css">
</head>
<body>
<div id="wrap">
<header id="page_header">
<h1>Star Blog</h1>
<nav>
<ul>
<li><a href="sub/1.html">최근 글</a></li>
<li><a href="sub/2.html">이전 글</a></li>
<li><a href="sub/3.html">공헌자 글</a></li>
<li><a href="sub/4.html">연락처</a></li>
</ul>
</nav>
</header>
<hr>
<section id="posts">
<article>
<header>
<h2>얼마나 많이 기록해 둬야 되겠습니까?</h2>
<p>Posted by Brain on 2024.03.25</p>
</header>
<aside>
<p>"물건을 팔 때는 거절할 기회를 주어선 안 됩니다. 고객의 상황에 맞도록 최선을 다해야 합니다."</p>
</aside>
<p>물건을 팔 때의 대원칙은, 고객이 빈손으로 돌아가게 만들면 이미 글렀다는 겁니다. 다시 오려고 하지
않을테니까요. 따라서 고객을 대할 때는 적극적인 자세를 취해야 합니다. 그렇다고 너무 오버하면 고객이 겁을 먹고 돌아가
버릴 수도 있으니 조심해야 합니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
<p id="myptag">요기요~~~ 대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
</article>
</section>
<section id="sidebar">
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
두번째 섹션 aaa bbb ccc ddd
</section>
<footer id="page_footer">
2024 Star Blog
</footer>
</div>
</body>
</html>
CSS
@charset "UTF-8";
*{
font-family: Arial, "MS Trebuchet", sans-serif;
}
body{
border: solid 0px red;
word-break : break-all;
margin: 0;
padding: 0;
}
body > div#wrap{
border: solid 1px blue;
width: 70%;
margin: 0 auto;
}
body > div#wrap > header#page_header > nav > ul{
list-style-type: none;
border: solid 0px red;
padding: 0;
}
body > div#wrap > header#page_header > nav > ul > li{
display: inline-block;
border: solid 0px gray;
width: 15%;
margin: 0 2% 0 0;
}
a{
text-decoration: none;
font-size: 15pt;
}
a:link{
color: blue;
}
a:visited{
color: blue;
}
body > div#wrap > header#page_header > nav > ul > li > a:hover{
background-color: black;
color:yellow;
font-weight: bold;
}
div#wrap > hr{
border: solid 2px blue;
margin-top: 1.5%;
}
body > div#wrap > section#posts{
border: solid 1px red;
float: left;
width: 72%;
}
body > div#wrap > section#sidebar{
border: solid 1px green;
float: right;
width: 24%;
}
body > div#wrap > footer#page_footer{
border: solid 0px orange;
clear: both;
text-align: center;
}
body > div#wrap > section#posts aside{
border: solid 0px gray;
float: right;
width: 35%;
font-size: 18pt;
font-weight: bold;
color: #b30059;
line-height: 180%;
margin-left: 3%;
margin-top: -3.5%;
}
body > div#wrap > section#posts article > p{
border: solid 0px green;
margin: 0 0 3% 0;
}
body > div#container{
border: solid 0px gray;
font-size: 20pt;
width: 50%;
margin: 5% auto;
text-align: center;
}
1.html, 2.html, 3.html, 4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>최근 글</title>
<link rel="stylesheet" href="../css/style_2.css">
</head>
<body>
<div id="container">
최근 글 입니다<br><br>
<a href="../semanticTag_2.html">홈으로</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이전 글</title>
<link rel="stylesheet" href="../css/style_2.css">
</head>
<body>
<div id="container">
이전 글 입니다.<br><br>
<a href="../semanticTag_2.html">홈으로</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공헌자 글</title>
<link rel="stylesheet" href="../css/style_2.css">
</head>
<body>
<div id="container">
공헌자 글 입니다.<br><br>
<a href="../semanticTag_2.html">홈으로</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연락처</title>
<link rel="stylesheet" href="../css/style_2.css">
</head>
<body>
<div id="container">
연락처 입니다.<br><br>
<a href="../semanticTag_2.html">홈으로</a>
</div>
</body>
</html>
정리
- ch04_semantic -> semanticTag_2.html, style_2.css, 1.html, 2.html, 3.html, 4.html
