티스토리 뷰

Web/HTML

[html] a 태그

HAN_PY 2022. 1. 8. 10:10
반응형

Links(<a> tag)

링크를 달 때는 a 태그를 주로 사용한다. <a>는 "anchor"의 줄임말이다.

 

<a href="https://www.google.com/">구글</a>

이때 핵심은 https://를 꼭 적어줘야 한다. href 안에 이동할 주소를 적어준다.

위의 내용은 우리는 href를 통해 기존의 존재하는 네이버나, 구글과 같은 페이지 이동을 위해 사용한다. django, larabel, sping, react 등의 내부 view를 사용하는 경우에는 달라 질 수 있다.

 

 

title 속성

<a href="https://www.google.com/" title="구글 단어를 누르면 Google로 이동합니다.">구글</a>

title에 적은 글에 마우스를 가져다 대면 정보가 뜬다.

 

 

 

 

href="#"

<a href="#">링크</a>
  • 링크 설정은 귀찮은데 관련 모양은 잡아야 하는 경우에 #을 붙여준다.
  • 눌러도 페이지 이동이 일어나지 않는다.

 

 

 

아래는 h1, img a 태그를 넣은 코드이다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
  <body>
    <h1>Hanpy</h1>
    <img src="url"/>
    <a href=""></a>
  </body>
</html>

 a tag에서 알 수 있듯이 공백은 있으면 안 된다. 그리고 " "나 ' ' 중에 아무거나 적어도 된다.

 

 

 

새로운 페이지로 열기

<a href="https://www.naver.com" target="_blank" title="새창으로 네이버 이동">네이버</a>
  • 네이버라는 단어를 누르면 네이버 웹사이트로 이동을 하는 코드이다.
  • target="_blank" 는 현재 웹이 아닌 새로운 웹을 열어서 이동하게 한다.
  • 접근성 고려 ) title은 해당 링크를 클릭했을 때 어떤 일이 발생하는지 적어준다. 시각장애자를 좀 더 편하게 웹을 사용할 수 있도록 만들 수 있다.

 

 

 

a태그에 효과 주기

# html의 예
<p>This is a paragraph of text. In the text is a <span>span element</span> and also a <a href="https://example.com">link</a>.</p>

 구글에서 검색 후 보고 싶은 내용을 눌렀다면, 그 이후에는 색표시가 되는 것을 알 수 있다. 이러한 것들을 적용하기 위해서 css를 사용할 수 있다. 적용하는 예는 아래와 같다.

 

# CSS의 예
a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}
  • link는 글자를 핑크로 바뀌 준다
  • visited는 방문 시 색을 녹색으로 바꿔준다.
  • hover은 마우스를 대면 밑줄이 없어진다.

 

반응형

'Web > HTML' 카테고리의 다른 글

HTML에서 javascript 동작 순서 기초 정리  (0) 2023.02.05
[html] form 태그 기초  (0) 2021.12.30
[html] 표(테이블) 만들기  (0) 2021.12.24
[html] 비디오(mp4) 영상 태크  (0) 2021.12.19
[html] 이미지 태그 기초  (0) 2021.12.16
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함