이번 포스팅에서는 HTML의 링크 태그인 a태그와 목록 태그에 대해 정리해봤습니다.
저번 포스팅에서 다뤘던 HTML 태그의 전역 속성에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다!
HTML 기초 5편 - 전역 속성
이번 포스팅에서는 HTML의 모든 태그에서 사용 가능한 속성인 전역 속성에 대해 정리해봤습니다. 저번 포스팅에서 다뤘던 HTML의 이미지 태그와 컨테이너 태그에 대해 궁금하신 분은 아래를 읽어
mlngwandev.tistory.com
링크 태그 (a 태그)
- anchor (닻) 이라는 뜻으로 현재 문서에서 다른 문서로 이동할 수 있는 수단이다.
- 인라인 요소이다.
- 주로 링크 목적으로 사용된다.
- href 속성을 통해 다른 페이지, 전화번호, 이메일 주소, 다른 url로 연결 가능한 링크를 만든다.
- target 속성을 통해 현재 탭 or 새로운 탭으로 링크를 열지 설정 가능하다.
href 속성을 이용한 링크 만들기
전화번호의 경우
- < a href = "tel : 전화번호" > 표시할 내용 < /a > 으로 설정하면 된다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="tel:01012345678"> New tell-number! </a>
</body>
</html>
결과
위와 같이 파란색 하이퍼 링크가 생성된다.
하이퍼 링크를 누르면 전화를 바로 발신 가능하게 활성화 된다는 사실을 확인 가능하다.
이메일 주소의 경우
- < a href = "mailto : 이메일 주소" > 표시할 내용 < /a > 으로 설정하면 된다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="mailto:test1@test.com"> New e-mail! </a>
</body>
</html>
결과
위와 같이 파란색 링크가 생성된다.
하이퍼 링크를 누르면 해당 사용자에게 메일을 바로 발송 가능하게 활성화 된다는 사실을 확인 가능하다.
url의 경우
- < a href = "url 링크 주소" > 표시할 내용 < /a > 으로 설정하면 된다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="https://www.google.com"> Google! </a>
</body>
</html>
결과
위와 같이 파란색 링크가 생성된다.
하이퍼 링크를 누르면 해당 페이지에서 연결된 url 링크로 연결이 된다는 사실을 확인 가능하다.
현재 탭 or 새로운 탭으로 열기 설정
바로 위의 경우처럼 url링크를 자신이 보던 페이지에서 바로 전환이 되어서 번거로운 경우가 발생한다.
이는 속성을 통해 설정이 가능하다.
현재 탭으로 열기 설정의 경우
- < a href = "url 링크 주소" > 표시할 내용 < /a > 으로 설정하면 된다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="https://www.google.com" target="_self"> Google! </a>
</body>
</html>결과
위와 같이 구글 홈페이지로 이동하는 html문서를 생성한다.
그리고 하이퍼 링크를 누르게되면
위와 같이 해당 탭에서 구글 홈페이지로 이동하는 결과를 확인 가능하다.
새로운 탭으로 열기 설정의 경우
- < a target = "_blank"> 표시할 내용 < /a > 으로 설정하면 된다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="https://www.google.com" target="_blank"> Google! </a>
</body>
</html>결과
앞서 살펴봤던 html문서와 다른 부분이 없다.
WHY?
보이는 콘텐츠가 아닌 속성만 변경해주었기에 겉보기에는 변화점이 없다!
하지만 하이퍼링크를 누르게 되면
앞서 살펴보았던것과 다르게 새로운 탭에서 구글 홈페이지로 이동되는 결과를 확인 가능하다.
열기 설정 시 잊지 말아야할 부분
앞부분의 _(언더바)를 잊지 말고 입력해야 한다!
목록 태그
- 연관 있는 항목들을 나열한 것을 의미한다.
- 모두 블록 레벨 요소이다.
- 목록 요소들이 하나 하나가 <li>과 </li> 사이에 존재한다.
- 크게 두 가지로 분류된다.
순서 없는 목록 (Unordered List)
기본형
- • 으로 표현되는 목록이다.
기본 구조
< ul >
<li> 목록 요소 1 </li>
<li> 목록 요소 2 </li>
<li> 목록 요소 3 </li>
...
< /ul >
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<ul>
<h2>My favorite fruits!</h2>
<li>Apple</li>
<li>Strawberry</li>
<li>blueberry</li>
<li>banana</li>
</ul>
</body>
</html>
결과
위와 같이 • 이 자동으로 생성되며 입력한 목록 요소들이 순서대로 나타나는 사실을 확인 가능하다.
사용하기 좋은 경우
순서나 등수가 없는 경우에 사용하기 용이하다!
순서 있는 목록 (Ordered List)
기본형
- 1. ** 2. *** 3. **** ... 과 같이 앞에 숫자가 붙어 표현되는 목록이다.
기본 구조
< ol >
<li> 목록 요소 1 </li>
<li> 목록 요소 2 </li>
<li> 목록 요소 3 </li>
...
< /ol >
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<ol>
<h2>How to eat Apple?</h2>
<li>Wash apple in water</li>
<li>Cut in half</li>
<li>Enjoy :)</li>
</ol>
</body>
</html>결과
위와 같이 숫자가 앞에 자동으로 생성되며 입력한 요소들이 순서대로 나타나는 사실을 확인 가능하다.
사용하기 좋은 경우
순서나 등수가 필요한 경우에 사용하기 용이하다.
HTML에서 자주 사용되는 링크 태그인 a태그와 목록 태그에 대해 알아보았습니다.
다음 편에서는 사용자에게서 입력받는 입력요소 태그들에 대해 알아보겠습니다.
'Frontend > HTML' 카테고리의 다른 글
| HTML 기초 8편 - 또 다른 입력요소 (select, textarea, form 태그) (0) | 2023.07.11 |
|---|---|
| HTML 기초 7편 - input (입력요소) 태그 (0) | 2023.07.10 |
| HTML 기초 5편 - 전역 속성 (0) | 2023.07.08 |
| HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0) | 2023.07.07 |
| HTML 기초 3편 - 블록 요소 / 인라인 요소로 구분되는 태그 (0) | 2023.07.06 |
