ABOUT ME

    -

    오늘
    -
    어제
    -
    총
    -
    • 꼭 알아야 할 HTML 태그들
      Front-end/HTML 2020. 7. 20. 11:32

      HTML에는 정말 많은 종류의 태그들이 있는데요, 현재 HTML5 기준 약 115개의 태그가 있습니다. 🤪

       

       

      하지만 115개의 태그를 전부 외우고 활용하기는 참 멀고도 험하겠죠..?

       

      전부 각자의 기능이 있지만 실질적으로 마크업을 할 때 꼭 알아야 할 태그들이 있기 마련입니다.

      그래서 도대체 그 태그들이 뭔지 알아보려합니다.

       

      DOCTYPE

      DOCTYPE은 document Type의 줄임말로 문서의 타입을 말합니다. HTML의 문서에 최상단에 선언하는데 보통 HTML의 버전을 명시하는데에 사용됩니다.

       

      <!DOCTYPE html>

       

      !로 시작하여 대문자로 DOCTYPE을 선언하고 html의 버전을 명시합니다.

      예시는 html로서 5버전을 나타냅니다. 만약 xhtml, xml을 사용하고 싶다면 html 대신 선언하면 해당 타입으로 마크업 하겠다는 의미입니다.

       

      html

      html 태그는 이제부터 html을 나타내겠다는 의미로 사용됩니다.

       

      <!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

       

      html을 선언하면 내부에 head와 body 태그가 있는 것을 볼 수 있습니다.

      이는 html이 내부 태그와 같은 형태를 가지고 나타내겠다는 의미를 가진다고 보면 됩니다.

       

      head

      head는 해당 html 문서의 전반적인 내용을 담고 있는 태그입니다. 내부적으로는 title, link, meta 등의 태그가 포함됩니다.

       

      title

      말 그대로 제목이며 head 태그 내부에 선언합니다. 선언한 텍스트는 브라우저 탭에 출력됩니다.

      <title>안녕하세요!!</title>

       

      head 내부에 title 태그를 선언해 텍스트를 입력합니다.

       

      입력한 텍스트가 탭에 등장!!! 

       

      link

      link태그는 head 내부에 선언합니다. 말 그대로 연결이라는 뜻을 가지고 있으며 여러가지 파일을 연결하여 가져오는 역할을 수행합니다.

      <link type="text/css" rel="stylesheet" href="./index.css" />

       

      link 태그는 3개의 속성(Attribute)을 가질 수 있습니다.

      • type : 속성의 값이 어떤 값인지 선언합니다.
      • rel : relation의 약자로 문서가 어떤 역할을 하고 있는지 선언합니다.
      • href : hiperText reference의 약자로 해당 웹, 로컬 경로에 있는 파일의 주소를 선언합니다.

       

      현재 type은 text로 이루어진 css 파일이며, css는 stylesheet이고, 로컬에 있는 index.css의 경로를 찾아 href에 선언해주었습니다.

      만약 css 파일이 아닌 이미지면 type이 image/png, 아이콘이면 rel이 icon 과 같이 선언해주면 되겠습니다.

       

      body

      body는 html의 실질적인 정보들을 가지고 있습니다. body 내부에는 개발자가 화면을 구성하는 태그를 통해 마크업을 하게 됩니다.

      <!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

       

      div

      divide의 약자로 나누는 역할을 합니다. 즉 영역을 구분하는데에 사용되는 친구입니다.

      <div>1 영역</div>
<div>2 영역</div>

       

      p

      paragraph의 약자로 문단의 의미를 가집니다. 텍스트 혹은 이미지를 선언할 수 있으며 기본 margin을 가지고 있습니다.

      <p>Welcome to 개발여행</p>

      개발자 도구를 통해 보면 margin이 기본적으로 상,하 16px이 적용된 것을 볼 수 있습니다.

       

      span

      자신의 영역만 가지는 특징을 가지고 있으며 최대 width를 가지고 기본 margin이 없습니다.

      <span>junjangsee의 개발블로그</span>

      개발자가 작성한 만큼만 width를 가지고 있으며, 기본 margin이 없는걸 확인할 수 있습니다.

       

      img

      image의 약자이며 말 그대로 이미지를 첨부하는데 사용됩니다.

      <img src="https://blog.kakaocdn.net/dn/bEHEuA/btqFNrefGX5/4lkdKJW6NIDfa1Tr2YzkOk/img.jpg" 
	alt="html 대표 사진" />
      • src : source의 약자이며 웹, 로컬 경로에 있는 이미지 파일의 주소를 선언합니다.
      • alt : 이미지가 렌더링되지 않았을 때 나타날 문자열을 선언합니다.

       

       

      H{n}

      제목을 나타낼 때 사용하며 n에는 1 ~ 6 사이의 숫자가 들어갑니다. 1에 가까울수록 커집니다.

      <h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

       

      숫자가 커질수록 제목의 크기가 작아지는 것을 확인할 수 있습니다.

       

      strong

      강조를 할 때 사용하며 텍스트가 굵게 표현됩니다.

      <strong>힘세고 강하게!</strong>

       

      ul

      unordered list의 약자로 해석해보면 순서가 없는 리스트를 말합니다.

      <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

      도트로 표시된 리스트들이 표현됩니다.

       

      ol

      ul과는 반대로 ordered list의 약자로 순서가 있는 리스트를 말합니다.

       

      <ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

      도트 대신 순서가 나열된 것을 확인할 수 있습니다.

       

      dl

      description list의 약자로 개념에 대한 리스트를 나타냅니다. 보통 용어를 정의할 때 사용합니다.

      <dl>
  <dt>정의1</dt>
  <dd>개념1</dd>
  <dt>정의2</dt>
  <dd>개념2</dd>
  <dt>정의3</dt>
  <dd>개념3</dd>
</dl>

       

      HTML5 시멘틱 태그

      HTML5가 등장하면서 시멘틱 웹이 대두되었습니다. 이에 맞춰 새로운 태그들이 등장하였는데 이를 살펴보겠습니다.

      <!-- 맨 위 -->
<header></header>
<!-- 네비게이션 -->
<nav></nav>
<!-- 사이드 -->
<aside></aside>
<!-- 구간 -->
<section></section>
<!-- 본문 영역 -->
<article></article>
<!-- 맨 밑 -->
<footer></footer>

      위 6가지 태그를 통해 시멘틱 구조를 나타낼 수 있게 되었습니다.

      • header : 헤더를 의미합니다.
      • nav : 네비게이션을 의미합니다.
      • aside : 사이드에 사이드바와 같은 중요 내용과 조금 떨어진 내용을 의미합니다.
      • section : 특정 중요 내용을 감싸는 것을 의미합니다.
      • article : 본문을 감싸는 것을 의미합니다.
      • footer : 푸터를 의미합니다.

       

       

      'Front-end > HTML' 카테고리의 다른 글

      HTML 간단한 총정리  (0) 2020.07.01

      관련글 관련글 더보기

      댓글

    티스토리툴바