step10. anchor
<h1>a(anchor) element는 하이퍼링크, 책갈피, javascript 등을 수행할 때 사용한다.</h1>
<a href="hello.html">hello.html로 이동</a>
<a href="https://daum.net">daum으로 이동</a>
<a href="https://naver.com">naver로 이동</a>
<a href="hello.html"><img src="images/01_iron_man_2.jpg"></a>
<!--
inline element는 원래 block element를 chile element로 가질 수 없다.
단, a element만 예외적으로 div 같은 block element를 chile element로 가질 수 있다.
-->
<a href="hello.html">
<div>
<h3>blah blah</h3>
<p>
<img src="images/01_iron_man_2.jpg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta alias odit rerum necessitatibus assumenda illum aliquam reprehenderit quo, harum sunt dolores, deleniti similique corrupti placeat quis sed? Neque, nam incidunt.
</p>
</div>
</a>- <anchor>는 하이퍼링크, 책갈피, javascript 등의 수행 시 사용하는 요소이다.
- 그림에도 링크를 걸 수 있다. <anchor>에 글자 대신 <img>를 자식 요소로 넣으면 이미지가 링크 자체가 된다.
- <div>를 자식 요소로 넣으면 <div>의 공간 어느 곳을 눌러도 이동하게 된다.
사실 <anchor>는 inline 요소로 사이에 block 요소를 넣을 수 없으나 <div>는 예외이다.
(ex) <span><div></div></span> (불가능) - vscode에서 lorem+tab 하면 예시 글이 작성된다.
<style>
.container{
width:768px;
margin-left:auto;
margin-right:auto;
background-color: yellow;
}
.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. Error distinctio corrupti impedit eveniet delectus at, laudantium minima quo illum sequi molestias commodi est deserunt eaque obcaecati molestiae asperiores a ad!</p>
<div class="spacer"></div>
<p id="two">two Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa odit ipsam inventore aliquid fuga incidunt odio facilis, magnam, molestiae nemo quos ea omnis ullam, laboriosam placeat facere architecto voluptas non?</p>
<div class="spacer"></div>
<p id="three">three Lorem ipsum dolor sit amet consectetur adipisicing elit. A tempore quod, ex eum, sequi fugit quo reprehenderit eius culpa voluptates non, recusandae id consectetur necessitatibus ad. Error, exercitationem! Cum, similique!</p>
<div class="spacer"></div>
</div>
</body>- 속성으로 id 대신 class를 부여할 수 있는데, id는 유일해야하지만 class는 중복이 가능하다는 점이 다르다. id의 경우 css에서 "#"으로 표기하는데, 마찬가지로 class는 "."으로 표기한다.
- 같은 page에서 누르면 가는 링크를 '책갈피' 라고 한다. 이경우 <anchor>의 href 속성에 특정 요소의 id를 "#id"의 형태로 적어주면 된다.
- margin left와 right를 auto로 하면 가운데 정렬이 된다.
틈새 공략
- div.spacer + tab : class가 spacer인 <div>를 만들어준다.
- p#two + tab : id가 two인 <p>를 만들어준다.
- p#three{three} + tab : id가 three이고 inner text가 three인 <p>를 만들어준다.
- ul>li + tab : <ul>과 <li>를 만들어준다.
- ul>li*# + tab : <ul> 안에 # 만큼 <li>를 만들어준다.
- ul>li{$}*# + tab : <ul> 안에 $를 inner text로 가지는 <li>를 # 만큼 만들어준다.
<title>Step10_anchor3.html</title>
<script>
//페이지 로딩 초기에 수행되는 javascript
alert("페이지가 로딩됩니다.");
</script>
</head>
<body>
<h1>anchor의 또다른 기능</h1>
<ul>
<li><a href="javascript:alert('당첨')">눌러보셈</a></li>
<!-- 모바일 기기에서 테스트 가능한 기능-->
<li><a href="tel:010-1111-2222">전화걸기</a></li>
<li><a href="mailto:aaa@naver.com">이메일쓰기</a></li>
</ul>
<script>
//페이지 로딩 말기에 수행되는 javascript
console.log("페이지 로딩이 완료됩니다.");//이건 검사>console 창에 찍힘.
</script>
</body>- <anchor> 안에 javascript: 가 있다면 누를 때마다 해당 javascript가 수행된다.
- 전화나 메일 등의 어플이 존재한다면, 그것에 접근하도록 만들 수도 있다.
'뒷북 정리 (국비 교육) > html' 카테고리의 다른 글
| [html] step09. form (0) | 2021.12.07 |
|---|---|
| [html] step08. table (0) | 2021.12.07 |
| [html] step05~07. ul / ol / dl (0) | 2021.12.07 |
| [html] step03~04. block / inline element (0) | 2021.12.07 |
| [html] step02. img (0) | 2021.12.07 |
댓글