반응형
이전 글에 이어서 HTML tag 설명하겠습니다. 아래 HTML 예시 코드와 화면을 참고해 주세요.
HTML 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 예시 코드</title>
</head>
<body>
<header>
<h1>웹 페이지 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>홈 페이지</h2>
<img src="example.jpg" alt="예시 이미지">
<p>이곳은 홈 페이지입니다. 환영합니다!</p>
</section>
<section id="about">
<h2>소개 페이지</h2>
<p>이곳은 소개 페이지입니다. 웹 페이지에 대한 간단한 소개를 작성합니다.</p>
</section>
<section id="contact">
<h2>연락처 페이지</h2>
<p>이곳은 연락처 페이지입니다. 언제든지 연락해주세요!</p>
<table border="1">
<tr>
<th>항목 1</th>
<th>항목 2</th>
</tr>
<tr>
<td>내용 1</td>
<td>내용 2</td>
</tr>
</table>
<div class="container">
<p>이것은 <span class="span-style">중요한 분할</span>된 영역입니다.</p>
</div>
</section>
<footer>
<h2>footer</h2>
<p>2024 웹 페이지. 모든 권리 보유.</p>
</footer>
</body>
</html>
HTML tag 정리 (2)
1. <nav> 태그
- 웹 페이지 내에서 네비게이션 링크를 정의하는 태그입니다.
- <nav> 요소는 웹 페이지 내에서 사용자가 다른 페이지로 이동하거나 특정 섹션으로 스크롤하는 데 사용되는 링크를 포함합니다.
- 웹 사이트의 탐색을 단순하고 직관적으로 만들어주는 중요한 요소입니다.
2. 목록 태그 (List Tags): <ul>, <ol>, <li>
- 목록을 만드는 데 사용됩니다.
- <ul>은 순서가 없는 목록을 생성하고, <ol>은 순서가 있는 목록을 생성합니다.
- 각 항목은 <li> 태그로 감싸져야 합니다.
3. 제목 태그 (Heading Tags) : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- 제목을 정의하는 데 사용됩니다. <h1>이 가장 중요한 제목이고, 숫자가 커질수록 하위 제목을 나타냅니다.
- 제목 태그는 웹 페이지의 구조를 나타내며, 검색 엔진이 페이지의 콘텐츠를 이해하는 데 도움이 됩니다.
4. 문단 태그 (Paragraph Tag) : <p>
- 문단을 정의하는 데 사용됩니다.
- 웹 페이지에서 텍스트를 그룹화하고, 읽기 쉬운 형태로 표시하는 데 사용됩니다.
5. 링크 태그 (Anchor Tag): <a>
- 하이퍼링크를 생성하는 데 사용됩니다.
- 사용자를 다른 웹 페이지로 이동하거나, 동일한 페이지 내에서 특정 부분으로 이동시키는 등의 기능을 수행합니다.
- href 속성을 사용하여 링크의 목적지를 지정합니다.
6. 이미지 태그 (Image Tag): <img>
- 이미지를 웹 페이지에 삽입하는 데 사용됩니다.
- src 속성을 사용하여 이미지 파일의 경로를 지정합니다. (src="example.jpg" => example.jpg 대신 이미지 경로 입력)
- 웹 페이지에 시각적인 요소를 추가하거나, 정보를 시각적으로 전달하는 데 사용됩니다.
7. 테이블 태그 (Table Tags): <table>, <tr>, <th>, <td>
- 표를 만드는 데 사용됩니다.
- <table>은 표 전체를, <tr>은 표의 행을, <th>는 표의 헤더 셀을, <td>는 표의 데이터 셀을 정의합니다.
- 표를 사용하여 데이터를 구조화하고 시각적으로 표현할 수 있습니다.
8. 분할 태그 (Division Tags): <div>, <span>
- 웹 페이지의 레이아웃을 정의하는 데 사용됩니다.
- 예시화면에서 파란 배경 부분이 <div>, 빨간 배경 부분이 <span>을 나타냅니다.
- <div>는 블록 수준 요소로, 영역을 분할하여 스타일링하거나 JavaScript로 조작하는 데 사용됩니다.
- <span>은 인라인 요소로, 텍스트나 이미지 등을 그룹화하여 스타일을 적용하는 데 사용됩니다.
위 예시 코드에서 <section id="home">, <div class="container"> 등 태그 안에 id, class가 사용되고 있는데
이는 JavaScript와 CSS에서 태그 요소를 찾거나 스타일을 적용하기 위함입니다.
id와 class 부분은 다음 글에서 자세히 설명하겠습니다.
반응형
'Web' 카테고리의 다른 글
| HTML의 기초, tag 정리 (1) (0) | 2024.03.20 |
|---|