3일 차 2번 글이 너무 길고 적응하기 힘들었을 테니 이번 글은 정말 간단하게 HTML의 하이퍼링크를 추가시켜주는 태그를 소개만 할 생각이다.
여러분들이 꺼무위키같은 곳을 이용해봤다면 글자를 누르는 순간 새로운 창으로 이동하는 경험을 해봤을 것이다.
이런 식으로 글자를 누르면 해당 링크로 이동시켜주는 역할을 하는 친구를 하이퍼링크라 하며 우리는 이를 자유자재로 추가할 수 있다.
<p>
I will acheve this goal by diving into more learning resources.
</p>위 코드를 이용하며 하이퍼링크를 추가시키는 방법을 간단히 알아볼 것이다.
본문 안에 <a hrref=""> </a>
태그를 추가해주고 이 태그 사이에 링크를 입력해주면 된다.
<p>
I will acheve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>위와 같이 추가하면 하이퍼링크 달기는 끝이 난다!
그런데 자세히 보면 태그 안에 또 새로운 태그가 달려있는 걸 확인할 수 있다.
HTML의 수많은 태그 중에서는 태그 안에 또 다른 태그를 넣을 수 있는 게 있고 없는 게 있는데 하이퍼링크의 태그 <a>는 태그 속 태그가 가능한 기능 중 하나이다.
하이퍼링크를 작성한 코드를 기존 코드에 추가시켜보겠다
<html>
<head>
<style>
h1 {
font-family: sans-serif;
text-align: center;
color: rgb(255, 251, 0);
}
p {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
</style>
</head>
<body>
<h1>Sia Challenge for Sunday, Noveber 13th</h1>
<p>
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
<p>
I will acheve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>
</body>
</html>
이상으로 오늘의 포스팅을 마치겠다!
'100일만에 개발자 되기!' 카테고리의 다른 글
| 4일차(2) : 외부 파일에 CSS코드 저장하기 (0) | 2022.11.17 |
|---|---|
| 4일차(1) : 내가 만든 사이트에 이름을 붙이자! (0) | 2022.11.17 |
| 3일차 (2) : 코딩을 더 구조적으로, 더 보기쉽게, 더 간단하게! (0) | 2022.11.13 |
| 3일차 (1) : 텍스트 컬러를 내 마음대로! (0) | 2022.11.13 |
| 2일차 (2) HTML의 태그와 CSS. (2) | 2022.11.12 |