HTML (HyperText Markup Language):
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지의 제목, 문단, 표, 이미지, 링크 등을 생성하고 배치하는데 사용됩니다. HTML은 태그라는 특별한 키워드를 사용하여 웹 브라우저에게 어떤 정보를 어떻게 표시해야 하는지 알려줍니다. 예를 들어, <h1> 태그는 가장 큰 제목을, <p> 태그는 문단을, <img> 태그는 이미지를 나타냅니다.
자주 쓰는 태그들
<html> : HTML 문서의 루트 요소입니다. 모든 HTML 코드는 이 태그 내부에 위치해야 합니다.
<head> : 웹 페이지의 메타데이터를 포함하는 부분입니다. 이곳에는 <title>, <link>, <meta>, <script> 등의 태그가 위치합니다.
<title> : 웹 페이지의 제목을 나타냅니다. 웹 브라우저의 탭에 표시되는 텍스트입니다.
<body> : 웹 페이지의 본문 내용을 나타냅니다. 이 태그 안에는 텍스트, 이미지, 링크 등 사용자에게 보여지는 모든 내용이 들어갑니다.
<h1> ~ <h6> : 제목을 나타내는 태그입니다. <h1>이 가장 큰 제목이며, <h6>까지 갈수록 작아집니다.
<p> : 문단(paragraph)을 나타내는 태그입니다.
<a> : 하이퍼링크를 생성하는 태그입니다. href 속성을 사용해 링크 대상을 지정합니다.
<img> : 이미지를 표시하는 태그입니다. src 속성을 사용해 이미지 파일의 위치를 지정합니다.
<ul> : 비순차적 목록(unordered list)을 만드는 태그입니다. 각 항목은 <li> 태그로 표현됩니다.
<div> : 구역(division)을 나타내는 태그입니다. CSS와 함께 사용하여 웹 페이지의 레이아웃을 구성하는데 자주 사용됩니다.
<form> : 사용자가 입력한 데이터를 서버로 전송하는 인터페이스를 만드는 태그입니다.
<label> : 폼 컨트롤과 설명 텍스트를 연결하는 태그입니다. 이는 접근성을 향상시킵니다.
<fieldset> : 폼 내에서 관련된 요소와 정보를 그룹화하는 태그입니다.
<legend> : <fieldset>의 제목을 나타내는 태그입니다.
<input> : 사용자로부터 데이터를 입력받는 태그입니다. type 속성을 통해 다양한 종류의 입력(텍스트, 비밀번호, 체크박스 등)을 받을 수 있습니다.
<select> : 드롭다운 목록을 생성하는 태그입니다. <option> 태그를 사용하여 선택 가능한 옵션을 제공합니다.
<textarea> : 여러 줄의 텍스트 입력을 받는 태그입니다.
<!DOCTYPE html>
<html>
<head>
<title>포괄적인 예시 페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이 페이지는 HTML의 주요 태그들을 모두 사용하여 제작되었습니다.</p>
<a href="https://www.google.com">Google로 가기</a>
<img src="image.jpg" alt="예시 이미지">
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
<div>
<h2>이것은 div 안의 내용입니다.</h2>
<p>div는 웹 페이지의 여러 부분을 그룹화하는데 사용됩니다.</p>
</div>
<form action="/submit" method="post">
<fieldset>
<legend>개인 정보</legend>
<label for="name">이름:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">이메일:</label><br>
<input type="email" id="email" name="email"><br>
<label for="password">비밀번호:</label><br>
<input type="password" id="password" name="password"><br>
</fieldset>
<fieldset>
<legend>추가 정보</legend>
<label for="bio">자기소개:</label><br>
<textarea id="bio" name="bio"></textarea><br>
<label for="job">직업:</label><br>
<input type="text" id="job" name="job"><br>
</fieldset>
<input type="submit" value="제출하기">
</form>
<h6>이것은 가장 작은 제목인 h6 태그입니다.</h6>
</body>
</html>
'Front-End > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 반응형 웹이란? 뷰포트, 미디어 쿼리에 대해서 (0) | 2024.02.02 |
|---|---|
| [CSS3] 선택자란?, 자주 쓰는 선택자들 (0) | 2024.02.02 |
| [HTML5] 시맨틱 태그(semantic tag)란?, 자주 쓰는 태그들 (0) | 2024.02.02 |
| [CSS] CSS 자주쓰는 레이아웃 (0) | 2024.02.02 |
