<body>
<a href="https://google.com" target="_blank">Google</a>
<br>
<a href="./README.md" download>README.md</a>
<br>
<a href="./images/aaa.jpg" download> Image download</a>
</body>a {
font-weight: bold;
width: 100px;
line-height: 40px;
height: 40px;
border: 1px solid black;
border-radius: 6px;
display : block;
text-align: center;
}
a:hover{
background: orange;
}a 태그를 스타일링하고 기능을 추가하였다.
class와 id는 사용방식은 비슷하지만 뜻이 다르다. class는 별칭이고 별명이고 id도 마찬가지로 별칭이고 별명이다. 하지만 고유해야한다.
예를들어 밑에 코드를 보면된다.
<h2 class = "title1">제목1</h2>
<h2 class = "title1">제목2</h2>
<h2 class = "title1">제목3</h2>
<!--다음과 같이 class는 중복해서 사용이 가능하다--><h2 id = "title1">제목1</h2>
<h2 id = "title1">제목2</h2>
<h2 id = "title1">제목3</h2>
<!--하지만 아이디는 이렇게 중복되면 안된다. 고유해야하기 때문이다.-->
해당 아이디로 클릭시 이동하는 방법
<body>
<ul>
<li><a href="#title1">제목1</a></li>
<li><a href="#title2">제목2</a></li>
</ul>
<h2 id = "title1">제목1</h2>
<h2 id = "title2">제목2</h2>
<h2 id = "title3">제목3</h2>
</body>제목1을 클릭시, id가 title1인 제목1로 이동하게 된다. 그리고 주소에도 #title1이 추가가 되면서 이동이 된다.
'HTML > 요소' 카테고리의 다른 글
| 인라인 텍스트 - B, MARK, EM, STRING, I 1 (0) | 2020.12.28 |
|---|---|
| 인라인 텍스트 - ABBR (0) | 2020.12.28 |
| 인라인 텍스트 - A 1 (0) | 2020.12.28 |
| BODY 내 구조 개념 --> 문자 콘텐츠 (BLOCKQUOTE) (0) | 2020.12.28 |
| BODY 내 구조 개념 --> 문자 콘텐츠 (PRE) (0) | 2020.12.28 |