[HTML] html 간단 정리(html이란?, html 기본 구조, html 기본 태그)

HTML이란?

HTML은 Hypertext Markup Language의 약자로 웹 문서의 내용을 구성할 때 사용하는 언어이다.

따라서 우리가 눈으로 보이는 웹 페이지는 모두 HTML로 작성되어 있다.

HTML의 기본 구조

HTML의 기본 구조는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
    <title>페이지 제목</title>
</head>
<body>
</body>
</html>

처음에는 <!DOCTYPE html> 태그를 시작으로 해당 문서가 html임을 명시한 뒤,

<html>태그로 전체 틀을 감싼다.

그 안에는 크게 <head>와 <body> 태그로 영역이 나뉜다.

<head> 태그는 문서를 설명하는 여러 정보를 표시하며,

<body> 태그는 눈에 보이는 정보를 표시한다.

웹 페이지에 보이는 모든 내용들은 위에 표시된 여는 <body> 태그와 닫는 </body> 태그 안에 있어야 한다.

HTML 기본 태그

<body> 태그 안에는 웹 문서를 구성하는 여섯 가지의 기본 태그(텍스트, 미디어, 링크, 리스트, 테이블, 입력 태그)를 사용할 수 있다.

간단히 설명하면 다음과 같다.

1. 텍스트 태그

글 작성을 위한 것. <h1>~<h6>, <p> 태그 등이 있다.

<body>
    <h1>주제, 머릿글1</h1>
    <h2>부주제, 머릿글2</h2>
    <p>단락으로 묶을 글자</p>
</body>

h1부터 h6까지 숫자가 커질 수록 글자 크기는 작아진다.

<p> 태그는 텍스트 단락을 표시한다.

페이지를 확인하면 다음과 같이 나온다.

2. 미디어 태그

이미지, 오디오, 비디오 등을 표현한다. <img>, <audio>, <video> 태그가 있다.

src(source) 속성에 주소를 넣어 경로를 지정해야 한다.

<img src="이미지 주소" />
<audio src="오디오 주소"></audio>
<video src="영상 주소"></video>

3. 링크 태그

링크 태그는 클릭 시 다른 페이지로 이동할 수 있게 하며, <a> 태그를 사용해서 링크를 만들 수 있다.

<a> 태그는 href 속성을 갖는다. href에 이동할 페이지 주소를 적어주면 된다.

<a> 태그에 target 속성을 넣을 수 있는데, 페이지를 어떻게 열 지 결정해준다.

따라서 target="_blank"로 적어주면 새 창에서 페이지가 열린다.

글에 링크를 걸 수도 있고, 이미지에도 링크를 걸 수 있다.

<a href="http://google.com">구글</a>로 이동
<a href="http://google.com" target="_blank">구글</a>로 이동

<a href="페이지 주소"><img src="이미지 주소" /></a>

4. 리스트 태그

리스트 태그는 목록 생성 시 사용하며, 비정렬 리스트<ul>와 정렬 리스트<ol>가 있다.

리스트 태그는 내부에 리스트 아이템<li>을 갖는다.

순서가 없는 목록, 즉 비정렬 리스트는 <ul> 태그를 사용한다.

<ul>
	<li>햄버거</li>
	<li>감자튀김</li>
	<li>콜라</li>
</ul>

페이지로 띄우면 다음과 같이 나온다.

순서가 있는 목록, 즉 정렬 리스트는 <ol> 태그를 사용한다.

<ol>
	<li>햄버거</li>
	<li>감자튀김</li>
	<li>콜라</li>
</ol>

확인하면 다음과 같이 나온다.

5. 테이블 태그

표를 만들어주는 태그다.

테이블 태그의 구성요소는 테이블의 헤더 부분을 만드는 <th> 태그, 행을 만드는 <tr> 태그, 열(각 행의 데이터)을 만드는 <td> 태그가 있다.

<th> 태그는 가운데 정렬과 굵은 글씨가 디폴트다. 실질적으로 <th> 태그를 많이 사용하지는 않고 헤더로 <tr> 태그를 많이 사용한다.

<table border="1">
    <th>헤더1</th>
    <th>헤더2</th>
    <tr> <!--첫 번째 줄-->
        <td>햄버거1</td>
        <td>햄버거2</td>
    </tr>
    <tr> <!--두 번째 줄-->
        <td>콜라1</td>
        <td>콜라2</td>
    </tr>
</table>

페이지로 확인해보면 다음과 같다.

6. 입력 태그

입력 태그는 사용자의 입력을 받는다. 입력 태그에는 <input>, <textarea>, <select> 태그 등이 있다.

<input> 태그는 웹 페이지 작업에 필수적인 요소이다.

다음과 같이 작성한다.

<label> 태그는 이름표를 붙이기 위한 것이라고 보면 된다.

<label>이름: </label>
<input type="text" />

type에 따라 text, date, checkbox, radio 등의 다양한 입력이 가능하다.

    <div>
        <label for="burger">이름: </label>
        <input type="text" id="burger" />
    </div>
    <div>
        <label>생년월일: </label>
        <input type="date" />
    </div>
    <div>
        <input type="checkbox" id="ham" />
        <label for="ham">이메일 수신 동의</label>
    </div>
    <div>
        <input type="radio" id="fr" name="team" />
        <label for="fr">프론트 엔드</label>
        <input type="radio" id="bk" name="team" />
        <label for="bk">백 엔드</label>
    </div>

<input> 태그는 <label> 태그와 주로 함께 사용되는데, <label> 태그가 <input> 태그를 도와주는 역할을 한다.

<label for="burger">이름: </label>
<input type="text" id="burger" />

<label>안에 for=""와 <input>안에 id=""를 작성하고 for값과 id값을 일치시키면 서로 연결된다.

그래서 차이가 눈으로 보이지는 않지만 입력창이 아닌 텍스트(이름: )에 커서를 갖다대어 클릭하게 되면 입력창에 커서가 생성되어 편의성을 준다. 특히 checkbox나 radio를 사용할 때 텍스트만 클릭해도 선택이 되어 편리하다.

label for를 사용하지 않고 연결하려고 할 경우에는 <input> 태그를 <label> 태그로 감싸주면 동일하게 연결된다.

<label>이름: <input type="text" /></label>

<textarea> 태그는 여러 줄의 텍스트를 입력할 수 있다.

장문의 글을 입력할 때 사용하며, 시작 태그와 종료 태그로 구성되어 있다.

영역의 크기를 지정하려면 cols, rows의 속성을 사용해야 한다.

예를 들어 cols="30"을 지정하면 30글자, rows="5"로 지정하면 다섯 줄이 된다.

CSS에서 width, height 속성을 지정할 수도 있다.

<textarea cols="30" rows="5"></textarea>

<select> 태그는 여러 선택지 중 하나를 고를 때 <option> 태그와 함께 사용한다.

선택 창을 클릭하면 목록을 펼쳐서 항목을 볼 수 있다.

<select> 내부에 한 개 이상의 <option> 태그를 적어주면 된다.

<select name="속성값">
    <option value='데이터1'>노출값1</option>
    <option value='데이터2'>노출값2</option>
    <option value='데이터3'>노출값3</option>
</select>

예를 들어 아래와 같이 작성을 한다.

<select name="foods">
    <option value='' selected>-- 선택 --</option>
    <option value='hamburger'>햄버거</option>
    <option value='pizza'>피자</option>
    <option value='chicken'>치킨</option>
</select>

<option> 태그 안에 selected 속성을 붙이면 목록을 펼치기 전 '-- 선택 --' 항목이 보이도록 설정할 수 있다.

<option> 태그 안에 disabled 속성을 넣게 되면 내용은 보이지만 선택할 수 없도록 설정된다.

위처럼 작성하면 다음과 같이 나온다.

<select> 태그 안에 size 속성을 넣으면 크기만큼 펼쳐진 리스트박스가 된다.

<select name="foods" size="7">
    <option value='' selected>-- 선택 --</option>
    <option value='hamburger'>햄버거</option>
    <option value='pizza'>피자</option>
    <option value='chicken'>치킨</option>
    <option value='five'>5</option>
    <option value='six'>6</option>
    <option value='seven'>7</option>
</select>