<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>링크 만들기</h1>
<!--
a 태그를 사용하면 하이퍼링크를 만들 수 있다.
<a href="연결할 문서의 주소" target="링크내용이 표시될 위치">링크이름</a>
target의 속성값
_blank: 링크된 문서가 새로운 창이나 새로운 탭에서 열린다.
_self: 링크된 문서가 현재 창에서 열린다(기본값)
-->
<h2>프로젝트 내의 문서에 링크 연결하기</h2>
<p>
<a href="http://www.daum.net" target="_blank">다음</a>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.google.com">구글</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>한 페이지 내에서 특정 위치로 이동하는 링크 만들기</h1>
<!--
페이지의 내용이 긴 경우
각각의 섹션마다 id를 부여하고,
a태그에서 href의 속성값으로 id값을 지정하면
해당 섹션 부분으로 스크롤 점프할 수 있다.
<a href=#아이디">링크명</a>
-->
<h2>링크</h2>
<p id="menu">
<a href="#p1">IT</a>
<a href="#p2">연예</a>
<a href="#p3">스포츠</a>
</p>
<p id="p1">
23일 ...중략... 알려졌다.<a href="#menu">top</a>
</p>
<p id="p2">
22일 ...중략... 덧붙였다.<a href="#menu">top</a>
</p>
<p id="p3">
다음은 ...중략... 했다. <a href="#menu">top</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>텍스트를 강조하는 태그</h1>
<p>
해외의 ...중략... <strong>어디든 마다치 않고 발길을 옮기고 있다.</strong> 서울·경기·인천 등 ...중략... 19일 <em>서울 여의도</em>에서 만난 그는 ...중략... 말했다.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1, h2, p, ul, li {
background-color: yellow;
width: 800px;
text-align: right;
}
strong, em, b, i {
/* display: block; 인라인 엘리먼트도 블록 엘리먼트로 변경할 수 있다. */
background-color: lightgreen;
width: 300px; /* 효과 없음. 너비 조절 불가 */
}
</style>
</head>
<body>
<h1>블록 엘리먼트와 인라인 엘리먼트</h1>
<h2>블록 엘리먼트</h2>
<p>나도 블록엘리먼트야</p>
<ul>
<li>나도 블록 엘리먼트야</li>
<li>나도 블록 엘리먼트야</li>
</ul>
<h2>인라인 엘리먼트</h2>
<p>
<strong>인라인 엘리먼트</strong>로 감싸진 콘텐츠는 그 콘텐츠의 <em>너비만큼만 영역</em>을 차지한다.
</p>
</body>
</html>
