HTML 기본적인 태그들

HTML

쿼리_ 2023. 6. 13. 10:21

728x90

HTML에서 사용되는 다양한 태그 중 일부를 가져왔습니다.

아래는 일부 중요한 태그들의 예시이며, HTML는 훨씬 많은 태그가 있습니다.

1. '<h1>' 태그:

<h1>이것은 제목입니다</h1>

2. '<p>' 태그:

<p>이것은 단락입니다.</p>

3. '<a>' 태그:

<a href="http://www.example.com">이것은 링크입니다</a>

4. '<img>' 태그:

<img src="image.jpg" alt="이미지 설명">

5. '<ul>' '<li>' 태그:

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

6. '<div>' 태그:

<div class="container">
  <h2>이것은 구획입니다</h2>
  <p>구획 안의 내용입니다.</p>
</div>

7. '<table>' '<tr>' '<td>'태그:

<table>
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
  <tr>
    <td>셀 3</td>
    <td>셀 4</td>
  </tr>
</table>

8. '<form>' '<input>' '<button>' '<label>' 태그:

<form>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <button type="submit">전송</button>
</form>

위 코드 예시를 참고하여 HTML 태그를 사용하여 웹 페이지를 구성할 수 있습니다.

각 태그는 주어진 예시와 같은 역할을 수행하며, 원하는 내용과 구조에 맞게 수정하여 사용하실 수 있습니다.

참고로, 각 태그별로 속성이 따로 설정되어 있는 것을 알 수 있습니다.

즉, 태그별로 매우 다양한 속성들이 존재하니, 확실하게 알아두면 활용하기 훨씬 편해집니다.

* vscode를 설치하여 ! 단축키를 입력한 뒤, <body> 안에 코드를 넣고 browser를 확인해 보면 무슨 기능을 하는지 알 수 있다.

728x90