W3C(World Wide Web Consortium)란?
웹 표준과 가이드라인을 개발하기 위한 목적으로 벤터에 중립적인 기관들이 모여 구성한 국제 컨소시엄을 말한다.
팀 버너스 리를 중심으로 1994년에 설립되었다.
웹 기술은 상호 간에 호환성이 있어야 하며, 어떤 H/W나 S/W에서도 웹에 접근 가능해야한다는 "웹 상호운용성(Web Interoperability)"을 목표로 한다.
HTML5는 2021년 이후 WHATWG(Web Hypertext Application Technology Working Group)에서 표준안을 제시하고 있다.
HTML(Hyper Text Markup Language)
Hyper Text에 의해 연결될 수 있는 웹 페이지 구조를 기술하기 위한 Markup 언어이다.
HTML을 해석할 수 있는 웹 브라우저에 의해 이 기종의 컴퓨터 시스템에서도 문서 표현이 가능하다.
HTML element는 HTML 페이지를 구성하는 블록이며, 태그(Tag)라 부른다.
Tag는 제목, 문단, 테이블, 이미지 등과 같은 내용을 표시하거나, 문서를 연결시킨다.
※ Hyper Text란?
1960년 테오도르 넬슨(Theodore Nelson)이 개념 제안하였다.
문서 내의 정보를 찾기 위해 책이나 트리구조에서처럼 순차적으로 선형 접근하는 것이 아닌, 문서를 중간에 뛰어 넘을 수 있도록 정보 또는 문서를 연결한 비순차적·비선형적 문서인 특징을 가진다.
1989년 팀 버너스 리가 HTTP와 HTML을 제안하고 최초 시연하였다.
HTML5(Hyper Text Markup Language version 5)
HTML 4.01, XHTML 1.0, DOM을 확장한 HTML 차세대 표준을 말한다.
Active X나 Flash와 같은 플러그인을 설치하지 않고, 웹 브라우저만으로 원하는 웹 애플리케이션을 만들 수 있도록 기존의 HTML을 발전시킨 것이다.
의미적 요소와 멀티미디어 요소 외에 별도의 추가 플러그인 없이 웹 애플리케이션을 동작시키기 위한 HTML 스크립팅 등이 표준화되었다.
웹 페이지를 꾸미기 위한 속성이나 태그의 기능들을 CSS(Cascading Style Sheet)가 담당하도록 역할을 변경시켰다.
HTML5 주요 특징 (1)
시맨틱 요소(Semantic elements) 추가
<header>, <nav>, <article>, <section>, <aside>, <footer> 등
폼 요소에 새로운 속성들 추가됨
number, date, time, calendar, range 등
멀티미디어를 위한 새로운 요소 지원
웹 브라우저에서 비디오나 오디오를 재생
예전 방법: Adobe의 플래시
HTML5: <audio>, <video> 태그를 이용해서 지원
그래픽을 위한 새로운 요소 지원
그래픽을 그리기 위한 <canvas> 컨테이너와 script 제공한다.
벡터 그래픽스를 지원하는 SVG(Scalable Vector Graphics) 지원한다.
또한, WebGL 3D를 이용하여 3차원 그래픽을 지원한다.
새로운 API 도입
웹 애플리케이션 개발을 위한 API 제공 - 오프라인 상태에서도 실행 가능하다.
드래그 앤 드롭(Drag-and-drop) - 요소들을 마우스로 끌어서 넣을 수 있다.
웹 스토리지(Web Storage) - 쿠키를 대체할 수 있는 웹 저장소 기능을 제공한다.
위치 정보(Geolocation) 제공 - 지도 기능을 제공한다.
웹 SQL 데이터베이스(Web SQL Database) 제공
파일 API 지원 - 파일 업로드와 파일 관리 기능을 제공한다.
웹소켓(WebSocket) API 제공 - 서버와 브라우저 간의 양방향 통신 기능을 제공한다.
HTML5 문서의 기본 구조
선언부를 다음과 같이 정의한다.
<!DOCTYPE html>HTML 문서부를 다음과 같이 정의한다.
<html>
<head>
<meta charset="UTF-8">
<title>나의 첫 페이지</title>
</head>
<body>
<p>Hello Internet Programming World~!!</p>
</body>
</html>head부는 현재 웹 페이지 정보를 정의한다.
<head>
<meta charset="UTF-8">
<title>나의 첫 페이지</title>
</head>body부는 웹 페이지 본문을 정의한다.
<body>
<p>Hello Internet Programming World~!!</p>
</body>요소(Element)와 속성(Attribute)
요소(Element)
시작태그와 종료태그로 이루어진 문서의 구성 요소를 말한다.
요소 = (시작태그 + 콘텐츠 + 종료태그)
시작태그: <title>
콘텐츠: 나의 웹페이지
종료태그: </title>
<title>나의 웹페이지</title>속성(Attribute)
속성은 요소에 대한 추가적인 정보를 제공한다.
속성은 항상 시작태그에 이름="값" 형태로 기술된다.
href: 속성 이름
<a href="http://www.w3.org">W3C컨소시엄</a>
▶ 따옴표 없이 쓸 때는 빈 공백이 있으면 안 된다.
▶ 작은 따옴표로 값을 정의할 수 있다.
HTML 주석
주석(comment)은 HTML 코드를 설명하는 글을 말한다.
<!--여기에 주석을 표시합니다.-->HTML5 head부 요소
문서 title, script, style, meta 정보 등을 기술함으로써 HTML 문서에 대한 정보를 표현하는 요소를 말한다.
포함될 수 있는 HTML 요소는 다음과 같다.
<title>, <style>, <base>, <link>, <meta>, <script>, <noscript>
<meta>
웹 페이지의 작성자, 작성일자, 웹 에디터, 검색 키워드 등에 대한 정보를 표시한다.
웹 브라우저 상에 출력되지 않는다.
브라우저에게 콘텐츠를 출력 방법을 알리거나, 페이지를 재로드 시키거나, 검색엔진에게 키워드를 제공한다.
다음은 문자 인코딩을 설정하는 메타 태그이다.
<meta charset="UTF-8">다음은 검색 키워드를 설정하는 메타 태그이다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">다음은 웹 페이지 설명을 제공하는 메타 태그이다.
<meta name="description" content=" Free Web tutorials on HTML and CSS">다음은 웹 페이지 작성자를 제공하는 메타 태그이다.
<meta name="author" content="홍길동">다음은 지정된 시간(초) 후에 웹 페이지를 자동으로 새로고침(Refresh) 또는 리디렉션하는 역할을 제공하는 메타 태그이다.
<meta http-equiv="refresh" content="30">다음은 모든 기기에 너비에 맞춰서 웹 사이트를 보기 좋게 출력하도록 설정하는 메타 태그이다.
여기서, initial-scale은 초기 배율을 의미하며, 기본 크기는 1.0이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5 Paragraphs (단락)
<p>
단락을 구분하기 위한 태그(위/아래에 1줄의 여백이 생김)이다.
브라우저는 end tag가 없어도 실행되지만, 오류 방지를 위해 </p>를 기술한다.
단락 내의 모든 빈 공백, 개행, 탭 문자들은 공백 문자 1개로 출력한다.
따라서, 아래 태그와
<p>새로운 학기가 시작되었습니다. 안녕</p>다음 태그는 출력이 동일한 결과를 얻게 된다.
<p>새로운 학기가 시작되었습니다. 안녕</p><br>
강제 줄 바꿈 태그를 말한다.
◆ 태그와 태그 사이에 가능?. 그 태그의 기준은?
<pre>
소스코드에 입력된 그대로 화면에 표시하는 태그(Preformatted text)라 한다.
또한, <pre> 태그는 block-level element이다.
<pre>
아주 먼 옛날
멋진 왕자가
살았어요.
</pre><h1> ~ <h6>
제목을 정의하기 위해 사용한다.
숫자가 증가할 수록, 글자 크기가 작아지며 문단을 구분할 수 있다.
<h1>안녕</h1>
<h2>안녕..</h2>
<h3>나는 점점 작아질거야..</h3>
<h4>거의 안 보이게 될거야..</h4>
<h5>점차 사라져볼게..</h5>
<h6>진짜로 사라질게..</h6><hr>
HTML 페이지에서 주제를 구분하기 위해 선을 그린다.
<h1>안녕</h1>
<hr>
<h2>잘가</h2>| 태그 | 설명 |
| <b> | 진하게 (Bold 효과) |
| <strong> | 중요 텍스트 표시 (Bold 효과). ▶ <b> 태그와의 차이점은 <strong> 태그는 semantic 측면에서 중요한 텍스트임을 소스 코드를 관리하는 개발자에게 강조를 할 수 있다. |
| <i> | 이탤릭체 효과 (Italic 효과) |
| <u> | 오자(misspelled word) 표시 (HTML 4.01에서는 밑줄표시) (Under-line 효과) |
| <em> | 텍스트 강조 효과 (Italic 효과) |
| <mark> | highlight 마크 처리 |
| <small> | 상대적으로 작게 출력 (Inline-level element) |
| <del> | 삭제된 텍스트 표시 |
| <ins> | 추가된 텍스트로 표시 (Under-line 효과) |
| <sub> | 아래 첨자 |
| <sup> | 위 첨자 |
<body>
<p><b>안녕!</b><br>만나서 반가워!</p>
<p><i>이탈리아에서 오진 않았고,</i><u>그렇다고 미국도 아니고</u></p>
<p><em>중국도 아니고</em> <del>일본도 아니고</del></p>
<p><mark><b>한국에서 왔어!</b></mark></p>
<p><small>키가 작아서</small> 작게 보일 수도 있지만,</p>
<p><sub>사실이고</sub>키가 <sup>크지는 않지만</sup> 그래도 예쁘게 봐줘!</p>
<p><ins>앞으로 우리</ins></p>
<p><strong>잘 지내보자!</strong></p>
</body>HTML5 Styles
문법은 다음과 같다.
<tagname style="property:value;">HTML5 Entities
키보드로 입력할 수 없는 문자, 심볼, HTML 문서에서 예약어로 사용하고 있는 문자를 출력하고자 할 경우 사용한다.
'&'로 시작하여 반드시 ';'로 끝난다.
엔티티 이름을 지정하거나 코드 값으로 지정하면 된다.
| Result | Description | Entity Name | Entity Number |
| non-breaking space | |   | |
| < | less than ▶ less than or equal to는 ≤이다. |
< | < |
| > | greather than ▶ greather than or equal to는 ≥이다. |
> | > |
| & | ampersand | & | & |
| " | double quotation | " | " |
| ' | single quotation mark (apostrophe) | ' | ' |
| cent | ¢ | ¢ | |
| pound | £ | £ | |
| yen | ¥ | ¥ | |
| euro | € | € | |
| copyright | © | © | |
| registered trademark | ® | ® |
<body>
<h2>엔티티 문자의 사용</h2>
<p>< 는 &lt; 로 표현</p>
<p>> 는 &gt; 로 표현</p>
<p>" 는 &quot;로 표현</p>
<p>빈 공백 문자 &nbsp; 5칸 삽입</p>
</body>HTML5 Lists
<ul>
번호 없는 항목 나열(Unordered List)하는 태그이다.
<li> 태그로 항목을 추가한다.
CSS의 list-style-type 속성으로 항목 표기 모양을 변경한다. (disc(default, 채워진 원) | circle(채워지지 않은 원) | square | none)
<body>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea
<ul style="list-style-type:square">
<li>Green Tea</li>
<li>Black Tea</li>
<li>Honey Tea</li>
</ul>
</li>
</ul>
<ul style="list-style-type:square">
<li>Milk</li>
</ul>
</body><ol>
번호가 부여되는 항목을 나열(Ordered List)하는 태그이다.
<li> 태그로 항목을 추가한다.
<ol> 태그 속성은 다음과 같다.
| 속성 이름 | 값 | 설명 |
| type | A a I (대문자 I) i 1 |
영문 대문자 영문 소문자 로마 숫자 대문자 로마 숫자 소문자 아라비아 숫자(defatul) |
| start | number | 목록의 시작 값을 설정 |
<body>
<ol type="A">
<li>Tea</li>
<li>Coffee</li>
</ol>
<ol type="l">
<li>Tea</li>
<li>Coffee</li>
</ol>
<ol type="i">
<li>Tea</li>
<li>Coffee</li>
</ol>
<ol type="1">
<li>Tea</li>
<li>Coffee</li>
</ol>
</body>
※ Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type="1" start="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li value="10">Juice</li>
<li>Lemonade</li>
</ol>
<ol type="1" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>▶ value 로 li 태그의 시작 번호를 수정할 수 있다.
HTML5 Description Lists
<dl><dt><dd>
용어와 같은 항목들을 설명하거나 정의할 때 사용한다.
<dl><dt><dd>는 하나의 세트로 기억하자! (암기: LTD. Limited로 기억하자)
<dl>
정의 목록(Description List)을 생성하는 컨테이너 태그를 말한다.
<dt>
정의 항목(Definition Term)을 나타내는 태그이다.
<dd>
정의 내용(Definition Description)을 나타내는 태그이다.
<body>
<dl>
<dt>에스프레소</dt>
<dd>- 커피의 기본, 커피의 원액이다.</dd>
<dt>아메리카노</dt>
<dd>- 에스프레소에 물을 넣은 것</dd>
<dt>카페라떼</dt>
<dd>- 커피에 우유를 섞은 것</dd>
</dl>
</body>HTML5 Images - Image File Format for Web
그림 파일 형식
BMP
Bitmap의 약자로 윈도, OS/2 환경에서 사용되는 그래픽 파일 포맷을 말한다.
GIF
Graphic Interchange Format의 약어이다.
1987년 미국의 컴퓨서브(CompuServe)사에서 개발하였다.
256컬러만 지원하므로 다양한 색상의 이미지 저장에는 부적절하다.
예를 들면, 애니메이션(Animated GIF), 투명 그림(Transparent GIF) 등이 있다.
광고 배너 용으로 많이 사용된다.
JPG
1980년, Joint Photographic Experts Group(JPEG)에서 개발하였다.
약 1678만 컬러(24 bits)를 지원하므로 인물사진, 배경사진과 같이 고해상도 그림에 주로 사용된다.
압축 효율이 우수하나 손실 압축 방식을 사용한다.
PNG
Portable Network Graphics의 약자로 저작권이 있는 GIF를 대체하기 위해 W3C에서 제정하였다.
투명한 배경처리가 가능하다.
24 bits 컬러를 지원하며, 무손실 압축 방식을 사용한다.
▷ 품질이 중요한 경우 PNG를, 그렇지 않은 경우는 JPG를 사용하면 된다.
<img>
HTML 문서에 그림을 출력하며, 단독 태그이다.
<img src="url" alt="some_text" width="width" height="height">
<img src="url" alt="some_text" style="width:width;height:height;">
※ alt 속성이란?
: 이미지가 존재하지 않을 때 대신 출력하는 텍스트 역할을 한다.
<map>
이미지 내에의 지정된 영역을 클릭하였을 경우 연결된 문서를 출력한다.
<img src="이미지 파일명" usermap="#이미지 맵의 이름"/>
<map name="이미지 맵의 이름">
<area shape="링크되는 영역의 모양 지정"
coords="링크되는 영역의 좌표 지정"
href="링크하여 이동하게 되는 HTML 문서 파일명" />
</map>
| shape 속성 값 | 설명 | coords 속성 값 |
| rect | 사각형 링크 영역 설정 | X1, Y1, X2, Y2 |
| circle | 원형 링크 영역 설정 | X, Y, R |
| poly | 다각형 링크 영역 설정 | X1, Y1, X2, Y2, X3, Y3, ... |
<body>
<img src="images/kevin1.jpg" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="images/kevin1.jpg">
</map>
</body>HTML5 Links
다른 HTML 문서로 이동하기 위해 문서 연결을 지정한다.
문법은 다음과 같다.
<a href="url" target="value">link text</a>| 속성명 | 설명 |
| _black | 새로운 브라우저 창을 생성하여 link된 내용 표시한다. |
| _self | default. 현재 브라우저 창 또는 프레임에 link된 내용을 표시한다. |
| _top | 현재의 모든 분할된 프레임이 없어지고, 전체 윈도우 화면에 link된 내용을 표시한다. |
| _parent | 현재 프레임의 부모 프레임 전체에 HTML 문서를 표시한다. |
| framename | framename 이름을 가지는 프레임에 HTML 문서를 표시한다. |
절대경로와 상대경로
절대경로
현재의 위치(경로)와는 상관없이 호스트명을 포함한 절대적인 위치를 나타내는 경로를 말한다.
상대경로
현재의 위치(경로)를 기준으로 디렉터리나 파일의 위치를 나타내는 경로를 말한다.
현재 작업 디렉터리: ./
상위 디렉터리: ../
하위 디렉터리: 디렉터리 명
base link
페이지상의 모든 링크의 기본 target과 url을 지정한다.
<head> 태그 사이에서 사용하며, <body> 태그에서 사용할 상대 경로의 기준을 설정한다.
HTML 문서에서 한 번만 사용하되 하나의 기본 URL을 기준으로 상대 링크를 사용하는 것도 좋고, 잘못 사용 시 혼란의 소지가 있다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<base href="https://www.w3schools.com/images/" target="_black">
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="https://www.w3schools.com">W3Schools</a>
<img src="man.gif" width="24" height="39" alt="man">
<img src="woman.gif" width="24" height="39" alt="woman">
</body>HTML5 Tables
<table>
테이블을 정의하고 <tr> 태그로 행(Table Row)을 정의하며, 열(각 data를 출력할 칸을 셀(cell)이라 함. Table Data. Table Header)은 <td> 또는 <th>로 정의한다.
<table border="1">
<tr>
<td>홍길동</td>
<td>98</td>
</tr>
<tr>
<td>김철수</td>
<td>80</td>
</tr>
</table><th>
테이블의 헤더 정보를 출력하기 위한 cell 표시 태그이다.
cell의 가운데에 출력되며, 글자를 진하게 한다.
<body>
<table border="1" style="width:100%;">
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>홍길동</td>
<td>98</td>
</tr>
<tr>
<td>김철수</td>
<td>80</td>
</tr>
</table>
</body>
▶ border="1"은 경계선을 보이게 설정한다. "0"은 보이지 않게 한다.
▶ <table> 태그의 기본값은 border="0"이다.
▶ height는 % 설정이 안되고, 반드시 px만 설정할 수 있음을 주의해라.
테이블 행/열 병합 방법
1. Table의 전체 행과 열(cell) 개수 만큼 <tr>, <td>를 먼저 구성한다.
2. 병합하려는 기준 셀을 선택: 왼쪽 상단 셀이 기준이다.
3. 병합 방향에 따라 속성명을 결정
- 행 병합: colspan
- 열 병합: rowspan
4. 병합되는 셀 개수를 속성 값으로 설정
5. 병합 기준 셀의 <td> 또는 <th>에 속성="속성값"을 기술
6. 병합되는 셀 삭제
※ Example: 아래 사진을 만들어 보자!
▶ 오답 코드
<body>
<table border="1">
<tr>
<th>1열</th>
<th>2열</th>
<th>3열</th>
</tr>
<tr>
<td rowspan="2">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2열 3열</td>
</tr>
<tr>
<td colspan="3">3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
</body>▶ 정답 코드
▶ 교훈: 일단 만들고, 이후에 꼭 지워야한다.
▶ rowspan: 위, 아래 병합
▶ colspan: 왼쪽, 오른쪽 병합
<body>
<table border="1">
<tr>
<th>1열</th>
<th>2열</th>
<th>3열</th>
</tr>
<tr>
<td rowspan="2">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 2열</td>
<td>2열 3열</td>
</tr>
<tr>
<td colspan="3">3행 1열</td>
</tr>
</table>
</body><caption>
테이블의 제목을 선언한다.
테이블 당 1개의 <caption>만 선언할 수 있다. <table> 태그 안에 <caption> 태그를 선언해야한다.
CSS의 속성 caption-side로 caption 위치 설정이 가능하다.
<caption>회원 목록</caption>
※ Caption을 테이블 아래에 위치시키고, 테이블을 중앙에 정렬 시키려면?
<table border="1" style="caption-side:bottom;">경계선과 배경색 변경
이중 경계선을 제거하는 방법과 배경색 설정 방법: CSS의 속성을 설정함으로 변경시킬 수 있다!
참고로 collapse는 경계선을 없애는 속성이다.
<table border="1" style="border-collapse:collapse;">HTML5 Blocks
Block-level Elements
항상 새로운 줄에서 시작하며, 사용 가능한 전체 너비(width)를 사용한다. 즉, 요소가 한 줄 전부를 차지한다.
예: <div>, <h1> ~ <h6>, <p>, <form>, <header>, <footer>, <section>, <nav>, <ul>, <ol>, <li>, <table>, <pre> 등
<div>
다른 HTML elements의 컨테이너 역할을 한다 -> Layout을 잡기 위한 용도로 활용한다.
태그 속성이 없으며, 초기값은 block 단위로 style이 설정된다.
<body>
<div style="border:1px solid black;">
<h1>My <span style="color:red">Important</span> Heading</h1>
</div>
</body>Inline Elements
이전 element의 같은 줄 또는 다음에서 시작하며, 필요한 만큼만의 너비(width)를 사용한다. 즉, 현재 줄에서 필요한 만큼의 너비만을 차지한다.
예: <span>, <a>, <img>, <strong>, <em>, <br>, <input>, <span>, <button> 등
<span>
text에 대한 컨테이너 역할을 한다.
태그 속성이 없으며, 초기값은 text의 한 일원으로 style이 설정된다.
HTML5 iframe
<iframe>
웹 페이지 내에 웹 페이지를 출력하는 태그이다.
문법은 다음과 같다.
<iframe src="URL" height="height" width="width"></iframe>
- src는 초기에 출력할 것을 지정
- 아래 링크는 클릭시 inner에 출력하게 됨
<body>
웹 문서 내부에 웹 문서 출력<br>
<iframe src="ex15.html" height="200" width="300" name="inner">
</iframe>
<p>
<a href="https://www.w3schools.com" target="inner">W3Schools.com</a>
</p>
</body>HTML5 Layout - semantic elements
HTML5에서는 semantic elements를 사용하여 문서를 정의하고, CSS를 사용하여 출력할 문서의 모양을 설정한다.
semantic elements
| Element | Description |
| <header> | 문서 또는 섹션의 상단 머리글 정의 |
| <nav> | 메뉴이동을 위한 링크들을 관리 |
| <section> | 문서내의 섹션을 정의 |
| <article> | 독립된 내용(콘텐츠) 정의 |
| <aside> | 별도의 콘텐츠를 출력할 사이드바 영역 |
| <footer> | 문서 또는 섹션의 바닥글 정의 |
| <details> | 추가 세부 정보 정의 |
| <summary> | <details> 요소의 제목을 정의 |
| <figcaption> | <figure> 요소에 대한 caption 정의 |
| <figure> | 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정 |
| <main> | 문서의 메인 콘텐츠 지정 |
| <mark> | 마크되거나 하이라이트되는 텍스트 선언 |
| <time> | 날짜와 시간 정의 |
HTML5 멀티미디어
멀티미디어 (multimedia)
sound, music, videos, movies, animations 와 같은 것을 말한다.
웹 브라우저와 멀티미디어
첫 웹브라우저는 단지 단일 폰트와 색깔로 텍스트만 지원하였다.
이후, 글꼴과 글자색, 이미지가 웹브라우저에서 출력되었다.
과거의 몇몇 Major Broswer(예: Internet Explorer 11)들은 서로 다른 방법으로 다양한 멀티미디어 형식의 콘텐츠를 지원하였다. 단, Active-X 또는 Flash와 같은 별도의 프로그램(Plug-in)을 추가로 설치해야한다.
HTML5에서는 멀티미디어를 위한 <audio>와 <video> 태그를 추가되었다.
<audtio>
모든 브라우저가 지원하는 오디오 형식이 없기 때문에 <source>에 오디어 형식을 나열하여 사용하는 것을 권장한다.
※ Syntax
<audio src="url" controls>
Your broswer des not support the audio tag.
</audio>| Attribute | Value | Description |
| autoplay | autoplay | 오디오 파일이 준비되는 대로 자동으로 재생 |
| controls | controls | 오디오 재생을 제어하는 제어기를 표시(볼륨, 시작/정지, 타임라인 등) |
| loop | loop | 오디오를 반복하여 재생 |
| muted | muted | 무음 모드 |
| preload | auto metadata none |
페이지가 로드될 때 오디오 파일을 미리 로드할지의 여부와 방법을 지정 |
| src | URL | 오디오 파일의 URL |
지원 오디오 파일 형식
- MP3: 'MPEG- 1 Audio Layer- 3'의 약자로 MPEG기술의 음성 압축 기술
- Wav: 윈도우에서 사용되는 표준 사운드 포맷
- Ogg: 특허권을 반대하고 보다 좋은 음질을 위하여 오픈소스(Xiph.org)로 개발되었음
웹 브라우저별 오디오 파일 지원 현황
| Broswer | MP3 | WAV | OGG |
| Edge/IE | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
| Opera | Yes | Yes | Yes |
<video>
모든 브라우저가 지원하는 비디오 형식이 없기 때문에 <source>에 비디오 형식을 나열하여 사용하는 것을 권장함
※ Syntax
<video src="url" width="width" height="height" controls>
Your broswer does not support the video tag.
</video>
| Attribute | Value | Description |
| autoplay | autoplay | 비디오 파일이 준비되는 대로 자동으로 재생 |
| controls | controls | 비디오 재생을 제어하는 제어기를 표시(볼륨, 시작/정지, 타임라인 등) |
| loop | loop | 비디오를 반복하여 재생 |
| muted | muted | 무음 모드 |
| preload | auto metadata none |
페이지가 로드될 때 비디오 파일을 미리 로드할지의 여부와 방법을 지정 |
| src | URL | 비디오 파일의 URL |
| poster | URL | 비디오가 다운로드 되거나, 사용자가 플레이 버튼을 누를 때까지 보여지는 이미지 URL 설정 |
| width | pixels | 비디오 플레이어의 너비를 설정 |
| height | pixels | 비디오 플레이어의 높이를 설정 |
지원 비디오 파일 형식
- MP4: H.264 비디오 코덱과 ACC 오디오 코덱의 MPEG 4 (video/mp4)
- WebM: VP8 비디오 코덱과 Vorbis 오디오 코덱의 WebM (video/webm)
- Ogg: Theora 비디오 코덱과 Vorbis 오디오 코덱의 Ogg (video/ogg)
웹 브라우저별 비디오 파일 지원 현황
| Broswer | MP4 | WebM | Ogg |
| Edge | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
| Opera | Yes | Yes | Yes |
HTML forms
사용자가 입력한 정보를 수집하기 위한 입력 양식이다.
※ Syntax
<form action="server_URL" method="method">
.
form elements
.
</form>form elements
- <input> elements: text, checkbox, radio, submit 등
- <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>
<form> attributes
| Attribute | Value | Description |
| action | URL | submit 되었을 때 form-data를 보낼 곳 지정 |
| accept-charset | character_set | 폼 양식에서 사용되는 문자 encoding 지정 |
| autocomplete | on | off | 자동 완성 여부 설정 |
| enctype | application/x- www- form- urlencoded multipart/form- data | 서버로 전송할 때 form- data의 encode 방법 지정 (단, post method인 경우) |
| method | get | post | HTTP method 지정 |
| name | text | form 입력 양식의 이름 지정 |
| novalidate | novalidate | submit 될 때 입력양식 검증을 수행하지 않음 |
| target | _black | _self | _parent | _top | form 양식이 submit된 뒤, 결과를 출력할 프레임 지정 |
GET 방식
GET 방식은 URL 주소 뒤에 파라미터(변수)를 붙여서 데이터를 전달한다.
폼 데이터가 서버로 전송될 때, 요청 패킷의 헤더를 통해 전달한다.
서버의 입력 버퍼 크기에 제한을 받으므로, 폼 데이터가 큰 경우 데이터 손실 가능성이 있다.
전송 데이터 크기가 작고 데이터 내용이 URL에 노출되어도 무관할 때 사용한다.
캐시될 수 있으며 데이터가 북마크 될 수 있다.
POST 방식
POST 방식은 사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP request 헤더가 아닌 데이터 부분에 포함시켜서 전송하는 방법이다.
길이 제한이 없으며 보안이 유지된다(암호화되어 보안성을 보장하는 것은 아님).
데이터 내용이 주소 표시줄에 나타나지 않는다.
전송 데이터 크기가 크거나 주소 표시줄에 데이터 내용을 감추고자 할 때 사용한다.
캐시되지 않으며, 북마크시 데이터가 남지 않는다.
<input>
사용자의 입력 형태를 지정하며, type 속성 값에 따라 모양이 달라진다.
| Attribute | Value | Description |
| autocomplete | on | off | 자동완성 기능 사용 여부 |
| autofocus | autofocus | 페이지가 로드 되었을 때, 자동으로 포커스가 위치하게 된다. |
| checked | checked | 페이지가 로드 되었을 때 체크 상태가 되게 한다(단, checkbox와 radio 버튼). |
| maxlength | number | 입력 요소에 입력할 수 있는 최대 문자 개수를 지정한다. |
| multiple | multiple | 하나 이상의 값을 입력할 수 있음을 지정한다. |
| name | text | <input> 요소의 이름을 설정(파라미터 이름) |
| readonly | readonly | 읽기만 가능한 input field임을 지정 |
| required | required | 반드시 입력되어야하는 input field임을 지정 |
| size | number | 출력 문자열에 대한 <input>의 가로 길이 설정 |
| type | button, checkbox, file, hidden, image, password, radio, reset, submit, text | 입력 요소가 출력되는 모양을 설정 |
| value | text | <input> 요소의 값을 설정 |
<textarea>
여러 줄의 텍스트 입력 양식을 정의한다.
| Attribute | Value | Description |
| autofocus | autofocus | 페이지가 로드될 때 자동으로 해당 텍스트 영역에 포커스 줌 |
| cols | number | 텍스트 영역의 보이는 가로 너비를 지정 |
| dirname | textareaname.dir | 텍스트 영역의 입력 방향이 함께 제출되도록 지정 |
| disabled | disabled | 텍스트 영역을 비활성화 상태로 만듦 |
| form | form_id | 해당 텍스트 영역이 속하는 form의 id를 지정 |
| maxlength | number | 텍스트 영역에 입력할 수 있는 최대 글자 수를 제한 |
| name | text | 텍스트 영역의 이름을 지정 (서버 제출 시 key 역할) |
| placeholder | text | 텍스트 영역에 예상되는 값에 대한 짧은 힌트 텍스트를 표시 |
| readonly | readonly | 텍스트 영역을 읽기 전용으로 설정 (편집 불가) |
| required | required | 텍스트 영역을 필수 입력으로 지정 |
| rows | number | 텍스트 영역의 보이는 줄 수를 지정 |
| wrap | hard soft |
폼 전송 시 텍스트가 자동 줄바꿈 되는 방식을 지정 ▶ hard: 자동 줄바꿈 soft: 자동 줄바꿈 하지 않음 |
<button>
브라우저에 따라 다른 모양을 나타낼 수 있으므로 <input> 사용을 권장한다.
| Attribute | Value | Description |
| name | name | 버튼의 이름을 지정 (서버에 전송될 때 key 역할) |
| type | button reset submit |
버튼의 종류를 지정 |
| value | text | 버튼의 초기 값을 지정함 |
| disabled | disabled | 버튼을 비활성화 상태로 만듦 |
| autofocus | autofocus | 페이지가 로드될 때 자동으로 포커스를 받게 함 |
| form | form_id | 버튼이 속하는 form 요소의 id를 지정 (form 밖에 있어도 연결 가능) |
| formaction | URL | 폼 데이터 전송 대상 URL을 지정. 단, type="submit"일 때만 유효 |
| formmethod | get, post | 폼 데이터 전송할 때 사용할 HTTP 메서드를 지정. 마찬가지로 submit 버튼일 때만 유효 |
<select>
목록상자(콤보박스)를 생성하기 위한 태그로, <option> 태그로 항목을 추가한다.
| Attribute | Value | Description |
| disabled | multiple | 콤보 박스를 사용하지 못하게 한다. |
| name | name | 콤보 박스의 이름을 지정한다. |
| multiple | multiple | 콤보 박스의 항복을 동시에 여러 개 선택 가능하도록 설정 |
| size | number | 콤보 박스에 보이는 항목의 개수를 지정 |
| required | required | 사용자가 반드시 입력해야하는 항목임을 지정 |
<option>
<select> 태그 내에서 목록상자의 항목을 설정한다.
| Attribute | Value | Description |
| disabled | disabled | 옵션을 비활성화 한다. |
| label | text | 옵션에 대한 간략한 라벨 지정 |
| selected | selected | 페이지가 로드될 때 선택된 상태로 설정 |
| value | text | 서버로 전송할 값 설정 |
<optgroup>
연관된 <option> 태그들을 그룹화한다.
<fieldset>
관련된 입력 요소들끼리 그룹으로 만들기 위해 사용한다.
<legend>
<fieldset> 안의 입력 그룹에 제목을 제공하는 태그이다.
<label>
입력 요소에 대한 라벨을 지정한다.
주요 목적은 입력 필드와 설명 텍스트 연결을 위해 사용된다.
<label for="email">이메일:</label>
<input type="email" id="email">위와 같은 코드에서 label 태그와 input 태그가 연결되어 있으면, 사용자는 '이메일:' 텍스트를 클릭해도 <input>으로 focus 되는 UX 경험을 향상시킬 수 있다.
HTML5의 신규 <input> type
| Attribute | Description |
| date | 날짜 선택을 위한 컨트롤 정의 (년, 월, 일 / 시간 없음) |
| datetime | 날짜와 시간을 입력할 수 있는 컨트롤 정의 (년, 월, 일, 시, 분, 초 / 국제 표준 시간대) |
| datetime-local | 날짜와 시간 입력 컨트롤 정의 (년, 월, 일, 시, 분, 초 / 로컬 시간대) |
| month | 월과 년만 선택할 수 있는 컨트롤을 정의 (시간대 없음) |
| week | 연도와 주(week)를 선택할 수 있는 컨트롤 정의 (시간대 없음) |
| time | 시, 분, 초 등 시간만 입력하는 컨트롤 정의 (시간대 없음) |
| color | 컬러 피커(color picker) UI 제공 (색상 선택 도구) |
| number | 숫자를 입력할 수 있는 필드를 정의 |
| range | 정확한 값보다 범위(slider) 입력에 적합한 컨트롤 정의 |
| search | 검색어 입력 필드를 정의 (기본 텍스트 필드와 비슷하지만 브라우저 최적화됨) |
| tel | 전화번호 입력 필드를 정의 (패턴 검증 없이 형식 지정) |
| 이메일 주소 입력 필드를 정의 (자동 유효성 검사 제공) |
'대학 강의 > 인터넷 프로그래밍' 카테고리의 다른 글
| JSP 개요 (0) | 2025.05.04 |
|---|---|
| JavaScript Overview (0) | 2025.04.02 |
| 인터넷 프로그래밍 개요 (0) | 2025.03.24 |
| CSS3 (0) | 2025.03.23 |
