Html 태그 - 시맨틱 태그 및 기타 태그
시맨틱 태그
- 시맨틱 태그는 웹페이지의 공간을 분리해 준다. 공간마다 각각의 역할이 있다.
- 사용하여도 레이아웃 적으로는 변하는 것이 없다. 하지만 컴퓨터(검색 엔진 ,등...)는 이 시맨틱 태그를 읽음으로써 공간을 구분 하여 처리할 수 있다.
( ex) 제목 부분을 읽어서 어느 내용의 글인지 판단 )
[ 코 드 ]
<!DOCTYPE html>
<html lang=kr>
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
</section>
<article>
</article>
<div style="background:green">텍스트</div>
<span style="background:green">텍스트</span>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
- header : 보통 웹 페이지에서 상단 부분의 배치된다. 주로 페이지 제목, 로고나 아이콘, 페이지의 관한 간단한 설명, 네비게이션을 포함한다.
- nav : 네비게이션 역할을 한다. 즉, 해당 페이지의 목차(index) 같은 역할을 한다. 네비게이션은 보통 링크들을 포함하는 리스트로 만들어 진다.
- section : 글 내용을 세부적인 내용에 따라 구분할 때 사용한다. 책으로 표현한다면 1장(Chapter, Part)를 나타낸다. 한 section은 시작으로 <h1>~<h6>헤딩 태그를 사용하여서 섹션의 주제를 표현하는 것이 좋으며 하나의 헤딩 태그만을 사용하여서 주제를 명확하게 해주어야 한다.
- article : section에서는 페이지의 본문을 나타냈었다면 article은 section의 내용을 보조해주는 내용들을 나타낸다.
- aside : 주로 페이지 본문 바깥 부분의 오른쪽이나 왼쪽의 배치된다. 페이지 본문과는 상관없는 내용이 담긴다.
- footer : 보통 웹 페이지의 하단 부분의 배치된다. 이곳에는 페이지의 저작권 정보나 저작자 정보, 관련된 문서 또는, 주소나 전화번호 등을 나타낸다.
div vs. span
- div : 스타일을 지정하거나 이벤트를 수행하기 위한 컨테이너로 사용된다.
( 결과를 보면 div는 한줄을 끝까지 채운다. 이는 block 형식이라하며 가로(한줄)를 다 채운다.)
ㄴ 시맨틱 태그가 나오기 전에는 div의 id로 시맨틱 태그를 주어서 구분하였다.
- span : div와 마찬가지로 스타일을 지정하거나 이벤트를 수행하기 위한 컨테이너로 사용된다.
( 단, div와 달리 inline 형식으로 자신의 내용만큼 크기를 설정한다.)
[ 결 과 ]
기타 태그들
[ 코 드 ]
<!DOCTYPE html>
<html lang=kr>
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<body>
<a href="#" target="_blank">링크</a>
<pre>
aaaaaa
bbbbb
cccc
</pre>
<br>
<img src="이미지 경로" alt="이미지 설명"/>
<video src="비디오 경로">
video 태그를 지원하지 않으면 출력됨
속성 : width height controls autoplay loop poster
</video>
<audio>
<source src="오디오 경로" type="audio/.mp3">
</audio>
</body>
</html>
- a : 하이퍼링크를 건다. href에 이동할 주소를 입력하고 #을 입력할 시 자신을 연다. target 속성으로 "_blank"를 주면 해 당 페이지를 새 창으로 연다.
- pre : 텍스트들을 나타내며 pre 태그 안 공백이나 개행들이 그대로 유지된다.
- img : 이미지를 보여준다. alt는 이미지 위에 포커스를 주었을 때 설명을 보여주거나 이미지를 보여주지 못할 때 대신할 설명을 작성한다.
- video : 비디오 형식의 파일을 보여준다. width 속성이나 height 속성이 있어서 크기를 지정하는 등 여러가지 속성을 사용할 수 있다.
- audio : 오디오 형식의 파일을 보여준다. type으로 해당 오디오 파일의 확장명을 지정해주어야 한다.
'Html' 카테고리의 다른 글
| Html 폼(form) 요소(input) 종류 (2) (0) | 2020.03.20 |
|---|---|
| Html 폼(form) 요소(input) 종류 (1) (0) | 2020.03.20 |
| Html 특수 문자, 기호 사용 (0) | 2020.02.14 |
| html 테이블(table ) 표 만들기 (2) | 2020.02.03 |
| Html 기초 - 기본 구조, 텍스트 관련 태그들 (0) | 2020.02.01 |