Jane's PS Blog

[html] html에서 자주 쓰이는 태그 총정리

November 06, 2020

HTML

  • Hyper Text Markup Language

    • Hyper Text(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어
  • 웹 페이지를 위한 마크업 언어
  • 구조를 설계할 때 사용

태그 형태

<태그명 속성 = "속성값"> 내용 </태그명>
  • 닫는 태그가 없는 경우도 있다.
  • 태그명 대소문자 구분은 하지 않는다.
  • 주석은 <!—내용—> or //으로 표시한다.
  • 속성 종류: class, id, style, src

가장 큰 범위 설정

  • <!DOCTYPE html>

    • 웹 브라우저에게 HTML 문서가 나올거라고 전달

  • <html>

    • HTML 문서
    • 파일의 시작과 끝에 위치

  • <head>

    • 보이지 않는 문서 내용
    • 메타데이터

    • <meta> 기타 메타데이터 요소

      • e.g 문자 인코딩으로 utf-8 설정
      • <meta charset="utf-8"/>
    • css파일 등을 불러올 때 자주 사용
    • 사용자가 처음 볼 때 예쁜 화면이 나오는 게 중요하기 때문

  • <body>

    • 대부분의 코드
    • 보이는 문서 내용
    • body 코드 마지막 부분에 주로 javascript 코드를 배치한다.

  • <title>

    • 문서 제목(탭에 표시) - 홈페이지 열었을 때 상단에 아이콘 옆에 있는 것
    • -

  • <link>

    • 외부 리소스(html, xss, icon 등) 가져오기
    • 한 페이지에서 작업할 때 다른 페이지의 소스가 필요하면 링크를 통해 가져올 수 있다.

  • <style>

    • CSS를 HTML 내부에 스타일링

콘텐츠 구분 (Semantic tag)

💡 영역을 나누는 태그들로 주로 레이아웃 구성할 때 사용된다.

  • <header>

    • 헤더, 주로 로고, 제목, 검색 부분

  • <main>

    • 주요 콘텐츠 (문서 1개당 메인 1개)

  • <footer>

    • 주로 저자, 저작권, 관련 문서 기입

  • <nav>

    • 페이지 링크 모음, 주로 메뉴, 목차, 색인

  • <aside>

    • 부가적인 부분. 광고나 기타 링크 등을 포함한 사이드 바

  • <article>

    • 독립적으로 구분되거나 재사용 가능한 영역. 매거진, 신문 기사, 블로그 포스팅

  • <section>

    • 한 주제로 묶인 영역, 더 적합한 요소가 없을 때 사용. 제목이 포함됨

  • <hgroup>

    • 여러 단계의 제목을 묶기

자바스크립트

  • <script>

기본적인 영역 구분

  • <div>

    • 단락 바꿈
    • 밑으로 간다.
    • <div>에 포함될 수 있는 것
    • (<h1> - <h6>), <a>, <img>, <p>, <ul>

  • <span>

    • 옆으로 간다.

텍스트 콘텐츠

  • <p>

    • 단락

  • <pre>

    • Preformatted Text
    • 입력한 그대로 공백과 줄바꿈을 유지하여 텍스트 표시

  • <ol>

    • ordered list
    • 숫자나 알파벳 등 순서가 있는 목록 생성

  • <ul>

    • unordered list
    • 순서가 필요없는 목록 생성

  • <dl>

    • definition list
    • 사전처럼 용어를 설명하는 목록 생성

  • <li>

    • list item
    • <ol>과 <ul> 안에서 항목들을 나열할 때 사용

  • <blockquote>

    • 인용문

Inline 텍스트

  • <a>

    • 링크
    • 하이퍼링크가 걸린다는 뜻에서 html이 된 것
    • 상세페이지 보다가 맨 위로 올리고 싶어서 화살표 누르는 것도 <a>사용한 것

  • <br>

    • 줄바꿈
    • <div>로 layout을 구성할 수 있는데 <br>로 간격을 조정하면 코드가 더러워질 수 있음

멀티미디어

  • <img>

    <img src="..." />
  • <audio>

  • <video>

    <video width="450px" height="350px" controls>
<source src="..." type="video/mp4" />
</video>

Source

Written by@[Jisun Lim]
Carpe diem

GitHubVelogFacebook