HTML이란?
HTML은 웹페이지를 작성하기 위한 언어로, Hyper Text Markup Language의 약자입니다. HTML을 이용하여 웹페이지의 구조를 만들고, 내용을 표현하고, 스타일을 적용할 수 있습니다.
태그
HTML은 태그로 구성되어 있으며, 이 태그는 < > 기호로 감싸져 있습니다. 태그는 대부분 짝이 있으며, 시작 태그와 종료 태그로 이루어져 있습니다. 시작 태그는 <tag> 형태이고, 종료 태그는 </tag> 형태입니다.
HTML 문서는 기본적으로 <html> 태그와 <body> 태그로 이루어져 있습니다. <html> 태그는 HTML 문서의 시작을 나타내며, <body> 태그는 HTML 문서의 본문을 나타냅니다. HTML 태그에는 다양한 종류가 있습니다.
HTML은 CSS와 JavaScript와 함께 사용되는 경우가 많습니다. CSS는 스타일을 적용하는 언어이고, JavaScript는 동적인 웹페이지를 만들기 위한 언어입니다. HTML을 이용하여 웹페이지를 만드는 방법은 간단합니다. 먼저, 텍스트 에디터를 열고 새로운 파일을 만듭니다. 그리고나서 파일 확장자를 .html로 변경합니다. 이제 HTML 문서를 작성할 수 있습니다.
HTML 문서의 기본 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>웹페이지 제목</title>
</head>
<body>
웹페이지 내용
</body>
</html>위 코드에서 <!DOCTYPE html>은 문서의 타입을 나타내는 것으로, HTML5 문서임을 나타냅니다.
<html> 태그는 HTML 문서의 시작을 나타냅니다.
<head> 태그는 문서의 메타데이터를 나타냅니다.
<title> 태그는 웹페이지의 제목을 나타내며, 브라우저 탭에 표시됩니다.
<body> 태그는 웹페이지의 내용을 나타내며, 웹페이지의 모든 내용은 이 태그 내에 작성됩니다.
HTML 문서에서는 다양한 태그를 사용하여 웹페이지를 작성할 수 있습니다. 몇 가지 예시를 들어보겠습니다.
제목 태그 (<h1> ~ <h6>)
제목 태그는 웹페이지에서 중요한 제목을 나타내는 데 사용됩니다. 제목 태그는 <h1> ~ <h6>까지 총 6개의 단계로 구성되어 있으며, <h1> 태그가 가장 큰 제목을 나타냅니다. 1부터 6으로 갈수록 글씨가 작아집니다.
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목3</h4>
<h5>제목3</h5>
<h6>제목3</h6>
단락 태그 (<p>)
단락 태그는 웹페이지에서 문장이나 단락을 나타내는 데 사용됩니다.
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
이미지 태그 (<img>)
이미지 태그는 웹페이지에서 이미지를 표시하는 데 사용됩니다. 이미지를 표시하려면 src 속성에 이미지 파일의 경로를 지정해야 합니다.
alt 속성은 이미지가 로드되지 못했을 때 이미지에 대한 대체 텍스트를 나타내는 역할을 합니다. 이 속성은 시각 장애인들이 웹페이지를 이용할 때 유용합니다.
<img src="image.jpg" alt="이미지 설명">
링크 태그 (<a>)
링크 태그는 웹페이지에서 다른 웹페이지나 파일로 이동하는 링크를 생성하는 데 사용됩니다. href 속성에 링크 주소를 지정해줘야 합니다.
<a href="http://www.example.com">링크 텍스트</a>
목록 태그 (<ul>, <ol>, <li>)
목록 태그는 웹페이지에서 목록을 나타내는 데 사용됩니다. <ul> 태그는 순서 없는 목록을, <ol> 태그는 순서 있는 목록을 나타냅니다. <li> 태그는 목록의 항목을 나타냅니다.
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
<ol>
<li>항목1</li>
<li>항목2</li>
</ol>
테이블 태그 (<table>, <tr>, <th>, <td>)
테이블 태그는 웹페이지에서 표를 만드는 데 사용됩니다. <table> 태그는 표 전체를 나타내며, <tr> 태그는 표의 각 행을 나타냅니다. <th> 태그는 표의 제목 셀을, <td> 태그는 데이터 셀을 나타냅니다.
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
<td>남</td>
</tr>
<tr>
<td>김영희</td>
<td>30</td>
<td>여</td>
</tr>
</table>
폼 태그 (<form>, <input>)
폼 태그는 웹페이지에서 사용자로부터 정보를 입력받는 데 사용됩니다. <form> 태그는 폼 전체를 나타내며, <input> 태그는 입력 필드를 나타냅니다.
<form>
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="제출">
</form>위 예제는 이름과 이메일을 입력받는 폼을 생성하는 예제입니다. <label> 태그는 입력 필드의 라벨을 지정합니다. <input> 태그의 type 속성은 입력 필드의 타입을 지정합니다. 이 예제에서는 type이 text인 입력 필드와 type이 email인 입력 필드를 생성하였습니다. 마지막으로, <input> 태그의 type이 submit인 입력 필드는 폼을 제출하는 역할을 합니다.
위와 같은 HTML 태그들을 이용하여 웹페이지를 만들 수 있습니다. 또한 CSS와 JavaScript와 함께 사용하여 더욱 다양한 기능을 구현할 수 있습니다. 이 외에도 다양한 태그들을 활용해서 웹페이지를 만들 수 있지만 많은 태그들을 다 외울 순 없기때문에 주요한 태그들을 리뷰해보았습니다!
'HTML' 카테고리의 다른 글
| 원격저장소로 프로젝트 관리하기 : Github Desktop (0) | 2023.06.21 |
|---|---|
| 리그오브레전드(LOL) 게임정보 불러오기(Riot Apis) (2) | 2023.06.13 |
| 영화제목 맞히기 게임 (javascript) (2) | 2023.06.11 |
| Flex & Grid (0) | 2023.05.22 |
댓글