<a> : 하이퍼링크, 책갈피, 자바스크립트로 주로 사용된다
<a 예제1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step10_anchor.html</title>
</head>
<body>
<h1>a(anchor) 요소는 하이퍼 링크, 책갈피, javascript 등을 수행할때 사용한다.</h1>
<a href="hello.html">눌러보셈</a>
<a href="https://daum.net">daum 으로 이동</a>
<a href="https://naver.com">naver 로 이동</a>
<!-- 이미지에 링크 걸기 -->
<a href="hello.html"><img src="images/kim1.png"></a>
<!--
inline 요소는 원래 block 요소를 자식요소로 가질수 없다
단 a 요소만 예외적으로 div 같은 블럭요소를 자식요소로 가질수 있다.
-->
<a href="hello.html">
<div>
<h3>어쩌구 저쩌구...</h3>
<p>
<img src="images/kim1.png">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus amet nam quam vero. Perferendis, corporis sequi amet ex nam debitis accusantium dolorem modi aut ullam cumque? Velit fuga corporis corrupti.
</p>
</div>
</a>
</body>
</html>
1) 하이퍼링크
- 텍스트는 innerText가 출력되며, 이미지에도 링크 걸기 가능
- <a href="(링크)"> 형태로 작성됨
- inline 요소는 원래 block 요소를 자식요소로 가질 수 없지만,
a 요소만 예외적으로 div 등을 자식요소로 가질 수 있음(div의 어디를 클릭해도 이동할 수 있도록)
<a 예제2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step10_anchor2.html</title>
<style>
/*
특정 div 를 가운데 정렬하는 방법
1. width 를 결정한다.
2. 좌우 마진을 auto 로 설정하면 좌우 마진이 같게 설정되어서 가운데 정렬된다.
*/
.container{
width: 768px;
margin-left: auto;
margin-right: auto;
}
.spacer{
height: 500px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="container">
<h1>동일한 페이지 내에서의 이동(책갈피)</h1>
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
</ul>
<div class="spacer"></div>
<p id="one">one Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum ut, debitis vitae error est nisi dolorum libero dignissimos voluptatibus ea id asperiores placeat modi tempore mollitia quam voluptates inventore nulla?</p>
<div class="spacer"></div>
<p id="two">two Lorem ipsum dolor sit amet consectetur adipisicing elit. At assumenda neque facere voluptatem reiciendis doloribus vitae beatae necessitatibus quasi et? Nemo vel obcaecati expedita debitis excepturi error, inventore ea vitae.</p>
<div class="spacer"></div>
<p id="three">three Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita nisi excepturi voluptates impedit, totam nihil veniam earum nostrum libero laudantium repudiandae temporibus. Provident architecto praesentium incidunt, molestiae at fugiat porro?</p>
<div class="spacer"></div>
</div>
</body>
</html>2) 책갈피
- 같은 페이지 내에서의 책갈피. 클릭 시 id 걸어놓은 위치로 이동시키는것
- 리스트 안에 링크를 <a href="#id"> 형태로 만들어 이동할 지점(<p id="">)과 연결
<li><a href="#one">one</a></li>
- div를 가운데 정렬하려면 폭을 결정하고 좌우 마진을 똑같이 주면 된다. {margin: auto;}
(div는 원래 block element이므로 행 전체를 사용하지 않도록 먼저 바꾸어주어야 함)
- .container 클래스로 묶어서 클래스에 margin을 지정한 형태
- 컨텐츠를 단순히 body 안에 넣지 않고 container 안에 넣어서 배치하는 경우가 많다.
<a 예제3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>anchor 의 또 다른 기능</h1>
<a href="javascript:alert();">javascript 실행하기</a>
<a href="tel:010-1111-2222">전화 걸기</a>
<a href="mailto:aaa@naver.com">이메일 보내기</a>
</div>
</body>
</html>3) javascript
javascript:[ ] :링크를 누를때마다 javascript 실행. javascript의 영역
onclick="[ ]" : 버튼을 클릭할때마다 실행되는 javascript의 영역
- <a href="javascript:alert();"> : 링크를 누를때마다 알림 실행
- <a href="tel:010-1111-2222"> :모바일 화면에서 전화버튼 누르면 자동으로 폰 어플에 전달됨
- <a href="mailto:aaa@naver.com">: 기본 메일 어플리케이션이 실행됨
[참고]
비주얼 스튜디오 코드에 emmet이 내장되어있음.(https://emmet.io/)
https://docs.emmet.io/cheat-sheet/ 에 들어가서 각종 작성 팁들을 볼수있다.
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(7)/javascript 기초 : dataType (1) | 2022.10.06 |
|---|---|
| 2일차(6)/Javascript 기초 (0) | 2022.10.06 |
| 2일차(4)/HTML 기초 : form(2) (0) | 2022.10.06 |
| 2일차(3)/HTML 기초: form(1) (0) | 2022.10.06 |
| 2일차(2)/HTML 기초 : table (0) | 2022.10.06 |