[HTML] HTML 태그 (1)

YEN·2022년 2월 17일
1

HTML

목록 보기
2/5
post-thumbnail

HTML의 다양한 태그에 대해서 알아보자⌨️

1. HTML의 시맨틱 태그

  • 시맨틱 semantic 태그 : 이름만 봐도 의미를 알 수 있는 태그

  • 시맨틱 태그를 사용하는 이유

    • 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수 있다.
    • 문서 구조가 정확하게 나눠지므로 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉽다.
    • 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
ex) < p > : 단락 paragraph을 줄인 태그
    < a > : 앵커 anchor를 줄인 태그
  • 웹 사이트의 디자인은 헤더 영역, 본문 영역, 푸터 영역 등의 구조로 나눌 수 있다.

    • 헤더 영역 : 웹 사이트의 제목, 로고

    • 본문 영역 : 웹 사이트의 내용, 사이드 바

    • 푸터 영역


1) < header > : 헤더 영역을 나타내는 태그

2) < nav > : 네비게이션 영역을 나타내는 태그

  • 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.
  • 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함하거나 독립해서 사용할 수 있다.
  • 여러 개의 < nav >를 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있다.

3) < main > : 핵심 콘텐츠를 담는 태그

  • 웹 문서마다 한 번만 사용할 수 있다.

4) < article > : 독립적인 콘텐츠를 담는 태그

  • 독립된 웹 콘텐츠 항목 (블로그의 포스트, 뉴스 사이트 기사)
  • 웹 문서 안에 여러 개의 < article > 태그를 사용할 수 있다.

5) < section > : 콘텐츠 영역을 나타내는 태그

  • 몇 개의 콘텐츠를 묶는 용도로 사용한다.
<article> : 독립된 콘텐츠 
<section> : 여러 개의 콘텐츠를 묶는 용도

6) < aside > : 사이드 바영역을 나타내는 태그

  • 본문 내용 외에 사이드 바를 만들 때 사용하며 필요할 경우에만 사용한다.

7) < footer > : 푸터 영역을 나타내는 태그

  • 웹 문서의 맨 아래 쪽에 사이트 제작 정보, 저작권 정보, 연락처 등을 넣는다.

8) < div > : 여러 소스를 묶는 태그

  • id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다.
<div id = "header">
<div class = "detail">


2. HTML의 텍스트 태그

1) < hn > : 제목을 나타내는 태그

  • 웹 문서의 제목은 다른 텍스트보다 크고 진하게 표시한다.
  • 제목 텍스트를 크기별로 표시할 수 있다.

<body>
    <h1> 제목 텍스트 삽입하기 </h1>
    <h2> 텍스트 1 </h2>
    <h3> 텍스트 2 </h3>
    <h4> 텍스트 3 </h4>
</body>

2) < p > : 텍스트 단락을 만드는 태그 / < br > : 줄을 바꾸는 태그

  • p 태그 사이에 텍스를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.

    • 이때 중요한 점은 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한줄로 표시된다.
  • br 태그를 사용하면 줄을 바꿀 수 있다.

<body>
    <h1> 제목 텍스트 삽입하기 </h1>
        <p> p 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. </p>
        <p> 이때 중요한 점은 편집기에서 줄을 바꾸더라도
            웹 브라우저에서는 한줄로 표시된다.
        </p>
        <p> br 태그를 사용하면 <br> 줄을 바꿀 수 있다. </p>
        <p> br 태그는 단독으로 사용하므로 닫는 태그가 필요 없다. </p>
</body>

3) < blockquote > : 인용할 때 쓰는 태그

  • blockquote 태그는 인용문을 삽입할 때 쓰며 다른 텍스트 단락보다 안으로 들여 쓴 상태가 된다.

<body>
    <h1> 제목 텍스트 삽입하기 </h1>
        <p> p 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. </p>
        <p> 이때 중요한 점은 편집기에서 줄을 바꾸더라도
            웹 브라우저에서는 한줄로 표시된다.
        </p>
        <p> br 태그를 사용하면 <br> 줄을 바꿀 수 있다. </p>
        <p> br 태그는 단독으로 사용하므로 닫는 태그가 필요 없다. </p>
        <blockquote>
            blockquote 태그는 인용문을 삽입할 때 쓰며 <br>
            다른 텍스트 단락보다 안으로 들여 쓴 상태가 된다.
        </blockquote>
</body>

4) < strong >, < b > : 텍스트를 굵게 표시하는 태그

<body>
    <h1> 제목 텍스트 삽입하기 </h1>
        <p> p 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. </p>
        <p> 이때 중요한 점은 편집기에서 줄을 바꾸더라도
            웹 브라우저에서는 한줄로 표시된다.
        </p>
        <p> br 태그를 사용하면 <br> 줄을 바꿀 수 있다. </p>
        <p> br 태그는 단독으로 사용하므로 닫는 태그가 필요 없다. </p>
        <p> <strong> strong 태그 </strong><b> b 태그 </b>는 텍스트를 굵게 표시할 때 사용한다. </p>
</body>

5) < em >, < i > : 기울인 텍스트를 입력해 주는 태그

<body>
    <h1> 제목 텍스트 삽입하기 </h1>
        <p> p 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. </p>
        <p> 이때 중요한 점은 편집기에서 줄을 바꾸더라도
            웹 브라우저에서는 한줄로 표시된다.
        </p>
        <p> br 태그를 사용하면 <br> 줄을 바꿀 수 있다. </p>
        <p> br 태그는 단독으로 사용하므로 닫는 태그가 필요 없다. </p>
        <p> <strong> strong 태그 </strong><b> b 태그 </b>는 텍스트를 굵게 표시할 때 사용한다. </p>
        <p> 텍스트를 <em> 기울여서 </em> 표시하고 싶을 때는 <i> em 태그와 i 태그를 </i> 사용한다. </p>
</body>

6) 그 밖의 다양한 태그

태그 종류설명예시
abbr줄임말을 표시하고 tittle 속성을 함께 사용.< abbr tittle = "Hong Gil Dong"> HGD < /abbr >
cite웹 문서나 포스트에서 참고 내용을 표시.< p > 실패는 성공의 어머니이다. - 명언, < cite > '에디슨' < /cite > 중 < / p >
code컴퓨터 인식을 위한 소스 코드이다.< code > function savetheLocal() < /code>
small웹 문서나 포스트에서 참고 내용을 표시한다.< p > 가격 : 10000원 < small > (부가세 별도) < /small> < /p >
sub아래 첨자를 표시한다.< p > 수소의 화학식은 H < sub > 2 < /sub > O 이다. < /p >
sup위 첨자를 표시한다.< p > E = mp < sup > 2 < /sup > < /p >
s취소선을 표시한다.< p > < s > 30000원 < / s > 10000원 < /p >
u밑줄을 표시한다.< u > u 태그는 텍스트에 밑줄을 표시한다. < /u >
ins공동 작업 문서에서 새로운 내용을 삽입한다.< ins > ins 태그는 새로운 내용을 삽입한다. < /ins >
del공동 작업 문서에서 기존 내용을 삭제한다.< del > del 태그는 기존 내용을 삭제한다. < /del >

3. HTML의 목록 태그

1) < ol >, < li > : 순서 있는 목록을 만드는 태그

  • ol 태그는 ordered list의 줄임말
  • li 태그는 list의 줄임말
  • 목록을 표시할 내용 앞뒤에 각각 ol 태그를 두고, 그 사이에 li 태그를 삽입한다.

<body>
    <ol>
        <li> 항목 1 </li>
        <li> 항목 2 </li>
        <li> 항목 3 </li>
    </ol>
</body>

< ol 태그의 type, start 속성 >
type 속성 : 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.
start 속성 : 원하는 번호부터 시작할 수 있다.

속성 종류설명
type = "1"숫자 (기본값)
type = "a"영어 소문자
type = "A"영어 대문자
type = "i"로마 숫자 소문자
type = "I"로마 숫자 대문자

2) < ul >, < li > : 순서 없는 목록을 만드는 태그

  • ul 태그는 unordered list의 줄임말
  • 순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을 불릿이라고 한다.

<body>
    <ul>
        <li> 항목 1 </li>
        <li> 항목 2 </li>
        <li> 항목 3 </li>
    </ul>
</body>

3) < dl >, < dt >, < dd > : 설명 목록을 만드는 태그

  • 설명 목록은 이름과 값 형태로 된 목록을 말한다.

<body>
    <dl>
        <dt> 이름 </dt>
        <dd> 값 1 </dd>
        <dd> 값 2</dd>
    </dl>
</body>

0개의 댓글