[HTML] 태그

Gabriela·2023년 8월 21일
html

WEB Front-end

목록 보기
1/16
post-thumbnail

HTML

HyperText Markup Language

  • 하이퍼텍스트(링크)
  • 태그(Tag)로 구성된다.
    ∘ 기능이 정해져 있는 약속된 태그만 사용할 수 있다.
    ∘ 시작 태그 <tag>와 종료 태그 </tag>로 구성된다.
    ∘ 나 홀로 태그(단독 태그)도 있다. <tag> 또는 </tag>
    ∘ 모두 소문자로 작성한다.
    ∘ 계층 구조(부모-자식)를 가진다.

태그 형식

  • <태그이름 속성="값" 속성="값" 속성="값"></태그이름>
  • <태그이름 속성="값" 속성="값" 속성="값"/>

태그 적용 범위

  • 블록 요소 : 해당 요소의 블록(라인 전체)에 적용되는 태그, 자동으로 줄 바꿈 된다.
  • 인라인 요소 : 해당 요소의 인라인(요소 자체)에 적용되는 태그

HTML5 기본 구조

  • 선언부 : <!DOCTYPE html> 또는 <!doctype html>
  • <html> 태그 : 문서의 모든 내용을 포함하는 최상위 태그
  • <head> 태그 : 각종 헤더값을 설정하는 태그
  • <body> 태그 : 문서의 본문 내용을 포함하는 태그

단축키

  • <!-- HTML 주석 -->

  • vscode 단축키
    ① 주석 : ctrl + /
    ② 저장 : ctrl + s
    ③ 자동 완성 : ctrl + spacebar
    ④ 라인 복사 : alt + shift + 방향키(↑↓)
    ⑤ 라인 이동 : alt + 방향키(↑↓)
    ⑥ 라인 삭제 : shift + delete

기본 태그

줄 바꿈

  • <br> 또는 <br/>
  • 원하는만큼 사용할 수 있다.

수평선

  • <hr> 또는 <hr/>
  • 화면의 너비만큼 수평선을 만든다.

엔티티 코드

  • HTML 문서에서 사용하는 특수 문자
  • &로 시작하고 ;으로 끝난다.
    ∘ 작다(less than) : &lt;
    ∘ 크다(greater than) : &gt;
    ∘ 작거나 같다(less than equal) : &le;
    ∘ 크거나 같다(greater than equal) : &ge;
    ∘ 앰퍼센드 : &amp;
    ∘ 공백 : &nbsp;

제목 태그(heading tag)

  • 블록요소
  • 제목을 만드는 태그이다.
  • 글자 크기를 조정하고 글자를 굵게 표시한다.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

문단 태그(paragraph tag)

  • 블록 요소
  • 문단을 만드는 태그이다.
  • <p> </p>

형식을 갖춘 문단 태그(pre-formatted paragraph tag)

  • 블록 요소
  • 문단에 입력된 모든 요소가 그대로 나타난다.
  • 공백 문자(스페이스, 줄 바꿈)를 그대로 나타낼 때 주로 사용한다.
  • <pre> </pre>

Emmet

  • 줄여서 입력하면 원래 내용이 완성되는 기능이다.

줄임말 예시

  • html:5 (!+enter도 동일한 기능)
  • ul>li*5
  • tr>td*3

목록 태그

순서가 없는 목록 태그(un-ordered list tag)

  • 블록 요소
  • 글머리기호를 이용해서 각 목록을 만든다.

형식

  • <ul> 태그 : 모든 목록을 포함하는 태그
  • <li> 태그 : 목록을 구성하는 개별 항목을 나타내는 태그, <ul> 태그의 자식 태그

글머리기호 종류

  • <ul type="disc"> ● (디폴트, type 속성 생략 가능)
  • <ul type="circle"> ○
  • <ul type="square"> ■
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

순서가 있는 목록 태그(ordered list tag)

  • 블록 요소
  • 번호를 이용해서 각 목록을 만든다.

형식

  • <ol> 태그 : 모든 목록을 포함하는 태그
  • <li> 태그 : 목록을 구성하는 개별 항목을 나타내는 태그, <ol> 태그의 자식 태그

번호 종류

  • <ol type="1"> : 1,2,3,... (디폴트, type 속성 생략 가능)
  • <ol type="A"> : A,B,C,...
  • <ol type="a"> : a,b,c,...
  • <ol type="I"> : Ⅰ,Ⅱ,Ⅲ,...
  • <ol type="i"> : ⅰ,ⅱ,ⅲ,...
  <ol>
    <li></li>
    <li></li>
    <li></li>
  </ol>

개요 목록(description list tag)

  • 블록 요소
  • 이름과 설명을 하나의 항목으로 나타내는 태그이다.

형식

  • <dl> 태그 : 모든 목록을 포함하는 태그
  • <dt> 태그 : 목록을 구성하는 개별 항목의 이름을 나타내는 태그, <dl> 태그의 자식 태그
  • <dd> 태그 : 목록을 구성하는 개별 항목의 설명을 나타내는 태그, <dl> 태그의 자식 태그

텍스트 효과 지정하기

  • 인라인 요소
  • 블록 전체가 아니라 지정된 인라인 영역에만 적용된다.

종류

  • 굵게 ( 굵게 )
    ∘ <b></b> : bold
    ∘ <strong></strong> : 추천 (strong, 강하게)
  • 기울임 ( 기울임 )
    ∘ <i></i> : italic
    ∘ <em></em> : 추천 (emphasis, 강조)
  • 밑줄 ( 밑줄 )
    ∘ <u></u> : underline
    ∘ <ins></ins> : 추천 (insert, 삽입된 텍스트)
  • 취소 ( 취소 )
    ∘ <s></s> : strikeline
    ∘ <del></del> : 추천 (delete, 삭제된 텍스트)
  • 기타
    ∘ <mark></mark> : 형광펜
    ∘ <sup></sup> : 위첨자
    ∘ <sub></sub> : 아래첨자

⭐ 시멘틱 태그 사용을 생활화 하자!

Multimedia

이미지

  • 인라인 요소

형식

  • <img> 또는 <img/>
  • <img alt="대체텍스트" src="이미지경로">

주요 속성

  • alt : 이미지가 없는 경우 대신 나타나는 텍스트 정보
  • src : 이미지의 경로를 작성
    ∘ 절대경로 : 사용 불가(주의!)
    ∘ 상대경로 : 사용 가능
    ∘∘ 현재 디렉터리 : .
    ∘∘ 상위 디렉터리 : ..
  • width : 이미지 너비 지정 (너비를 조정하면 높이도 자동 조정된다.)
  • height : 이미지 높이 지정 (높이를 조정하면 너비도 자동 조정된다.)

오디오

  • 인라인 요소

형식

<audio>
	<source src="오디오경로">
</audio>

audio 태그 주요 속성

속성명속성값의미
controlscontrols오디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
autoplayautoplay오디오 자동 재생
looploop오디오 반복 재생
mutedmuted음소거

audio 미디어 타입(MIME)

  • MP3 : audio/mp3
  • WAV : audio/wav
  • OGG : audio/ogg

비디오

  • 인라인 요소

형식

      <video>
        <source src="비디오경로">
      </video>

video 태그 주요 속성

속성명속성값의미
controlscontrols비디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
autoplayautoplay비디오 자동 재생
looploop비디오 반복 재생
mutedmuted음소거
width픽셀값비디오 너비

video 미디어 타입(MIME)

  • MP4 : video/mp4
  • WEBM : video/webm
  • OGG : video/ogg

<audio controls> = <audio="audio" controls="controls">

  • 속성과 값이 같은 경우, 기본적으로 값을 생략하고 속성만 적어준다.

시맨틱태그

Semantic Tag

  • 의미를 가진 HTML5 태그
  • 단락을 구분하는 <div> 태그처럼 사용된다.
  • <header></header> : 머릿말
  • <section></section> : 본문
  • <article></article> : 본문 안에 위치
  • <aside></aside> :사이드바, 본문이외
  • <footer></footer> :화면의 구조 중 제일 아래에 위치

( 등 본문보다 더 많은 종류가 있다.)

profile
Gabriela
개발이 세상에서 제일 재밌어요
다음 포스트

[HTML] anchor / 테이블 / 입력상자 / 폼

0개의 댓글