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

+ Recent posts

티스토리툴바