2025. 3. 19. 16:28ㆍWEB/HTML
이번 포스팅은 <a> 태그에 대해 배워본다.
<a></a>
<a> 태그가 무엇이냐?
그 정의를 확인하기 위해 검색을 통해 아래의 사이트를 방문해서 a 태그에 대해 알아봤다.
내용을 보면,
<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.
라고 되어 있다.
그렇다.
우리가 웹사이트를 이용하면서 특정 콘텐츠를 클릭할 때, 또는 검색을 통해 찾으려는 웹페이지의 목록을 클릭할 때 해당 페이지로 이동 시켜주는 역할을 하는 것이 지금 배워볼 <a> 태그이다.
위 예제를 보면 알겠지만 <a> 태그는 태그만을 사용해서는 페이지의 이동 동작을 수행할 수 없다.
<a>이동하고 싶은 페이지로 이동</a>
이런 식으로 <a> 태그와 해당 태그를 사용할 텍스트만 적어놓으면, HTML은 <a> 태그를 이용해 어느 사이트로 가고자 하는 건지를 알 수가 없는 것이다.
그래서 <a> 태그는 속성을 추가해서 이동하려는 사이트의 주소를 넣어야만 제 기능을 수행할 수 있는 것이다.
아래와 같이 사용한다.
<a href="https://ggbt.tistory.com/16"> HTML을 배워보자 페이지로 이동 </a>
위와 같이 작성하면 아래와 같이 하이퍼링크로서 사용할 수 있는 것이다.
[HTML] HTML 을 배워보자
HTML 을 배워보기로 했다.JavaScript 를 배우려니 웹과 관련한 내용들이 많아서 이왕이면 다홍치마라고, 자바스크립트를 배우면서 HTML, CSS 도 배워놓으면 좋지 않을까 해서 공부를 시작해본다. HTML
ggbt.tistory.com
여는 태그의 내부에 href의 속성값으로 이동할 사이트의 주소를 넣어줘야 한다는 점을 꼭 기억하자.
그리고 속성 중에는 target 이라는 것이 있다.
이 target의 역할은 사이트로 이동할 때 브라우저가 열리는 위치를 알려주는 역할을 한다.
TCP SCHOOL에서의 설명을 보면 target 속성의 값은 4가지가 있는데, 아래 4가지의 속성을 넣고 직접 테스트해보자.
_blank
_parent
_self
_top
아래의 코드를 넣고 테스트해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a 태그 연습</title>
</head>
<body>
<a href="https://ggbt.tistory.com/16" target="_blank">HTML을 배워보자 _blank</a><br>
<a href="https://ggbt.tistory.com/16" target="_parent">HTML을 배워보자 _parent</a><br>
<a href="https://ggbt.tistory.com/16" target="_self">HTML을 배워보자 _self</a><br>
<a href="https://ggbt.tistory.com/16" target="_top">HTML을 배워보자 _top</a><br>
</body>
</html>
vscode에 index.html 파일을 생성하고 위 사진과 같이 입력 후 링크를 클릭해봤다.
_blank는 새탭으로 사이트를 이동 시키고, 나머지 3개는 현재 탭에서 링크의 사이트가 열린다.
몇번을 눌러봐도 현재 보고 있는 탭에서 열리던데 차이점을 모르겠다.
그래서 챗GPT에게 물어봤다.
이런 대답을 받았다.
표의 설명을 보면,
_self 라는 속성값이 기본값으로,
target 속성값을 넣지 않은 경우 또는 _self 로 target 속성값을 지정한 경우에 현재 웹페이지를 보고 있는 탭에서 링크의 사이트가 열리게 된다는 것을 알 수 있다.
또한 _blank는 원래 알고 있던 것과 마찬가지로 새탭으로 링크를 열어준다.
_parent와 _top의 경우 iframe 여부에 따라 동작이 달라지는데, iframe 이라는 것이 무엇인지 지금의 나는 알지 못한다.
대충 유추해보면 페이지 내에서 다른 사이트의 내용을 보여주는 그런 것을 말하는 것 같다.
그래도 애매하니까 GPT에게 iframe을 물어봤다.
외부 콘텐츠를 페이지에 삽입하는데 사용하는 것이 iframe 이라는 것이고,
이건 <iframe> 이라는 또 다른 태그를 사용해서 페이지에 적용하는 것이다.
_parent와 _top은 이 iframe내에서 페이지를 여느냐, iframe 밖에서 페이지를 여느냐의 차이를 결정하는 속성값이라고 이해하면 될 것 같다.
iframe에 대해서는 다음에 알아보기로 하고 <a> 태그에 대해서는 여기까지.
끝.
'WEB > HTML' 카테고리의 다른 글
| [HTML] 이미지를 삽입해주는 <img> 태그를 배워보자 (0) | 2025.03.30 |
|---|---|
| [HTML] HTML 문서 안의 또 다른 HTML 문서 <iframe> 태그를 배워보자 (0) | 2025.03.25 |
| [HTML] 의미없는 태그 <div> 태그를 배워보자 (0) | 2025.03.19 |
| [HTML] 제목을 나타내는 <h1></h6> 태그를 배워보자 (0) | 2025.03.18 |
| [HTML] HTML 을 배워보자 (0) | 2025.03.12 |