[HTML] HTML의 여러 가지 태그 (2), 부모 요소(Parents element)와 자식 요소(Child element)
이전 포스팅에서는 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> 태그에 적힌 내용들이 실제 사용자들이 마주하는 화면이다.