반응형
<a href="사이트 주소">텍스트 문구 or img src 사용</a> : anchor. 이하의 항목으로 이동할 것이다.
hypertext reference. 하이퍼링크(웹사이트 주소)
특정 문구나 이미지에 사이트 링크 만들기.
<a href="사이트 주소" target="blank"> : target. 새 창에 넣을 수 있음.
id="id 이름" : 해당 코드에 아이디 부여. 1개씩만 있어야 함.
<a href="#id 이름"> : 해당 아이디를 가진 코드가 있는 곳으로 이동.
class="class 이름" : 해당 코드에 아이디 부여. 여러번 사용하여 그룹화 가능.
Example 1 - 기존 사이트 연결
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>링크만들기</title>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
네이버 사이트 가기
</a>
<br>
다음 사이트 가기
</a>
<h1>이미지 링크만들기</h1>
<img src="images/pf.png" alt="개인 블로그로 이동">
</a>
</body>
</html>
Example 2 - 기존 사이트 연결
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>페이지 메뉴</title>
</head>
<body>
<h1>표절, 패러디, 오마주의 차이점</h1>
<p>법률용어는 아니지만 작품에 대해 표절시비 건이며 연예계, 예술계를 막론하고 거론되는 단어를 구분해야 합니다.</p>
<ul id="menu">
<li><a href="#content1">표절</a></li>
<li><a href="#content2">패러디</a></li>
<li><a href="#content3">오마주</a></li>
</ul>
<h2 id="content1">표절</h2>
<p>타인의 작품을 베껴 만든 것을 자신이 만들어 낸 것처럼
<br>세상에 발표하는 것을 말합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">패러디</h2>
<p>기존 작품의 특정요소를 차용하되 풍자적, 해학적인 요소로 웃음을 유발합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">오마주</h2>
<p>단어 자체가 존경과 존중을 의미합니다. 작품을 존중하여 비슷하게 표현합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>
TIP 이미지 경로 줄여 쓰기(DW 사용시)
: manage server로 파일 설정 후, 한 단계 상위 폴더의 파일 사용하기 = ../ 를 경로 앞에 붙여주면 됨.
반응형
'html+CSS+JS > html+CSS' 카테고리의 다른 글
| [html/기초] 기입창 종류 (input, text, checkbox, select 등) (0) | 2019.06.20 |
|---|---|
| [html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend) (0) | 2019.06.19 |
| [html/기초] 이미지 관리 (img src, figure, figcaption) (0) | 2019.06.18 |
| [html/기초] 표만들기 (table, tr, th, td, caption, colgroup) (0) | 2019.06.17 |
| [html/기초] 항목나열 (0) | 2019.06.17 |
