HTML5 기본 요소
HTML5는 태그 요소 속성으로 구성됩니다. 태그는 HTML 페이지에서 하나의 객체를 만듭니다. 태그를 통해 하나의 객체가 만들어집니다.
태그
태그는 2 종류가 있습니다. 시작 태그와 끝 태그가 있습니다. 두개의 태그가 하나의 객체를 형성하게 됩니다.
단독으로 사용되는 태그도 있습니다. 크게 HTML5 표기법과 XHTML5 표기접으로 구분됩니다. br, image, em 태그들이 단독으로 사용되는 빈 태그입니다.
속성
태그를 통해서 객체가 생성됩니다. 반면 속성은 생성된 객체에 추가적인 정보를 삽입할 때 사용됩니다. 객체에 적용할 수 있는 속성들은 W3C 재단에서 미리 정해놓고 있습니다.
주석
HTML5에서도 주석을 사용할 수 있습니다. 보통 슬래시(/)가 사용되지만 HTML5에서는 <!-- --> 기호가 사용됩니다.
HTML5 페이지 구조
HTML5 코드는 다음처럼 구성됩니다.
<!DOCTYPE html>
현재 이 html 문서가 HTML5임을 표시합니다. 이것도 W3C 재단에 의해 HTML5 문서는 이 객체가 반드시 포함되어야 한다는 표준으로 정립되어 있습니다.
<html lang="ko>
웹 브라우저에게 이 문서가 특정 언어로 제작되었다는 것을 알려주는 객체입니다. 넣지 않아도 아무런 문제가 되지는 않습니다.
<head></head>
meta, title, script, link, style, base 태그를 삽입하는 객체입니다.
<meta>
문자열 인코딩, viewport 적용(모바일 기기용), IE 적용 여부등 웹 페이지에 추가 정보를 전달하는 객체입니다.
<body></body>
사용자에게 실제로 보여지는 객체입니다.
여러가지 태그들
<title> 태그
브라우저 탭에 표시되는 타이틀을 표시합니다.
글자 태그
글자는 h1~h6 까지 각자 크기가 다른 태그를 사용할 수 있습니다. 본문을 적기 위해서는 p 태그를 사용합니다.
앵커 태그
하이퍼텍스트 기능을 담은 태그입니다. 정보를 가지고 있는 위치로 이동시켜줍니다. HTML의 태생인 조직화된 문서를 구성하는 핵심 태그입니다.
a 태그는 href라는 속성을 가집니다. 만약 이동하지 않는 앵커 태그를 삽입하고자 할 경우 #을 넣어줍니다.
앵커 태그를 클릭하면 제 블로그로 이동합니다.
앵커 태그를 통해 페이지 내부에서도 이동할 수 있습니다. id 속성 값을 href 속성에 지정해주면 해당 id 속성을 가진 태그가 위치한 곳으로 이동합니다.
줄바꿈 태그
h1, p 글자태그는 블록 태그라고도 불립니다. 즉 줄바꿈이 자동으로 일어나는 것이죠. 만약 블록 태그 안에서 줄바꿈을 넣어야 하는 경우 br 태그를 사용할 수 있습니다.
줄바꿈 뒤에 구분선을 넣기 위해서는 hr 태그를 사용합니다.
글자 스타일 태그
다양한 스타일을 구현할 수 있습니다.
루비 문자
일본어의 경우 문자 위에 새로운 문자를 얹어야 하는 경우 루비 문자를 사용해야 합니다.
목록태그
목록태그는 메뉴를 구성할 때 사용됩니다.
| ul | 순서 없는 목록 |
| ol | 순서 있는 목록 |
| li | 목록 요소들 |
<body>
<ul>
<li>Prime</li>
<li>엔터프라이즈</li>
<li>전자책</li>
<li>VOD</li>
</ul>
</body><body>
<ol>
<li>Prime</li>
<li>엔터프라이즈</li>
<li>전자책</li>
<li>VOD</li>
</ol>
</body>
테이블 태그
HTML5 표준에서 테이블을 생성할 수 있습니다.
| table | 테이블 태그 구조 형성 |
| thead | 테이블 헤더 설정 |
| tbody | 테이블 바디 설정 |
| tr | table row로 각 열 값 설정 |
| th | 테이블 제목 값 설정 |
| td | 테이블 행 내부 데이터 |
<body>
<table border="1">
<thead>
<tr>
<th>Head1</th>
<th>Head1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
</body>
테이블 태그에 속성은 크게 border, colspan, rowspan이 있습니다.
<body>
<table border="1">
<thead>
<tr>
<th colspan="2">Head1</th>
<th colspan="2">Head1</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Data1</td>
<td rowspan="2">Data2</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
</body>
이미지 태그
HTML 문서에 이미지를 넣기 위한 태그입니다. src 속성에 이미지의 위치를 지정할 수 있습니다.
<body>
<img src="" alt="" >
</body>
| src | 이미지 소스 |
| alt | 이미지가 출력되지 않을 때 대체 텍스트 출력 |
| width | 이미지 가로 크기 |
| height | 이미지 세로 크기 |
이미지의 크기를 모를 때 더미 이미지를 통해 이미지의 크기를 가늠해볼 수 있습니다.
오디오 태그
HTML5 표준이 정립되면서 플러그인 없이 웹 페이지에서 음악을 재생할 수 있습니다. src 속성에 오디오 값을 지정할 수 있습니다.
<body>
<audio src="" controls autoplay loop></audio>
</body>| src | 오디오 파일 경로 |
| preload | 음악을 재생하기 전에 모든 데이터를 load 할지 결정 |
| autoplay | 자동 재생 설정 |
| loop | 반복 재생 설정 |
| controls | 음악 재생 도구 출력 여부 |
간혹 속성에 controls="controls" / autoplay="autoplay" 라고 동일한 속성을 반복해서 넣는 경우가 있는데 XHTML5 표준 형식입니다. HTML5 형식에서는 그냥 속성값을 한번만 삽입하면 됩니다. 아래 사이트에서 dummy audio 파일로 테스트 해보세요.
https://file-examples.com/index.php/sample-audio-files/
source 태그
브라우저 마다 지원하는 파일 형식이 상이합니다. 브라우저 별로 다른 확장자 지원을 통일하기 위해 사용되는 태그가 바로 source 태그입니다.
source 태그를 사용하면 모든 웹 브라우저에서 파일을 재생할 수 있습니다.
<body>
<audio controls>
<source src="source.mp3" type="audio/mp3">
<source src="source.ogg" type="audio/ogg">
<source src="source.wav" type="audio/wav">
</audio>
</body>
비디오 태그
HTML5가 표준으로 적용되면서 웹에서 비디오도 재생할 수 있습니다.
video 태그 속성은 다음과 같습니다.
| src | 비디오 파일 경로 |
| poster | 비디오 준비중 노출 이미지 |
| preload | 비디오 재생 전 모두 데이터 로딩할지 결정 |
| autoplay | 자동 재생 설정 |
| loop | 반복 재생 설정 |
| width | 비디오 가로 크기 설정 |
| height | 비디오 세로 크기 설정 |
아래 사이트에서 webm 형식의 비디로 URL을 가지고 실습해보세요.
https://www.webmfiles.org/demo-files/
입력 태그
HTML 문서에서 사용자로부터 데이터를 입력받는 태그입니다. 로그인이나 검색어를 입력할 때 사용됩니다.
input 태그
정보를 입력받는 태그입니다. input 태그로 전달받을 수 있는 데이터는 일반 텍스트 뿐만 아니라 file도 받을 수 있습니다. 또한 일반 텍스트 양식에 따라 다른 형태로 표시할 수 있습니다.
<body>
<input placeholder="id" type="text" name="text"><br>
<input placeholder="password" type="password" name="password"><br>
<input placeholder="email" type="email" name="email"><br>
<input type="file" name="file"><br>
<hr>
<input type="submit" style="width:180px;">
</body>
input type 속성에는 일반 텍스트 뿐만 아니라 다양한 형태의 데이터를 담을 수 있습니다.
| button | 버튼 생성 |
| checkbox | 체크박스 생성 |
| file | 파일 업로드 양식 생성 |
| hidden | input 숨김 |
| image | 이미지 파일 업로드 생성 |
| password | 비밀번호 양식 생성 |
| radio | 라디오 버튼 생성 |
| reset | 초기화 버튼 생성 |
| submit | 제출 버튼 생성 |
| text | 텍스트 입력 양식 생성 |
| color | 색상 선택 양식 생성 |
| date | 일 선택 양식 |
| datetime | 날짜 선택 |
| datetime-local | 지역 날짜 선택 |
| 이메일 입력 양식 | |
| month | 월 선택 양식 |
| number | 숫자 생성 양식 |
| range | 범위 선택 |
| search | 검색어 양식 |
| tel | 전화번호 입력 |
| time | 시간 선택 |
| url | URL 주소 입력 |
| week | 주선택 |
label 태그
input 태그를 설명하기 위한 용도로 사용됩니다.
<body>
<label for="text">text</label>
<input placeholder="id" type="text" name="text"><br>
<label for="password">password</label>
<input placeholder="password" type="password" name="password"><br>
<label for="email">email</label>
<input placeholder="email" type="email" name="email"><br>
<input type="file" name="file"><br>
<hr>
<input type="submit" style="width:180px;">
</body>
textarea 태그
input 태그와 동일하게 데이터를 전달받는 태그입니다. 하지만 input 태그와 다르게 여러 줄의 글자를 입력받을 수 있습니다.
textarea 태그의 속성은 2가지가 있습니다. 사이즈를 지정할 수 있습니다.
| cols | 양식의 넓이를 지정합니다. |
| rows | 양식의 높이를 지정합니다. |
우측 아래 아이콘을 클릭해서 움직이면 영역의 크기를 변경시킬 수 있습니다. 크기를 고정하기 위해서는 CSS style 속성에서 resize를 none로 지정합니다.
select 태그
select 태그는 사용자에게 다양한 옵션 중 하나를 선택받을 때 사용됩니다. select 태그 하위에는 option 태그를 삽입해 다양한 옵션을 지정해줍니다.
<body>
<select>
<option value="">선택</option>
<option value="">selection 1</option>
<option value="">selection 2</option>
<option value="">selection 3</option>
<option value="">selection 4</option>
<option value="">selection 5</option>
</select>
</body>
form 태그
HTML 문서에서 사용자로 부터 전달받은 텍스트를 서버로 전송하는 태그입니다. 예를 들어 서버에 GET 요청으로 사용자가 입력한 검색어 결과를 보여줘야 된다고 하면 검색어 처리를 하는 서버의 service router를 action으로 지정하고, method는 GET으로 지정하면 됩니다.
| action | 데이터 전달 위치 지정 |
| method | 데이터 전달 방식 지정 |
div 태그
웹 페이지의 공간을 분리하기 위해 사용되는 태그입니다. HTML 문서에서 가장 광범위하게 사용되는 태그입니다. 웹 페이지 공간을 구분하는 이유는 다양한 레이아웃을 구성할 수 있기 때문입니다.
아래 보시는 그림 처럼 div 태그로 구역을 나눈 후 레이아웃을 지정할 수 있습니다.
시맨틱 구조 태그
HTML5의 가장 큰 혁신은 시맨틱 태그 적용입니다. 시맨틱이란 의미론적이란 뜻을 가집니다. 즉, 태그만 봐도 어떤 기능을 담당하고 있는지 한번에 확인할 수 있습니다.
웹 페이지를 보는 사람은 제목과 본문을 구분할 수 있지만 크롤봇은 그렇지 못합니다. 따라서 웹 페이지에서 효율적으로 데이터를 다루기 위해서는 시맨틱 태그를 사용합니다.
| header | 웹의 헤더 |
| nav | 네비게이션 |
| aside | 사이드 바 |
| section | 여러 공간을 감싸는 영역 |
| article | 글자가 담긴 본문 영역 |
| footer | 푸터 |
시맨틱 태그들은 div 태그와 같이 공간을 분리하는 기능을 가집니다.
<body>
<header>Web site Header</header>
<nav>
<ol>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
</nav>
<section>
<article>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores assumenda nobis, numquam placeat libero, consequatur consectetur asperiores blanditiis eum quas aperiam id itaque. Assumenda iste numquam rem obcaecati cupiditate est!</p>
</article>
<hr>
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, commodi sit error veritatis cum aliquam, temporibus eaque, magni dolorem aperiam vel pariatur eum! Eveniet iure suscipit similique in nisi maiores.</p>
</article>
</section>
</body>위 코드 처럼 구역을 나누는데 시맨틱 태그를 사용하면 크롤봇 입장에서 훨씬 효율적으로 데이터를 뽑아낼 수 있습니다.
정리
웹의 역사와 HTML5를 구성하는 간단한 태그들에 대해서 간단하게 알아보았습니다. HTML5를 적용해서 웹 사이트를 구성할 수 있게 되었습니다. 하지만 보다 현대적이고 예쁜 웹 사이트를 만들기 위해서는 CSS에 대해서 학습해야 합니다.
다음 콘텐츠에서는 CSS에 대해 학습해보고 HTML5와 어떻게 결합되는지 알아보도록 하겠습니다. 웹은 HTML5+CSS3+Javascript 3가지만 공부하시면 누구나 쉽게 만들 수 있습니다. 어떤 디바이스에서는 작동하는 프로그램을 만들 수 있다는게 가장 큰 장점이라고 생각합니다.
'Programming' 카테고리의 다른 글
| CSSOM 트리 DOM과 무엇이 다른가? (0) | 2023.01.16 |
|---|---|
| HTML5 웹페이지 만들기 #4 CSS3 사용법 (0) | 2023.01.13 |
| HTML5 웹페이지 만들기 #1 웹의 발전 (0) | 2023.01.08 |
| HTML 기초 #1 HTML 이란? (0) | 2023.01.06 |
| AWS 10,000 크레딧 수령하는 방법 (0) | 2023.01.05 |
댓글