a태그 : a태그, 앵커태그, 링크태그 라고 함
링크를 연결해주는 태그
inline 레벨
기본 글자색 파랑, 밑줄 파랑
히스토리가 남아있으면 보라색으로 표시
a태그용 css를 별도로 만들어서 색, 밑줄들을 관리/
<a href="경로"> 경로이름 </a>링크태그는 메뉴에도 쓰인다 (누르면 다른 화면으로 넘어가야 하니까)
경로입력할 때 http나 https 입력 필수!
https는 암호화해서 내용을 넘기기 때문에 http보다 안전하다.
https를 사용하려면 ssl인증서가 필요함. 그래서 해당 링크가 https인지 확실치 않다면 그냥 http로 연결
- 속성
- 필수속성. href : 클릭했을 때의 이동경로.
- 서버상의 경로(img 때와 동일. 로컬)
- 웹상의 경로(img 때와 동일. )
- 페이지 내부이동 - #이동할 곳의 id (스크롤 이동. ex) top)
이동할 경로가 없는 경우 그냥 #만 걸어둔다. -> 임시링크
- 옵션속성
- target : 페이지 이동시 현재창에서 열지 새탭에서 열지 결정.
사용자 편의성을 극대화시켜줌
_self : 기본값, 현재창
_blank : 새탭에서 링크 열림 - wai-aria
- aria-label="" : 각 태그에 속성으로 삽입. 정보를 보조기기에 제공(alt같은 것)
이걸 쓰면 ir방식(글 넣고 indent로 빼는 것) 안써도 됨.
- aria-label="" : 각 태그에 속성으로 삽입. 정보를 보조기기에 제공(alt같은 것)
- target : 페이지 이동시 현재창에서 열지 새탭에서 열지 결정.
- 필수속성. href : 클릭했을 때의 이동경로.
inline레벨 안에 inline레벨을 넣는 건 별로 좋지 않음.
inline(a태그)안에 inline(img태그) 넣는 건 어쩔 수 없고, 문제는 생기지 않지만 block(div태그)로 img를 감싸서 하는 것이 좋음
부모태그와 자식태그가 같으면 안됨.
구조 깨짐
a태그, p태그 특히 주의!
div태그와 span은 부모태그와 자식태그가 같아도 구조 깨지지 않음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.naver.com" target="_slef">네이버</a>
<a href="https://www.daum.net" target="_blank">다음</a>
<br>
<a href="#">현재페이지 어딘가로 이동</a>
<a href="https://www.naver.com" target="_slef">
<img src="./img/1.jpg" alt="">
</a>
</body>
</html>페이지 내부 이동
페이지 내부이동시 주의사항
a태그의 href에 '#이동할요소id값/' 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{margin: 0;}
a{font-size: 30px;}
.sec{
width: 100%;
height: 100vh;
background-color: pink;
font-size: 100px;
font-weight: 900;
}
</style>
</head>
<body>
<a href="#sec1">menu1</a>
<a href="#sec2">menu2</a>
<a href="#sec3">menu3</a>
<a href="#sec4">menu4</a>
<div id="container">
<div id="sec1" class="sec">sec1</div>
<div id="sec2" class="sec">sec2</div>
<div id="sec3" class="sec">sec3</div>
<div id="sec4" class="sec">sec4</div>
</div>
</body>
</html>a태그는 다 지우고 새로 그리니까 top버튼만들 때 href id값 안줘도됨(물론 정석은 id값 주는것)
최상단 광고배너를 넣을 때는 id값 안넣는게 좋다.
헤더 id잡고 만들었다가 광고배너까지 안올라가는 상황이 나올 수도 있으니까
꽉 찬 link
display: block; 주고 width, height주면 된다.
link를 넣을 때
눈에는 보이지 않지만 잡혀있는 공간이 있을 수 있으니 a태그는 따로 준다.
<style>
.logo{
width: 300px;
height: 100px;
background: url('../img/google_logo.jpg') no-repeat center /contain;
margin: 0 auto;
}
a{
display: block;
width : 100%;
height : 100%;
text-indent : -999px;
}
</style>
<div class="logo">
<a href="#">로고</a>
</div>text-indent -999px 해서 왼쪽으로 빼야함.
오른쪽으로 빼면 스크롤생김.
- text-indent는 블록레벨안에 있는 인라인레벨의 위치를 변경하는 것
- 그래서 display: block; 을 꼭 주고 indent로 내용 빼야함.
input은 쓸 때 없는 padding값이 들어있게 돼서 width 100% 주면 넘치게 되니 box-sizing: border-box; 를 써야 한다.
기타
-
a태그 사용할 때 화면을 싹 다 지우고 빠른 속도로 다시 그려준다
(내부 페이지 이동도 마찬가지)
그래서 깜빡하는 거임.
부드럽게 이동하는 효과를 줄 수가 없다 > 주려면 스크립트 줘야 함 -
a태그(인라인)안에 div(블록)일 때 a태그의 높이가 0이 될 때가 있다. (영역을 못잡고 있다)
(인라인 안에는 블록을 잡지 않는다. )
하지만 a태그는 특별하게 높이는 못잡아도 구조만 잘 잡아놓으면 기능적인 부분은 작동을 한다. (해당영역을 누르면 링크가 작동한다. ) -
link는 _blank(새탭에서 열림)로 하는 것이 좋다. 특히 다른 외부링크(ex. 유튜브)로 가서 보다가 타 업체로 넘어가는 경우가 있는데 self로 해놓으면 우리 링크는 끝나는 반면 blank로 해놓으면 그래도 탭이 남아있어서 다시 돌아올 확률이 있기 때문이다. (ux적인 문제)
-
a태그의 사이즈를 주지 않아도 괜찮긴 하다. 마우스커서 영역은 자식만큼 인식은 된다. 하지만 정석은 block레벨에 영역을 잡는 것이긴 하다.
