HTML 태그 part1

jiseong·2021년 7월 27일

T I Learned

목록 보기

3/291

적절한 태그의 중요성

HTML을 이루고 있는 구성 요소인 태그(Tag)는 종류가 다양하기 때문에 의미에 맞는 태그를 사용하여 브라우저가 잘 이해 할 수 있도록(Sementic Markup) 하는 것이 중요하다.

제목 태그

문서내에서 제목을 표현할 때 사용.

📝코드

<!DOCTYPE html>
<html>
  <body>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <h4>heading 4</h4>
    <h5>heading 5</h5>
    <h6>heading 6</h6>
  </body>
</html>

💻결과

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

단락 태그

단락을 지정

📝코드

<!DOCTYPE html>
<html>
  <body>
  	<h4> HTML 탄생 </h4>
    	<p>
      		HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
            ... 이하 생략
        </p>
  </body>
</html>

💻결과

HTML 탄생

HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다. ... 이하 생략

글자형태 태그

텍스트를 표현해주는 태그 (e.g. b, i, u, s)
- <b> :글자를 굵게 표현
  - b tag와 동일하지만 의미론적으로 중요성을 갖는 <strong> 존재
- <i> :글자를 이텔릭체로 표현
  - i tag와 동일하지만 의미론적으로 중요성을 갖는 <em> 존재
- <u> :글자에 밑줄을 표현
  - u tag와 동일하지만 의미론적으로 중요성을 갖는 <ins> 존재
- <s> :글자를 중간선을 표현
  - s tag와 동일하지만 의미론적으로 중요성을 갖는 <del> 존재

📝코드

<!DOCTYPE html>
<html>
  <body>
    <p>
        <b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
        <u>Lorem</u> <s>ipsum</s> dolor sit amet
    </p>
  </body>
</html>

💻결과

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

앵커 태그

다른 문서로 이동할 수 있는 링크를 생성

📝코드

<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.naver.com/" target="_blank">네이버</a>
  </body>
</html>

href속성의 값은 링크의 목적지가 되는 URL
target속성으로는 _self, _blank, _parent, _top이 있다.
- _self는 현재 화면에 표시 (default)
- _blank는 새로운 창에 표시
- _parent와 _top은 프레임이라는 특정 조건에서만 동작함.

💻결과

네이버

❓ 참조
<a>태그를 통해 꼭 외부 페이지로만 이동하는 것이 아닌 페이지 내부의 특정 요소로 초점을 이동할 수 있는데 이를 내부링크라고 함.
<a href="#some-element-id">특정 요소로 이동하기</a>
... 중략.
<h1 id="some-element-id">특정 요소</h1>

의미 없는 요소를 묶기 위한 태그

태그 자체에는 의미가 없으며 요소들을 묶기 위한 용도로 사용
- <div>
- <span>

📝코드

<!DOCTYPE html>
<html>
  <body>
    <div>
        <span>Hello,</span> HTML
    </div>
  </body>
</html>

💻결과

Hello, HTML

❓ 참조
<div> 태그는 블록 레밸 태그로 기본적으로 한 줄을 생성해서 표현
<span> 태그는 인라인 레밸 태그로 블록 레밸의 한줄 안에서 표현

목록(List)형식 표현을 위한 태그

일련된 항목들을 나열하기 위한 목록 태그
- <ul> 순서가 없는 리스트를 표현할 때 사용
- <ol> 순서가 있는 리스트를 표현할 때 사용
- <dl> 용어와 그에 대한 정의를 표현 할 때 사용

📝코드

<!DOCTYPE html>
<html>
  <body>
    <h4>순서없는 목록 (Unordered List)</h4>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <h4>순서있는 목록 (ordered List)</h4>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <h4>용어와 정의 표현</h4>
    <dl>
      <dt>리플리 증후군</dt>
      <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
      <dt>피그말리온 효과</dt>
      <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    </dl>
  </body>
</html>

💻결과

순서없는 목록 (Unordered List)

Coffee
Tea
Milk

순서있는 목록 (ordered List)

Coffee
Tea
Milk

용어와 정의 표현

리플리 증후군 허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어 피그말리온 효과 타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상

❓ 참조
리스트 태그도 중첩이 가능하다. 단, ol이나 ul태그 자식으로는 li태그만 사용가능

표(table)형식 표현을 위한 태그

표를 만들 때 사용하는 태그
- <table> : 표를 나타내는 태그
- <tr> : 행을 나타내는 태그
- <th> : 제목 셀을 나타내는 태그
- <td> : 셀을 나타내는 태그
- 표가 복잡해지면서 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야함.
  - <caption>: 표의 제목을 나타내는 태그
  - <thead>: 제목 행을 그룹화하는 태그
  - <tfoot>: 바닥 행을 그룹화하는 태그
  - <tbody>: 본문 행을 그룹화하는 태그

📝코드

<!DOCTYPE html>
<html>
   <head>
     <style>
      th, td { border: 2px solid; }
     </style>
  </head>
  <body>
    <table>
      <caption>나의 장바구니</caption>
      <thead>
        <tr>
          <th>과일</th>
          <th>가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
           <td>사과</td>
           <td>4,000원</td>
        </tr>
        <tr>
           <td>복숭아</td>
           <td>6,000원</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>총합</td>
          <td>10,000원</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

💻결과

나의 장바구니
과일	가격
사과	4,000원
복숭아	6,000원
총합	10,000원

❓ 참조
과거에는 테이블 태그를 이용하여 레이아웃을 구성하기도 했지만 모던 웹에서는 div로 레이아웃을 구성함.

이미지 태그

웹페이지에 이미지를 삽입할 때 사용하는 태그

📝코드

<!DOCTYPE html>
<html>
  <body>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" width="200" height="100" alt="구글">
  </body>
</html>

src 속성: 이미지 경로를 지정
alt 속성: 이미지의 대체 텍스트를 나타 냄 (웹 접근성 측면에서 중요한 속성)
width/height 속성: 이미지의 크기를 지정하는 속성(둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성 크기의 비율에 맞게 변경됨)

💻결과

❓ 참조
상대경로: 현재 경로를 기준으로 상대적으로 위치를 나타내는 경로
절대경로: 현재 경로가 아닌 최초의 시작점으로 경유한 경로

Reference

jiseong

이전 포스트

HTML이란?

다음 포스트