< a 태그 >
- a 태그 혹은 앵커(Anchor) 태그는 아래 목적 중 하나 이상의 목적으로 사용한다.
1. 의미없는 단순 텍스트를 담는 용도
2.다른 페이지로의 링크(Link)를 걸기 위한 용도.
3. 페이지 내 특정 위치를 지정하기 위한 용도.
- 속성
- href : Hypertext Reference, 해당 a 태그를 클릭하면 이동할 페이지의 주소를 속상 값으로 명시한다.
- target : 해당 링크를 어느 위치에서 열지에 대한 설정이고, 그 값은 아래 중 하나이다.
- "_self" : 현재 창/ 탭에서 연다. 기본값.
- "_blank" : 새로운 창/ 탭에서 연다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>A태그</title>
</head>
<body>
<a href="https://www.google.com">구글</a>
<a href="https://www.naver.com" target="_blank"><네이버></a>
<a>아무 의미 없음</a>
</body>
</html>< b 태그 >
- b 태그 혹은 볼드(Bold) 태그는 글씨를 굵게하는 목적으로 사용한다.
- 시멘틱(Sementic) : 없음
- Strong 태그와 같이 보기
< strong 태그 >
- 생긴건 b 태그와 같지만 시멘틱이 있다.
- 시멘틱 (Sementic) : 있음
- b 태그와 같이 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>B태그</title>
</head>
<body>
<a>hihi</a>
<b>hihi</b>
<strong>hihi</strong>
</body>
</html>< br 태그 >
- br 태그 혹은 브레이크(break) 태그는 텍스트를 개행하기 위해 사용한다.
- 절대로 레이아웃/ 디자인 목적으로 사용하지 않는다.
- 시멘틱(Sementic) : 없음
< div 태그 >
- 단순히 구획을 나눌때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 없음
< span 태그 >
- 단순히 구획을 나눌때 사용한다.
- 한 줄을 다 차지하지 않는다.
- 시멘틱 : 없음
< main 태그 >
- 문젓의 주된 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
-시멘틱 : 있음
< nav 태그 >
- 구획을 나눌때 사용한다.
- nav(Navigator) 태그는 서로 연관있는 링크를 모아놓을때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
< header 태그 >
- 구획을 나눌때 사용한다.
- 문서의 상단 정보(로그인 폼, 검색창, 로고, 메뉴 등) 를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
< footer 태그 >
- 구획을 나눌 때 사용한다.
- 문서의 하단정보(저작권, 사업자 정보, 연락처 등)를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱: 있음
< section 태그 >
- 구획을 나눌때 사용한다.
- 사이트에서 분리하면 의미가 없어지는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱: 있음
< article 태그>
- 구획을 나눌때 사용한다.
- 사이트에서 분리해도 의미가 있는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
< aside 태그 >
- 구획을 나눌때 사용한다.
- 문서의 부수적인 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
'Front > HTML | CSS' 카테고리의 다른 글
| [HTML] HTML이란? (1) | 2023.01.30 |
|---|---|
| [HTML] tag 모음3 (2) | 2023.01.30 |
| [HTML] tag 모음 2 (1) | 2023.01.29 |
| [HTML] HTML 기본 구조 (0) | 2023.01.29 |
| [HTML] 리소스 디렉토리 구조 (0) | 2023.01.29 |