이전 포스팅에서는 HTML의 정의와 특징, 태그의 뜻, 속성, 여러 가지 태그에 대해 정리하였습니다.
이번 포스팅은 자주 사용되면서도 중요한 HTML 태그들을 마지막으로 더 정리해 보겠습니다.
1. 입력 양식 태그 : input 태그
- 입력 양식 태그의 경우, 사용자의 입력 값을 받기 위해 <form> 태그가 먼저 선언되고 이후에 input 태그가 입력된다.
- 사용자로부터 특정 값을 받고자 할 때, 입력 값에 대하여 서버와 통신하고자 할 때 사용된다.
- 속성으로 type을 이용하여 다양한 값을 받을 수 있다.
- 아래는 대표적인 input 태그의 속성값을 나타낸다.
(1) button - 버튼을 생성
(2) checkbox - 체크박스를 생성
(3) file - 파일 선택 버튼 생성
(4) radio - 라디오 버튼 생성
(5) text - 텍스트 입력 양식 생성
(6) password - 비밀번호 입력 양식 생성
<body>
<form>
<input type="text" name="name"><br>
<input type="password" name="password"> <br>
<input type="file" name="file"><br>
<input type="submit" > <br>
<input type="button" value="button">
</form>
</body>- input 태그의 구성 요소
(1) type : 입력받을 값의 유형을 결정하는 속성
(2) name : 전달되는 값의 이름을 설정하는 속성값
(3) value : 태그의 값을 설정하는 속성값
2. select 태그
- 여러 가지 선택지가 있는 보기에서 특정 값을 선택할 수 있는 입력 양식 요소이다.
- select 태그가 선언되고 이후 아래와 같은 태그들이 후속 태그로 선언된다.
(1) option - 옵션을 생성
(2) optgroup - 옵션을 그룹화하여 생성
<body>
<select>
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>라면</option>
</select>
</body>
3. 공간 분할 태그
- 레이아웃을 생성할 때 사용된다.
- 아래와 같이 div, span 태그가 사용되며 다음과 같은 특징을 가지면서 레이아웃이 생성된다.
(1) div 태그 - Block 형식으로 공간을 분할한다.(레이아웃 생성)
(2) span 태그 - Inline 형식으로 공간을 분할한다.(레이아웃 생성)
<body>
<div>block 형식으로 레이아웃 생성 1</div>
<div>block 형식으로 레이아웃 생성 2</div>
<div>block 형식으로 레이아웃 생성 3</div>
<div>block 형식으로 레이아웃 생성 4</div>
<span>inline 형식으로 레이아웃 생성 1</span><br>
<span>inline 형식으로 레이아웃 생성 2</span><br>
<span>inline 형식으로 레이아웃 생성 3</span><br>
<span>inline 형식으로 레이아웃 생성 4</span><br>
</body>이때 Block(블록), Inline(인라인)이라는 새로운 개념이 등장하는데 이에 대해 자세히 알아보자.
4. 블록(Block)과 인라인(Inline), 인라인 블록(Inline-block)의 뜻, 특징
(1) 블록(Block)
- 대표적으로 div 태그가 있으며, 블록 속성을 지닌 태그들은 태그의 데이터와 관계없이 무조건 한 줄을 점유하고 있는 상태이며 다음 태그가 선언되는 경우 반드시 줄 바꿈이 적용된다.
- 블럭 태그는 또 다른 블럭 태그를 자식 태그로 가질 수 있다.
- 아래와 같은 태그들이 대표적인 블록 태그이다.
<h1></h1>
<div></div>
<p></p>
<ul></ul>
<ol></ol>
<table></table>
<form></form>
(2) 인라인(Inline)
- 대표적으로 span 태그가 있으며, 인라인 속성을 지닌 태그들은 데이터의 크기만큼만 공간을 점유하고 줄 바꿈을 하지 않는다.
- 인라인 태그는 블럭 태그를 자식 태그로 가질 수 없다.
- 속성으로 width, height을 사용할 수 없다.
- margin, padding-top, bottom을 사용할 수 없다.
- line-height를 사용할 수 없다.
- 아래와 같은 태그들이 대표적인 인라인 태그이다.
<span></span>
<strong></strong>
<small></small>
<a></a>
<img src="img/img001.png">
<input>
(3) 인라인 블록(Inline-block)
- 인라인 속성과 블록 속성을 모두 가지고 있는 속성을 말한다.
- 기본적으로 인라인 속성을 가지고 있으나, 인라인 태그에선 할 수 없었던 width, height / line-height의 값을 자유롭게 설정할 수 있는 특징을 갖는다.
- margin, padding-top, bottom을 사용할 수 있다.
5. 부모 요소(Parents element), 자식 요소(Child element)
- HTML은 특정 태그 공간에 또 다른 태그가 존재하는지 확인할 수 있다. 만약 특정 태그 안에 또 다른 태그가 존재한다면 이러한 구조를 부모-자식 요소, 또는 트리(Tree) 구조라고 할 수 있다.
- 상위 요소가 하위 요소를 감싸고 있는 구조를 예로 들어보면 이때 상위 요소를 부모 요소(Parents element), 하위 요소를 자식 요소(Child element)라고 한다.
- 다소 추상적일 수 있으니 아래와 로그인 구현 화면을 예시로 확인해 보자.
<body>
<div class="login">
<div class="login-title">
<h1>로그인 화면입니다.</h1>
<h5>아이디와 비밀번호를 정확히 입력하세요.</h5>
</div>
<div class="login-input">
<a>
ID : <input type="text">
</a>
<p>
PW : <input type="password">
</p>
</div>
</div>
</body><body> 최상위 태그가 부모 요소라고 하면, 그 아래 "login" 클래스는 자식 요소가 되며
"login" 클래스가 부모 요소라고 하면 그 아래 "login-title"클래스는 자식 요소가 된다.
마찬가지로 "login-title" 클래스가 부모 요소라면, 아래 h1 태그가 자식 요소가 된다.
이처럼 부모 - 자식 요소는 유기적으로 물려있는 구조인 것을 확인할 수 있다.
6. HTML 문서의 기본적인 구조
- HTML 문서 파일의 확장자는 .html이다.
- 아래와 같이 HTML 문서는 <html> 태그로 시작하여 </html> 태그로 끝나게 된다.
- HTML 문서의 내부는 아래와 같이 <head> 태그와 <body> 태그로 이루어져 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- <!DOCTYPE html> : 해당 웹페이지의 문서가 HTML5 문서임을 나타낸다.
- <head> 태그의 내용은 웹 문서에 대한 정보로 브라우저에선 실제로 나타나지 않으며 HTML 문서의 메타 데이터(Metadata)를 정의한다.
- <title> 태그는 웹 문서의 제목을 정의하기 위해 사용된다. 웹 브라우저의 툴바에 제목이 나타난다.
- <body> 태그에 적힌 내용들이 실제 사용자들이 마주하는 화면이다.
'프론트엔드(Front-End) > HTML(Hypertext Markup Language)' 카테고리의 다른 글
| [HTML] - 제목과 문단을 담당하는 태그(h, br, hr,  ) (0) | 2022.12.22 |
|---|---|
| [HTML] - HTML의 뜻, 여러 가지 태그(Tag) (1) (0) | 2022.07.13 |
댓글