[Capstone] HTML 시작

귤티·2023년 10월 15일

Capstone

목록 보기
6/17
  • HTML : 웹 페이지의 구조와 내용
    head, body, img, table 등 html 태그를 이용하여 헤더, 본문, 꼬리말, 제목, 장, 절, 문단의 사작과 끝, 본문 텍스트를 지정하며, 어떤 이미지가 출력될 것인지 등을 지정한다.
  • CSS : 웹 페이지의 모양
    웹 페이지가 화면에 출력되는 모양을 지정하는 데사용된다. 글자 폰트나 크기, 배경색, 글자색, 문단의 여백(margin), 와곽선의 굵기와 형태 등 다양한 모양을 지정한다.
  • Javascript : 웹 페이지의 동적 변경 및 응용 프로그램 작성
    사용자의 마우스나 키보드 입력에 따라 웹 페이지를 동적으로 변화시키거나 게임 등 웹 페이지를 하나의 응용프로그램으로 만드는 데 이용된다.

HTML의 기능

  • 웹 폼(Web Form) - 사용자로부터 입력을 받기 위한 다양한 HTML 태그와 속성을 제공한다.
  • 오디오, 비디오(Audio/Video) - 오디오나 비디오를 재생하는 HTML 태그를 지원하며, 별도의 플러그인 설치 없이 재생이 가능하다. 또한 자바스크립트 코드를 이용하여 오디오, 비디오의 재생, 중지 등을 제어할 수 있다.
  • 캔버스 - < canvas > 태그와 자바스크립트를 이용하여 웹 브라우저 상에서 동적으로 2, 3차원 그래픽을 그릴 수 있는 API이다.
  • SVG(Scalable Vector Graphics) - XML로 표현하는 2차원 벡터로 그래픽을 그리는 API이다.
  • 웹 스토리지(Web Storage) - 웹 브라우저가 실행되는 로컬 컴퓨터에 데이터를 저장하는 API이다. 이 기능으로 쇼핑몰, 게임 등에서 발생하는 데이터를 사용자 컴퓨터에 저장하여 웹의 성능을 높이거나 웹 서버와 연결되지 않은 상황에서도 웹 애플리케이션을 실행할 수 있다.
  • 웹 SQL 데이터베이스(Web SQL Database) - 웹 브라우저가 실행되는 로컬 컴퓨터에 DB를 두고 표준 SQL로 활용할 수 있는 API이다.
  • 인덱스 데이터베이스(Indexed Database API) - 웹 브라우저가 실행되는 로컬 컴퓨터에 대용량의 데이터를 저장하고, 인덱스를 이용하여 검색하는 API이다. 이 기능으로 데이터를 다루는 광범위한 웹 애플리케이션을 구현할 수 있다.
  • 파일 입출력(File I/O) - 로컬 컴퓨터의 파일을 읽고 쓸 수 있는 API이다.
  • 위치 정보 API(Geolocation API) - 구글 맵이나 지도 앱을 이용하지 않고, 웹 브라우저 사용자의 위치를 알아내거나 사용자의 위치를 계속 추적하여 변경되는 위치를 알려주는 API이다.
  • 웹 워커(Web Worker) - 백그라운드 작업을 만들 수 있는 API이다. 시간이 오래 걸리는작업을 백그라운드 작업(자바스크립트 코드)으로 만들어 웹 브라우저의 사용자 인터페이스가 느려지지 않도록 할 수 있다.
  • 웹 소켓(Web Socket) - 웹 브라우저에서 실행되는 웹 어플리케이션이 웹 서버에서 실행되는 응용프로그램과 직접 통신할 수 있도록 지원하는 API이다.
  • 오프라인 웹 애플리케이션(Offline Web Application) - 인터넷이 연결되지 않는 상황에서도 웹 애플리케이션이 정상적으로 실행될 수 잇도록 지원하는 API로 애플리케이션 캐시와 데이터 캐시로 구성된다.

HTML 페이지 기본

HTML(Hyper Text Markup Language)은 웹 문ㅅ를 작성하는 태그 언어이다.
HTML5에서 HTML 페이지는 <!DOCTYPE> t선언과 주석문, 그리고 헤드 부분과 바디 부분으로구성된다.

<!DOCTYPE html>
<!--이 부분은 주석문입니다. 웹 브랴ㅏ우저는 주석을 화면에 출력하지 않습니다. -->
<html>
	<head>
    	문서 제목, 자바스크립트 코드, CSS 스타일 정의, 메타 데이터 정의
    </head>
    <body>
    	문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
    </body>
</html>
<html>, <head>, <title>, <body> 태그는 HTML5 문서의 필수 태그들이다.
<!DOCTYPE html>

이 태그는 HTML5 문서임을 브라우저에 알리는 지시어로서 반드시 첫 줄에 나와야 한다. 이것은 HTML 태그가 아니며 소문자 doctype으로 써도 된다.

<!-- 주석문 -->

주석문

헤드 부분

<head> </head>

로 둘러싼 부분으로 문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다.

바디 부분
문서의 본문으로

<body> </body>

로 둘러싼ㄷ. 이곳은 자바스크립트 코드를 포함할 수 있다. 헤드와 바디 사이에는 아무것도 들어갈 수 없다.

HTML 태그

HTML 문서의 구성 원소는 태그들이다.
태그는

<html>, <head>, <title>, <h1>, <img>, <figure>, <object>, <footer>, <div> 등

100여 개가 있으며, 목적에 따라 적합한 태그로 문서를 작성한다.

태그 구성

태그는 태그 이름과 여러 속성들(attribute)로 구성되며, 하나의 속성은 속성 이름과 값으로 구성된다.

<img src="heart.jpg" width="100" height="50" alt="사랑합니다">
img: 태그 이름, src: 속성 이름, "heart.jpg": 속성 값

시작 태그와 종료 태그
태그에 따라서는 

<img>

태그처럼 종료 태그가 없는 경우도 있지만, 대부분의 경우 다음과 같이 시작 태그와 종료 태그로 구성된다.

<html> ... </html>
<title>문서의 제목입니다</title>
<body>...</body>

이 경우 종료 태그가 생략되면 오류로 처리되어 정상적으로 화면에 출력되지 않는다.

태그의 속성은 대소문자를 구분하지 않는다.

<HTML>...</html>
<img Src="heart.jpg" width="100" height="50" alt="사랑합니다">

속성 값에 불필요한 공백 문자가 들어가면 HTML5 표준에 어긋남

<img Src="heart.jpg" width=" 100" height="50" alt="사랑합니다">

속성 값은 반드시 이중 인용 부호로 묶을 필요는 없다. 단일 인용 부호를 사용해도 되고, 인용 부호룰 사용하지 않아도 된다.

<img Src=heart.jpg> <img src="heart.jpg"> <img Src='heart.jpg'>

다만, 다음과 같이 속성 값에 빈칸이 들어가는 경우 반드시 인용 부호를 사용해야 한다.

<div src="images/video images/funny.jpg">

타이틀 달기

HTML 페이지의 타이틀은 페이지의 제목으로, 브라우저의 타이틀 바에 출력된다. 타이틀은 

<title>

태그를 이용하여 

<head>

태그 내에서만 작성되어야 한다.

문단 제목(장, 절, 소제목 등) 달기

<h1>, <h2>, <h3>, ..., <h6>

의 6개의 태그를 제공하여 문단에 제목을 붙일 수 있도록 한다.
h는 제목을 뜻하는 heading의 줄임말이며, h1이 가장 큰 제목이고 h6가 가장 작은 제목이다. hn 태그에 의해 출력되는 제목의 글자 크기는 브라우저가 결정하며, CSS 스타일 시트를 이용하여 개발자가 변경할 수 있다.

툴팁 달기, title 속성

페이지의 본문에 마우스가 올라갈 때 설명문(툴팁)이 출력되게 할 수 있다. 툴팁(tooltip) 문자열은 태그의 title 속성에 지정하며 모든 태그는 title 속성을 가진다.

<h1 title="h1 태그로 작성하였습니다.">1장 홈페이지</h1>

<!doctype html>
<html>
<head><title>툴팁 달기</title></head>
<body>
<h1 title="h1태그로 작성하였습니다.">1장 홈페이지</h1>
<h2 title="h2태그로 작성하였습니다.">1절 HTML 언어</h2>
</body>
</html>

단락 나누기

HTML에서 문단은 여러 단락으로 나눌 수 있으며 하나의 단락은

<p>

태그로 표현한다.
CSS 스타일을 사용하면 단락 단위로 내어쓰기, 들여쓰기를 제어할 수 있다.
p 태그는 문단을 표현하기 때문에

</p>

로 끝나는 문단 다음에는 자동으로 빈 줄이 생긴다.

수평선 긋기

문단 내에서 내용의 전환이 필요한 곳에 수평선을 삽입하여 시각적 효과를 만들 수 있다. 수평선은

<hr>

태그를 사용한다. hr 태그는 종료 태그가 없다.

새로운 줄로 넘어가기

HTML 페이지에 ENTER 키를 여러 개 입력해도 한 개의 빈칸으로 처리되어 다음 줄로 넘어가지 않는다. 새로운 줄로 넘기고자 하면 <br> 태그를 사용해야 한다.

문자 기호, 심볼 입력

HTML 문서에서 문자들은 유니코드 UTF-8 코드체계로 작성되는 것이 표준이므로 html 파일을 저장할 때 UTF-8 코드체계로 저장한다.
'<'나 '>'와 같이 HTML 언어에서 예약어로 사용하고 있는 문자나, 시그마, 무한대 등 키보드로 입력할 수 없는 기호, 심볼, 글자들은 다음 두 방법으로 입력할 수 있다.

&엔터티; 혹은 &#코드값;
< -> &lt 혹은 &#60;

브라우저는 HTML 페이지에 있는 연속된 여러 개의 빈칸을 한 개의 빈칸으로 처리하므로, 빈칸을 강제로 삽입하고자 하면 

&nbsp;

엔터티를 삽입하면 된다.

개발자 포맷 그대로 출력하기, pre 태그

브라우저는 개발자가 HTML 문서의 모양을 포맷하기 위해 삽입한 여러 개의 빈칸이나 엔터를 모두 하나의 빈칸으로 처리하므로, 개발자가 의도한 모양대로 출력되지 않는다. 이때

<pre>
</pre>

로 둘러싸면 개발자가 입력한 포맷 그대로 출력된다.

텍스트 꾸미기

예시

<b>진하게</b>
<strong>중요한</strong>
<em>강조</em><br>
<i>이탤릭으로 강조</i><br>
보통 문자<small>한 단계 작은 문자</small><br>
<del>삭제</del><br>
<ins>추가</ins><br>
보통 문자의<sup>윗첨자</sup><br>
보통 문자의<sub>아래첨자</sub><br>
<mark>하이라이팅</mark><br>
</p>

블록 태그와 인라인 태그

HTML 태그들은 블록 태그(block)와 인라인(inline) 태그로 나뉜다.

블록 태그 사례: <p>, <h1>, <div>, <ul>
인라인 태그 사례: <strong>, <a>, <img>, <span>

블록 태그는 항상 새 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다. 반대로 인라인 태그는 블록에 삽입되어 블록 콘텐트의 일부를 표현하는 데 이용된다.

div

  • p와 함께 블록을 구성하기 위해 가장 많이 사용된다.
    p 태그는 문단을 만들기 위해 사용되지만, div는 특별한 의미 없이 여러 HTML 태그들을 블록으로 묶는 컨테이너로 이용된다. 예를 들어 div 블록 전체에 동일한 CSS 스타일을 적용하거나 자바스크립트로 블록을 하나의 단위처럼 다루고자 할 때이다.

span

  • 텍스트 일부분에 특별한 모양을 주거나, 자바스크립트 코드로 텍스트 일부분을 제어하고자 할 때 사용한다.

HTML 메타 데이터 삽입

  • 메타 데이터란 데이터를 설명하는 데이터이다.
    예를 들어, 사진의 경우 찍은 장소와 시간 데이터가 메타 데이터이다.
    HTML 페이지에 대한 메타 정보를 표현하는 여러 태그들을 두고 있다.
<base>, <link>, <script>, <style>, <title>, <meta>

style은 HTML 페이지에 CSS 스타일 시트를 담는 태그이다.
script는 자바스크립트 코드를 담는 태그이다.
link는 HTML 페이지에 다른 자원을 연결하는 태그이다.

웹 페이지의 베이스 URL, base

base 태그는 웹 페이지들이 담겨 있는 기본 URL과 웹 페이지가 출력될 윈도우를 지정하기 위해 사용된다. 예를 들어 meta.html과 science.html 웹 페이지가 http://www.mysite.com/score/에 저장되어 있다면

<head>
	<base href="http://www.mysite.com/score/">
</head>

base 태그의 href를 이용하여 베이스 URL을 다음과 같이 지정한다.

그리고 웹 페이지에 대한 경로는 다음과 같이 간단히 파일 이름만 명시하면 된다. 웹 페이지의 실제 경로명은 base 태그의 href 속성에 지정된 '베이스 URL'에 대한 상대경로명으로 해석되기 때문이다.

<a href="math.html">수학</a>
<a href="science.html">과학</a>

브라우저는 math.html을 http://www.mysite.com/score/math.html로 처리한다.

또한 base 태그에서 target 속성을 이용하여 웹 페이지가 출력될 윈도우를 지정하기도 한다.
base 태그는 head 태그 내에서만 사용되며 한 번만 허용된다.

메타 데이터, meta

meta 태그는 웹 페이지의 저작자, 문자 인코딩 방식, 문서 내용 등 다양한 메타 데이터를 표현하기 위해 사용된다. 메타 데이터는 name과 content의 속성 쌍으로 구성된다.

  • 웹 페이지의 저작자가 "황기태"임을 표기하는 사례
<meta name="author" content="황기태">
  • 웹 페이지의 내용 설명
<meta name="description" content="입학 요령에 대한 자세한 사항">
  • 웹 페이지의 키워드(검색 엔진에 의해 잘 발견되도록 하기 위함
<meta name="keywords" content="컴퓨터, 소프트웨어, 스마트폰">

또한 charset 속성으로 웹 페이지에 사용된 문자의 인코딩 방식을 지정할 수 있다.

<meta charset="UTF-8">

HTML5에서는 UTF-8이 디폴트이므로 생략해도 된다.

고급 문서 만들기

이미지 삽입

img 태그를 이용하면 HTML 문서에 이미지를 삽입할 수 있다. 

<img	src="이미지 파일의 URL, 필수 속성"
		alt="문자열" - 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열. 필수 속성
        width="이미지 폭" - 이미지가 출력되는 너비로, 생략되면 원본 이미지의 폭. 픽셀 수.
        height="이미지 높이"> - 이미지가 출력되는 높이로, 생략되면 원본 이미지의 높이. 픽셀 수

src 속성으로 지정할 수 있는 이미지 종류: BMP, GIF, PNG, JPG(JPEG), animated-GIF
src 속성에 다른 웹 사이트의 이미지 주소를 주어 다른 웹 사이트의 이미지를 출력할 수도 있다.

리스트 만들기, ol, ul, dl

리스트는 데이터를 나열할 때 사용되며 종류는 다음 3가지이다.

  • 순서 있는 리스트(ordered list) - ol /ol
  • 순서 없는 리스트(unordered list) - ul /ul
  • 정의 리스트(definition list) - dl, /dl

리스트의 각 아이템은 li 태그를 사용하며 /li는 생략할 수 있다.

ol 태그

<ol type = "1"|"A"|"a"|"I"|"i"
	start = "value"> // type, start 속성 대신 CSS3 스타일을 사용할 것을 권함.
    <li>아이템</li>
    <li>아이템</li>
</ol>

type: 마커 종류
type = "1" (디폴트) 1, 2, 3, ...
type = "A" A, B, C, ...
type = "a" a, b, c, ...
type = "I" I, II, III, ...
type = "i" i, ii, iii, ...

start: 마커의 시작 값
ex) start="C" C, D, E, ...
start="5" 5, 6, 7, ...

ul 태그

<ul>
	<li>아이템</li>
    <li>아이템</li>
</ul>

<ul>
	<li>감자탕 //<li> 생략 가능하다.
    <li>마라탕
    <li>스파케티
</ul>

li 태그

<li type = "1"|"A"|"a"|"I"|"i">아이템</li> //<ol> 태그에서만 유효

ol과 ul
ol은 순서가 있는 각 과정을 나열할 때 사용되며, ul은 순서 없이 아이템을 나열할 때 사용한다.

중첩 리스트 만들기

리스트 안에 다른 리스트를 중첩할 수 있다.

<ul>
	<li>내가 좋아하는 음식 많아요
    	<ul>
        	<li>감자탕
            <li>마라탕
            <li>스파게티
        </ul>
    <li>라면 먹기 좋아해요
    	<ol type=1" >
        	<li>물을 끓인다.
            <li>라면과 스프를 넣는다.
            <li>파를 썰어 넣는다.
            <li>한 입에 다 먹는다.
        </ol>
    <li>여름에는 바다로
    <li>가을에는 산으로
</ul>

정의 리스트 만들기

정의 리스트 (용어, 설명)을 하나의 아이템으로 나열하는 리스트이다. 정의 리스트 전체는 dl을 사용하며, 각 아이템에서 용어는 dt로, 설명은 dd로 표현한다. 
<dl>
	<dt>용어</dt>
    <dd>설명</dd>
</dl>

dt와 dd 모두 생략할 수 있다.

표 만들기, table

  • table: 표 전체를 담는 컨테이너
  • caption: 표 제목
  • thead: 헤딩 셀 그룹
  • tfoot: 바닥 셀 그룹
  • tbody: 데이터 셀 그룹
  • tr: 행, 여러 개의 td, th 포함
  • td: 제목(헤딩) 셀
  • th: 데이터 셀
<table></table>
	<caption> //제목
    <thead> // 헤드  <th>
    <tbody> // 바디 <td>
    <tfoot> // 바닥 <tr>

표 전체 구성

제목, 헤드, 바디, 바닥으로 구성되어 있으며, 전형적인 모양은 다음과 같다.

<table>
	<caption>표제목</caption> // 표 제목을 나타내는 태그로 <table>애 반드시 첫 번째로 작성되어야 한다.
    <thead> ... </thead>
    <tfoot> ... </tfoot>
    <tbody> ... </tbody>
</table>

행과 열 만들기

표는 tr 태그를 이용하여 행 단위로 표현하며, 헤딩(제목) 정보를 가진 셀은 th로, 데이터 정보 셀은 td로 표현한다. thead, tfoot, tbody에는 여러 개의 tr 태그로 여러 행을 만들 수 있다.

<thead>
	<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tbody>
	<tr><td>황기태</td><td>80</td><td>70</td></tr>
	<tr>...</tr>
</tbody>

tfoot은 tbody 전에 나오는 것이 좋다. 웹 페이지가 프린트될 때 tbody에 들어 있는 내용이 길어 여러 페이지에 걸쳐지게 될 때, 헤드와 바닥을 각 페이지마다 위아래에 출력하기 위함이다.

  • 기본 표 만들기

    2023년 성적
    이름HTMLCSS
    합225230
    황기태8070

  • 표에 이미지 삽입

<table>
	<caption>좋아하는 과일</caption>
    <tbody>
    	<tr>
        	<td><img src="media/apple.jpg"></td>
            <td><img src="media/banana.jpg"></td>
        </tr>
    </tbody>
</table>

하이퍼링크와 항해

웹 사이트는 여러 개의 HTML 페이지를 가지고 페이지들이 상호 연결하는 방식으로 전체를 구성한다. HTML 페이지에서 다른 HTML 페이지를 연결하는 고리를 하이퍼링크라고 부른다.

하이퍼 링크 텍스트나 이미지에 다른 웹 페이지의 주소를 달아서 만든다. 같은 사이트에 다른 HTML 페이지 뿐만 아니라, 다른 사이트에 있는 웹 페이지를 연결하기도 한다. 하이퍼링크를 따라 다른 웹 페이지로 이동하는 것을 항해 혹은 내비게이션이라고 부른다. 하이퍼링크는 줄여 링크로 부르기도 한다.

하이퍼링크 만들기, a

하이퍼링크는 a 태그의 href 속성으로 만든다.

<a> 태그 속성
<a href="URL"|"URL#앵커이름"|"#앵커이름"
   target="윈도우이름"
   download>
텍스트 혹은 이미지
</a>
  • href: 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커 이름
  • target: 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 저장
  • download: 링크가 클릭되면 href에 지정된 파일이 다운로드 됨

href 속성

하이퍼링크로 이동할 HTML 페이지의 URL은 a 태그의 href 속성에 지정한다.
같은 사이트의 HTML 페이지를 연결하는 경우, href에는 다음과 같이 HTML 파일의 경로명만 지정하면 된다.

<a href="picturepage.html">클릭하면 사진 페이지로 이동합니다.</a>
<a href="student/register.html">학생 등록 페이지로 이동합니다.</a>

다른 웹 사이트를 연결하는 경우 href에 "http://"로 시작하는 웹 사이트의 주소를 지정한다.

<a href="http://www.naver.com">네이버</a>

href에 웹 사이트의 주소를 지정하는 것은 그 웹 사이트의 디폴트 HTML 페이지를 지정하는 것과 같다. 그러므로 앞에서 사용자가 '네이버'를 클릭하면, 브라우저는 네이버 사이트의 디폴트 HTML 페이지를 전송받아 화면에 출력한다. 디폴트 HTML 파일은 대부분의 경우 index.html이나 default.html이다.

<a href="http://www.site.com/login.html">사이트 로그인</a>

다음과 같이 링크에 HTML 파일명을 명확히 줄 수도 있다.

이미지에 하이퍼링크 만들기

이미지에도 링크를 만들 수 있는데 다음은 naver.png 이미지를 화면에 출력하고 이미지를 클릭하면 네이버 사이트에 연결하는 링크를 만든 사례이다.

<a href="http://www.naver.com">
	<img src="naver.png" alt="네이버사이트">
</a>

링크 텍스트의 색

링크 텍스트는 사용하는 과정에서 3가지 색으로 변경된다. 처음 링크(standard link)는 밑줄과 함께 blue 색으로, 방문이 이루어진 링크(visited link)는 purple 색으로, 마우스로 링크를 누르고 있는 동안(active link)은 red 색으로 출력된다. 이러한 링크의 디폴트 색은 CSS3를 이용하여 변경할 수 있다.

target 속성

target 속성 링크에 연결된 웹 페이지가 출력될 윈도우(탭)를 지정하는 것으로, 사용할 수 있는 값은 _blank, _self, _parent, _top, 윈도우 이름의 5가지이다.

target 속성을 이용하여 네이버 사이트를 새 윈도우(탭)에 출력하는 링크를 만들면 다음과 같다.

<a href="http://www.naver.com" target="_blank">네이버</a>
<ul>
	<li><a href="http://www.w3.org" target="_blank">W3C(새 윈도우, _blank)</a>
    <li><a href="http://www.etnews.com" target="_self">전자신문(현재 윈도우, _self)</a>
    <li><a href="http://www.naver.com" target="_parent">네이버(부모 윈도우, _parent</a>
    <li><a href="http://www.mk.co.kr" target="_top">매일경제신문(브라우저 윈도우, _top</a>
</ul>

id 속성으로 앵커 만들기

긴 내용을 가진 웹 페이지를 읽을 때 사용자는 브라우저 스크린을 오르락내리락하면서 읽어야 한다. 이런 어려움을 해소하고 문서를 쉽게 읽을 수 있도록, 문서 내 특정 위치로 이동하는 링크를 만들 수 있도록 하였다. 문서의 특정 위치를 앵커(anchor)라고 부른다.

각 장이나 절의 시작 위치에 앵커를 만들고, 문서의 서두에 각 장이나 절의 앵커를 연결하는 목차(링크)를 두었다. 사용자가 목차에서 항목을 클릭하면 해당하는 본문의 위치로 이동한다.

앵커 만들기

태그의 id 속성에 앵커 이름을 지정하면, 어떤 태그든 그 위치에 앵커가 만들어진다.

<p id="chap1"1장 서론</p>
...
<h3 id="chap1"2장 본론</h3>

앵커에 연결하는 링크 만들기

<a href="#앵커이름">의 형식으로 앵커에 연결하는 하이퍼링크를 만들 수 있다.
<a href="#chap1">서론으로 가기</a>
<a href="#chap2">본론으로 가기</a>

서론으로 가기를 누르면 id에 chap1을 집어넣어둔 부분으로 이동한다.

<a href="student.html#chap1">학생 소개 부분으로 가기</a>

파일 다운로드 링크 만들기, a의 download 속성

a 태그의 download 속성 이미지, PDF, MP3, HTML 파일, HWP 파일, PPT 파일 등 모든 파일을 다운로드할 수 있는 링크를 만든다. 이때 다운로드할 파일 명은 href 속성에 지정한다. 
<a href="Elvis.png" download>엘비스 사진 다운로드</a>

링크 클릭 시 이미지 파일 다운로드

인라인 프레임

인라인 프레임 만들기, iframe

iframe 태그를 이용하면 현재 HTML 페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 수 있다. iframe 태그에 의해 만들어지는 윈도우를 인라인 프레임(inline frame)이라고 부른다.

<iframe src="iframe1.html" width="200" height="150">
	브라우저는 iframe 태그를 지원하지 않습니다. //iframe을 지원하지 않는 브라우저는 이 텍스트를 대신 출력한다.
</iframe>

<iframe> 태그의 속성

<iframe src="UTL"
		srcdoc="HTML 문서 텍스트"
        name="윈도우 이름"
        width="프레임의 폭"
        height="프레임의 높이">
iframe 태그를 다루지 않는 브라우저에 의해 대신 출력되는 텍스트
</iframe>
  • src: 출력할 웹 페이지의 URL 주소
  • srcdoc: 직접 HTML 태그로 작성된 텍스트로서 출력될 내용
  • name: 프레임 윈도우의 이름. 다른 웹 페이지에서 target 속성 값으로 사용
  • width: 프레임의 폭, 픽셀 값, 디폴트 300
  • height: 프레임의 높이, 픽셀 값, 디폴트 150

<iframe> 사용 시 주의 사항
1. <iframe> 태그는 <body> 태그 내에서만 사용된다.
2. src 속성이 생략되면 브라우저에 <iframe> 영역이 만들어지기는 하지만 빈 상태로 존재한다.
3. 인라인 프레임이 출력할 HTML 텍스트를 srcdoc 속성에 직접 작성할 수 있다. srcdoc가 있으면 src 속성은 무시된다.
4. 인라인 프레임 안에 또 다른 인라인 프레임을 중첩하여 만들 수 있다.

인라인 프레임 윈도우의 이름

인라인 프레임은 프레임 윈도우 혹은 간단히 윈도우라고 부르기도 한다. 인라인 프레임을 포함하여 모든 윈도우(탭)에는 이름을 붙이고 이름으로 접근한다.
인라인 프레임의 이름은 name 속성을 사용하여 붙인다. 

<iframe src="iframe1.html" name="left"></iframe> //name을 left로 붙인 사례

브라우저 윈도우와 인라인 프레임 윈도우의 계층 관계

브라우저 윈도우와 그 속에 삽입된 인라인 프레임 윈도우 사이에는 부모 자식 관계가 형성된다.
인라인 프레임이 다시 인라인 프레임을 포함하면 이들 사이 역시 부모 자식 관계가 형성된다.

  • parent 윈도우 - 부모 윈도우
  • child 윈도우 - 자식 윈도우
  • top 윈도우 - 최상위 브라우저 윈도우

target 속성에 문서를 출력할 윈도우 지정

target 속성은 <base>, <a>, <area>, <form> 태그에서 HTML 페이지를 출력할 윈도우(인라인 프레임 포함)를 지정하는데 사용된다. target 속성의 값으로 다음 5가지 종류를 지정할 수 있다.

  • _blank - 새로운 브라우저 윈도우(탭) 생성(열기)
  • _self - 현재 윈도우
  • _parent - 부모 윈도우
  • _top - 최상위 인도우
  • 윈도우 이름 - 해당 이름의 윈도우

링크를 클릭하면 frame1 이름의 프레임에 사이트 출력

<iframe src="http://www.w3c.org" name="frame1"></iframe>
...
<a href="http://www.w3c.org" target="frame1">W3C</a>

링크를 클릭하면 새 윈도우(탭)에 W3C 사이트 출력

<a href="http://www.w3C.org" target="_blank">W3C</a>

링크를 클릭하면 현재 윈도우(탭 혹은 프레임 윈도우)에 W3C 사이트 출력

<a href="http://www.w3c.org" target="_self">W3C</a>

링크를 클릭하면 부모 윈도우에 W3C 사이트 출력

<a href="http://www.w3c.org" target="_parent">W3C</a>

링크를 클릭하면 모든 프레임 윈도우를 제거하고 브라우저 윈도우에 W3C 사이트 출력

<a href="http://www.w3c.org" target="_top">W3C</a>

미디어 삽입

미디어의 표준화, <audio>, <video>

플러그인 브라우저가 처리할 수 없는 비표준 형식의 데이터를 전용으로 다루는 내장형 소프트웨어로 ActiveX가 대표적이다.

HTML5에서는 플러그인없이 오디오나 비디오를 재생할 수 있도록 다음 태그를 표준화하였다.

<audio>, <video>

플래시 애니메이션과 같이 표준화되지 않은 미디어를 재생하기 위해서는 현재도 여전히 플러그인의 설치가 필요하며, 이 경우 다음 두 태그를 사용한다.

<embed>, <object>

비디오 삽입, <video>

<video src="bear.mp4" width="320 height"240" controls autoplay></video>

다음과 같이 비디오를 삽입한다.

이 태그에 의해 브라우저에는 320X240 픽셀 크기의 공간이 할당되고 이곳에 bear.mp4 비디오가 재생된다. autoplay 속성에 의해 비디오는 바로 재생되며, controls 속성에 의해 비디오 제어 버튼들이 함께 출력된다. <video>, </video> 사이에는 브라우저가 video 태그를 지원하지 않을 때 출력하는 텍스트를 지정한다.
비디오 소스는 <source> 태그를 이용하여 다음과 같이 별도로 지정할 수도 있다.

<video width="320" height="240" controls autoplay>
	<source src="bear.mp4" type="video/mp4">
    브라우저가 video 태그를 지원하지 않습니다.
</video>

브라우저에 따라서는 특정 타입의 비디오 파일만 인식할 수 있기 때문에, 개발자가 하나의 비디오를 여러 타입으로 만들어 두고, 브라우저가 재생 가능한 타입을 선택하도록 할 수 있다.

다음은 mp4와 ogg 타입으로 각각 인코딩된 2개의 비디오를 주어 브라우저가 재생 가능한 비디오 타입을 선택하게 하는 사례이다. 브라우저가 bear.mp4를 재생할 수 업으면 bear.ogg를 재생한다.

<video width="320" height="240" controls autoplay>
	<source src="bear.mp4" type="video/mp4">
    <source src="bear.ogg" type="video/ogg">
    브라우저가 video 태그를 지원하지 않습니다.
</video>
<video src="비디오 파일의 URL"
	width="비디오 재생 영역의 폭"
    height="비디오 재생 영역의 높이"
    controls
    autoplay
    muted
    loop>>
이 태그를 지원하지 않는 브라우저가 출력하는 메세지
</video>
  • width, height: 비디오가 재생될 브라우저 공간의 폭과 높이 지정. 생략되면 비디오의 원본 크기로 설정
  • controls: 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력
  • autoplay: 이 속성이 설정되면 비디오 로딩 즉시 재생
  • loop: 이 속성이 설정되면 반복 재생
  • muted: 오디오를 끌 때 사용
<source src="비디오 파일의 URL"
		type="비디오의 마임 타입">
  • type: 비디오의 마임 타입으로 아래 표의 마임 타입 지정
    비디오마임 타입설명
    MP4video/mp4H.264 비디오와 AAC 오디오 코덱으로 인코딩된 MPEG 4 파일
    WebMvideo/webmVP8/VP9 비디오와 Vorbis 오디오 코덱으로 인코딩된 webM 파일
    Oggvideo/oggTheora 비디오와 Vorbis 오디오 코덱으로 인코딩된 Ogg 파일

오디오 삽입, <audio>

<audio src="mymusic.mp3" controls autoplay loop></audio>

이 태그는 웹 페이지가 출력될 때 자동으로 mymusic.mp3를 반복 재생하고 재생/일시중단/정지 등의 제어버튼을 함께 출력하도록 지시한다. <audio> </audio> 사이에는 브라우저가 <audio> 태그를 지원하지 않을 때 출력하는 대체 텍스트를 지정한다. control 속성을 생략하면 브라우저 화면에는 아무것도 나타나지 않고 연주만 이루어지며, autoplay가 생략되면, 오디오가 자동으로 시작되지 않는다. 자바스크립트를 이용하면 오디오 재생을 제어할 수 있다.

<audio src="오디오 파일의 URL"
	   controls
       autoplay
       loop>
이 태그를 지원하지 않는 브라우저가 출력하는 메시지
</audio>
  • controls: 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력
  • autoplay: 이 속성이 설정되면 비디오 로딩 즉시 재생
  • loop: 이 속성이 설정되면 반복 재생

모바일 브라우저에서는 보안상의 이유로 <audio> 태그의 autoplay는 작동하지 않는다. 사용자가 브라우저에서 play 컨트롤을 선택해야 오디오 연주가 가능하다.

<video> 태그에서와 마찬가지로 <source> 태그를 이용하면 다음과 같이 mp3 타입과 ogg 타입 중 브라우저가 재생 가능한 타입을 선택하게 할 수 있다.

<audio controls autoplay>
	<source src="mymusic.mp3" type="audio/mpeg">
    <source src="mymusic.ogg" type="audio/ogg">
    브라우저가 audio 태그를 지원하지 않습니다.
</audio>

브라우저가 mymusic.mp3를 재생할 수 없으면 mymusic.ogg를 재생한다.

<audio> 태그로 재생 가능한 오디오 타입

오디오마임 타입설명
MP3audio/mpegMP3로 인코딩된 오디오 파일
Wavaudio/wavwave 형식으로 인코딩된 오디오 파일
Oggaudio/oggVorbis 오디오 코덱으로 인코딩된 Ogg 파일

HTML5의 문서 구조화

시맨틱 웹 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹 시맨틱 태그 <header>, <section>, <article>, <main>, <summary>, <mark>, <time> 등의 태그

  • <header>
    페이지나 섹션의 머리말을 표현하는 태그이다. 보통 머리말에는 페이지 제목, 페이지를 소개하는 간단한 설명이 들어간다.블로그의 경우 블로그 이름과 블로그에 대한 간략한 설명을 header에 기재한다. header는 section이나 article 태그 내에도 사용된다.
    head 태그와는 다른 것이므로 주의한다

  • <nav>
    navigation의 줄임말로 하이퍼링크들을 모아 놓은 특별한 섹션이다. 페이지의 모든 하이퍼링크가 이곳에 있을 필요는 없다. 페이지 내 목차를 만들기 위해 주로 사용된다.

  • <section>
    section은 문서의 장(chapter, section) 혹은 절을 구성하는 역할을 하며 섹션이라고 부른다. section에는 헤딩 태그(h1~h6)로 섹션의 주제를 기재하는 것이 바람직하다.

  • <article>
    article은 본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역이다. section이 본문의 필수적인 내용을 담는다면, article은 웹 페이지의 본질을 훼손하지 않는 내용들을 담는 데 주로 사용된다. 보조적인 기사, 블로그 포스트, 댓글이나 기타 독립적인 내용을담는 영역으로 사용하면 된다.
    article에 담는 내용이 많은 경우 여러 section으로 나누어 담을 수 있다.

  • <aside>
    aside는 웹 페이지 본문 흐름에서 약간 벗어난 노트나 팁, 신문, 잡지에서 주요 기사 옆에 짤막하게 곁들이는 관련 기사, 삽입 어구로 표시된 논평이나 글 등을 담는 태그이다. aside 영역은 문서의 주요 부분에서 벗어난 내용을 담기 때문에, 페이지의 오른쪽이나 왼쪽에 주로 배치된다.

  • <footer>
    footer는 꼬리말 영역을 표시하는 태그로서, 페이지나 section 내에 꼬리말을 담는다. 이 곳에는 저자나 저작권 정보 등을 주로 표시한다. header와 footer가 꼭 웹 페이지의 서두와 말미에 배치될 필요는 없다.

header, section, article, footer, nav 태그의 콘텐츠가 출력되는 위치나 모양은 브라우저에 의해 자동으로 정해지지 않는다. 이들은 문서의 구조만을 표현하며 위치와 색상 등 모양은 개발자가 CSS3를 이용하여 직접 만들어야 한다.

HTML5 문서 구조화 연습

  • 웹 페이지 전체를 시맨틱 태그들로 분할한다.
  • 웹 페이지 전체 제목과 소개는 header로 작성한다.
  • 본문은 section으로 묶고, 본문 내에 각 절이나 영역은 article로 작성한다.
  • 링크나 메뉴들은 nav 태그로 작성한다.
  • 문서의 모양(header, section, article, aside의 배치)은 CSS 스타일 시트를 이용한다.

예제

<!DOCTYPE html>
<html><head><title>시맨틱 태그로 구조화 연습</title></head>
<body>
	<header>
    	<h1>볼프강 아마데우스 모차르트</h1>
        <p>모차르트(1756sus 1월 27일 ~ 1791년 12월 5일)는 1756년 1월 27일 잘츠부르크에서 태어난 천재적인 오스트리아의 작곡가를 소개한다.</p>
        <figure>
        	<img width="140" height="200" src="https://upload.wikimedia.org/wikipedia/commons/thumbs/1/1e/Wolfgang-amadeus-mozart_1.jpg/500px-Wolfgang-amadeus-mozart_1.jpg">
            <figcaption>1770년대 초상화</figcaption>
        </figure>
    </header>
    <nav>
    	<h2>목차</h2>
        <ul>
        	<li><a href="#life">생애</a></li>
            <li><a href="#death">죽음</a></li>
            <li><a href="#music">음악</a></li>
        </ul>
    </nav>
    <section>
    	<article id="life">
        	<h2>생애</h2>
            <p>어쩌고쩌쩌고
            </p>
        </article>
        <article id="death">
			<h2>죽음</h2>
            <p>쏼라쏼라
            </p>
        </article>
        <article id="music">
        	<h2>음악</h2>
            <p>궁시렁궁시렁
            </p>
        </article>
    </section>
    <aside id="legend">
    	<h3>모차르트의 죽음에 얽힌 전설</h3>
        <p>전설~~~
        </p>
    </aside>
    <footer>
    	<p>2017년 10월 7일 작성, 위키피디아 참고</p>
    </footer>
</body>
</html>
시맨틱 태그로 구조화 연습

볼프강 아마데우스 모차르트

모차르트(1756sus 1월 27일 ~ 1791년 12월 5일)는 1756년 1월 27일 잘츠부르크에서 태어난 천재적인 오스트리아의 작곡가를 소개한다.

사진이 로드되지 않네요 1770년대 초상화

목차

생애

어쩌고쩌쩌고

죽음

쏼라쏼라

음악

궁시렁궁시렁

모차르트의 죽음에 얽힌 전설

전설~~~

2017년 10월 7일 작성, 위키피디아 참고

시맨틱 블록 태그

  • <figure> : 본문에 삽입된 그림을 블록화하는 시맨틱 태그이다. 이 태그를 이용하면 이미지, 동영상, 소스 코드 등 콘텐츠를 블록화할 수 있다. 그림 제목은 <figure> 태그 내에 <figcaption> 태그로 작성한다.

  • <details>와 <summary>
    details는 상세 정보를 담는 시맨틱 블록 태그이다. <details> </details>로 만든 블록에 대해 브라우저 화면에 핸들이 나타나며, 사용자가 핸들을 클릭하여 상세 정보를 감추거나 보이게 할 수 있다. summary 태그는 details로 구성되는 블록의 제목을 표현한다.

<detials>
	<summary>Question 1</summary>
    <p>웹 개발자가 알아야하는 언어 3가지></p>
</details>

시맨틱 인라인 태그

텍스트의 일부를 마크업하는 HTML5 시맨틱 태그

  • <mark> - 중요한 텍스트임을 표시
  • <time> - 시간 정보임을 표시
  • <meter> - 주어진 범위이나 %의 데이터 양 표시
  • <progress> - 작업의 진행 정도 표시

<meter>는 주어진 양을 나타내므로 게이지라고도 부르며, <progress>는 점진적으로 변하는 양을 나타내는데 사용한다.

<p>
	내일 <mark>HTML5 시험</mark><br>
    시간은 <time>09:00</time><br>
    난이도 <meter value="0.8">80%</meter><br>
    자료 업로딩(20%) <progress value="2" max="10">
    		      </progress><br>
</p>

웹 폼

웹 페이지를 통해 사용자 입력을 받는 폼을 웹 폼(Webform) 혹은 폼(form)이라고 한다. HTML5에서는 <input>, <textarea>, <select> 등 폼을 만들기 위한 다양한 태그들을 제공하며 이 태그들을 폼 요소(form element)라고 부른다. 폼은 로그인, 등록, 검색, 예약, 쇼핑 등의 다양한 웹 서비스에서 사용자의 입력을 받기 위해 사용된다.

간단한 로그인 폼 만들기

<form name="fo" method="get">
사용자 ID : <input type="text" size="15" value=""><br>
비밀 번호 : <input type="passward" size="15" value="">
		  <input type="submit" value="완료">
</form>
사용자 ID :
비밀 번호 :

폼 요소들은 다음과 같이 <form>...</form>에 담는다.

<form name"fo" method="get">
 ...
</form>

<input type="text" size="15" value="">
문자열 입력 창을 만드는 태그로 창의 크기는 15문자 크기로 한다.

<input type="passward" size="15" value="">
15문자 크기의 암호 입력 창을 만드는 태그이다. 사용자가 입력한 문자가 드러나지 않도록 화면에는 '*'가 대신 출력된다.

<input type="submit" size="15" value="완료">
submit 버튼을 만드는 태그이다. 버튼의 표면에는 "완료" 글자가 출력된다. 이 버튼을 누르면 사용자가 폼 요소들에 입력한 내용을 모두 웹 서버로 전송한다. 하지만 위에는 form 태그에 action이 지정되지 않았기 때문에 버튼을 클릭해도 아무 데이터도 웹 서버로 전송되지 않는다.

폼 태그, <form>

form 태그들의 속성

  • name 속성: 폼의 이름을 지정하는 속성으로 자바스크립트에서 사용된다.
  • action 속성: 폼 데이터를 처리할 웹 서버 응용프로그램을 지정한다. submit 버튼이 클릭되면 브라우저는 action 속성에 지정된 웹 서버에 연결하고 웹 서버 응용프로그램을 실행할 것을 지시한다. 이때 사용자가 입력한 폼 데이터를 함께 전송한다.
  • method 속성: 폼 데이터를 웹 서버로 전송하는 형식을 지시한다. 대표적인 방식이 GET과 POST이다. GET/POST는 이 책의 범위를 넘어서므로 따로 공부하기 바란다.
<form action="웹 서버 응용 프로그램의 URL"
	  enctype="데이터의 인코딩 타입"
      method="GET|POST"
      name="폼 이름"
      target="윈도우 이름">
      ... 여러 개의 폼 요소 작성
</form>
  • action: 폼 데이터를 처리할 웹 서버 응용프로그램 이름 URL
  • enctype: 폼 데이터를 웹 서버로 전송할 때 암호화 방식 지정
  • method: 폼 데이터를 웹 서버에 전송하는 방식
  • target: 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML 문서나 이미지)를 출력할 윈도우 이름

네이버 검색 사례를 통한 폼 전송 과정의 이해

사용자가 네이버 사이트에서 검색하는 과정을 통해 폼의 전송 과정과 action, method 속성에 대해 알아보자.
1. 네이버 사이트에 접속한다. 웹 브라우저에 의해 네이버 웹 페이지가 출력되고 검색어를 입력받는 폼이 보인다. 

<form name="sform"
	  action="https://search.naver.com/search.naver"
      method="get">
      <input name="query" type="text">
      <input type="submit" value="검색">
</form>

검색 버튼이 눌려지면 브라우저는 form 태그의 action을 참고하여, search.naver.com 서버에 접속하여 search.naver 응용프로그램의 실행을 요구해야 한다는 것을 확인한다.

  1. 사용자가 입력 창에 Elvis를 입력하고 검색 버튼을 누르면, 브라우저는 웹 서버 응용프로그램에 보낼 다음 폼 데이터를 만든다.
query=Elvis

여기서 query는 입력 창의 이름에서 가져온 것이다. 폼 데이터는 name=value 형태로 구성된다. form 태그의 method 속성이 get이므로, 폼 데이터를 다음과 같이 action의 URL에 덧붙인다(where=nexearch 등의 필드들은 일단 설명에서 제외한다)

https://search.naver.com/search.naver? ...query=Elvis...
  1. 이제, 브라우저는 웹 서버인 search.naver.com에 접속하고, 웹 서버 응용프로그램 search.naver의 실행을 요청하고 query=Elvis를 전달한다.
  2. 웹 서버에서 search.naver 응용프로그램을 실행하고 검색 결과를 브라우저에게 보낸다.
  3. 브라우저는 검색 결과를 화면에 출력한다.

폼 만들기

폼 요소의 종류

  • <input type="text"> - 한 줄 텍스트 입력 창
  • <input type="passward"> - 암호 입력을 위한 한 줄 텍스트 입력 창
  • <input type="button"> - 단순 버튼
  • <input type="submit"> - 웹 서버로 폼 데이터를 전송시키는 버튼
  • <input type="reset"> - 입력된 폼 데이터를 초기화시키는 버튼
  • <input type="image"> - 이미지 버튼
  • <input type="checkbox|radio"> - 체크박스와 라디오 버튼
  • <select> - 드롭다운 리스트를 가진 콤보박스
  • <input type="month|week|date|time|datetime-local"> - 년, 월, 일, 시간 등의 시간 정보 입력 창
  • <input type="number|range"> - 스핀 버튼과 슬라이드바로 편리한 숫자 입력 창
  • <input type="color"> - 색 입력을 쉽게 하는 컬러 다이얼로그
  • <input type="email|url|tel|search"> - 이메일, URL, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창
  • <input type="file"> - 로컬 컴퓨터의 파일을 선택하는 폼 요소
  • <input type="button|reset|submit"> - 단순 버튼, reset, submit 버튼
  • <textarea> - 여러 줄의 텍스트 입력 창

폼 요소들은 form 태그 없이 사용할 수도 있다. 이런 경우는 주로 웹 서버에 전송하지 않고 자바스크립트 코드에서 사용자의 입력을 받는 목적으로 사용한다.

텍스트 입력, <input type="text">, <textarea>

주소나 이름 등 한 줄 텍스트를 입력받는 창은 다음 태그로 만들 수 있다.
<input type="text" value="초기에 출력되는 문자열">

특별히 암호를 입력받는 경우, type에 "passward"를 지정한다.
<input type="password" value="">
이 경우, 사용자가 입력하는 문자 대신 '*' 등 다른 글자를 출력하여 다른 사람이 볼 수 없게 한다.
여러 줄의 텍스트를 입력받을 때는 <textarea></textarea> 태그를 사용한다.
다음 코드는 가로로 20개 문자 5줄 크기의 텍스트 입력 창을 출력한다.

<textarea cols="20" rows="5"
	화면에 출력할 초기 텍스트입니다. 없으면 빈 공간만 출력됩니다.
</textarea>
<input type="text|passward"
	   name="요소 이름"
       maxlength="문자 개수"
       size="문자 개수"
       value="초기 텍스트">
  • maxlangth : 입력할 수 있는 문자의 최대 개수
  • size : 입력 창의 크기. 단위는 문자 개수
<textarea cols="열 개수"
		  rows="행 개수"
          name="요소 이름"
          wrap="OFF|HARD|SOFT">
          초기 출력될 텍스트
</textarea>
  • cols, rows : 텍스트 입력창의 크기로 가로세로 문자 수(영어를 기준으로)
  • wrap : 자동 줄바꿈 처리 지정

데이터 목록을 가진 텍스트 입력 창, <datalist>

네이버 등의 검색 사이트에서 검색 창에 입력할 때, 추천 검색어 목록이 펼쳐지고 항목을 선택한 경험이 있을 것이다. 과거에는 이 기능을 자바스크립트로 만들었지만, HTML5에서는 <datalist></datalist> 태그로 만들 수 있다.
<input type="text">로 나라 이름을 입력받는 예를 들어보자.

  • 사용자가 선택 가능한 데이터 목록을 <datalist></datalist>로 만들고, <input> 태그의 list 속성 값과 <datalist>의 id 속성 값을 동일하게 주어 이 둘을 연결한다. <option> 태그는 데이터 항목 하나를 나타낸다.
나라 : <input type="text" list="countries">
<datalist id="countries">
	<option value="가나">
    <option value="스위스">
    <option value="브라질">
</datalist>
나라 :
보고싶은 것 :

텍스트/이미지 버튼 만들기

버튼은 다음과 같이 input 태그나 button 태그로 만들 수 있으며, type 속성으로 버튼의 기능을 선택할 수 있다.

<input type="button|reset|submit|image" value="버튼의 문자열">
<button type="button|reset|submit">버튼의 문자열</button>
<input type="button|reset|submit|image"
	   name="버튼 이름"
       value="문자열"
       src="이미지 URL">
  • vlaue : 버튼에 출력되는 문자열
  • src : type="image"인 경우에만 필요한 것으로, 이미지의 URL
<button type="button|reset|submit"
		name="버튼 이름"
        value="문자열">
버튼 문자열이나 이미지
</button>

단순 버튼(type="button")

이 버튼은 아무 기능이 없는 버튼으로 자바스크립트 코드에서 이용된다. "로그인" 문자열이 새겨진 단순 버튼은 다음과 같이 만들 수 있다.

<input type="button" value="로그인">
<button type="button">로그인</button>

submit 버튼(type="submit")

이 버튼은 submit 버튼으로 불리며, 클릭하면 브라우저가 폼 데이터를 웹 서버로 전송한다.

<input type="submit" value="전송">
<button type="submit">전송</button>

reset 버튼(type="reset")

폼에 입력된 내용을 모두 지우고 초기화하는 버튼을 만든다.

<input type="reset" value="리셋">
<button type="reset">리셋</button>

이미지 버튼(type="image")

이미지 버튼을 만드는 두 가지 방법은 다음과 같다.

<input type="image" src="button.png" alt="이미지 버튼">
<button type="button"><img src="button.png" alt="이미지 버튼"></button>

이 이미지 버튼들은 아무 기능이 없으며 자바스크립트 코드에서 활용한다. button 태그를 이용하여 이미지를 가진 submit 버튼이나 reset 버튼을 만들 수 있다.

<button type="reset"><img src="button.png" alt="리셋 버튼"></button>

button 태그로 버튼 만들 때 주의

form 태그 안에 button 태그를 사용할 때 주의할 점이 있다. button의 디폴트 type은 submit이다. 그러므로 버튼이 클릭되면 폼을 서버에 전송하고 경우에 따라 웹 페이지를 다시 로드한 것처럼 된다. 많은 개발자들이 이런 오류를 종종 범하고 오류를 찾지 못해 쩔쩔매는 경우가 있다. 이런 문제를 피하려면 다음과 같이 type 속성을 button으로 명확히 지정하면 된다.

<button type="button">click</button>

button을 form 태그 안에 두지 않으면 상관없다.

선택형 입력

체크박스, 라디오버튼, 콤보박스는 목록을 보여주고, 목록에서 사용자가 선택하는 방식의 입력 요소이다.

  • 체크박스와 라디오버튼을 만드는 <input> 태그
<input type="checkbox|radio"
	   name="요소 이름"
       value="요소 값"
       checked>
  • value: 폼 요소가 선택된 상태일 때, 웹 서버에 전송되는 값
  • checked: 이 속성이 있으면, 초기에 선택 상태로 출력

체크박스 만들기, <input type="checkbox">

체크박스는 선택/해제 중 하나를 선택하는 폼 요소이다. 체크박스는 각각 선택할 수 있다. checked 속성을 가진 체크박스는 처음부터 선택된 상태로 출력된다.

<form>
	짜장면 <input type="checkbox" value="1">
    짬뽕 <input type="checkbox" value="2" checked>
    탕수육 <input type="checkbox" value="3">
</form>
짜장면 짬뽕 탕수육

라디오버튼 만들기, <input type="radio">

라디오버튼은 name 속성 값이 같은 라디오버튼들이 하나의 그룹을 형성하고, 그 중 하나만 선택되는 폼 요소이다.

<form>
	<input type="radio" name="china" value="1">
    	짜장면<img src="media/jajang.png"><br>
    <input type="radio" name="china" value="2">
    	짬뽕<img src="media/jjambbong.png"><br>
    <input type="radio" name="china" value="3">
    	탕수육<img src="media/tangsuyuk.png">
</form>

<select> 태그

<select name="요소 이름"
 		size="개수"
        multiple>
여러 개의 <option>...</option> 태그로 선택 항목 만들기
</select>
  • size: 콤보박스 창 크기(보일 수 있는 최대 항목 개수). 디폴트는 1
  • multiple: 이 속성이 있으면 다수 항목 선택 가능

!! value 속성은 폼 데이터가 웹 서버로 전송될 때 name 속성과 함께 전달되는 폼 요소의 값이다.

<option> 태그

<option value="옵션 값"
		selected>
항목 문자열
</option>
  • value: 이 항목이 선택되었을 때 웹 서버에 전송되는 값
  • selected: 이 속성이 있으면 초기에 선택 상태로 출력

콤보박스 만들기, <select>

콤보박스는 드롭다운 목록을 보여주고 그중 하나를 선택하는 폼 요소이다. <select> 태그는 콤보박스 전체를 표현하고 <option> 태그는 항목 하나를 표한다. <option> 태그에 selected 속성이 있으면 그 항목은 처음부터 선택 상태로 출력된다.

<form>
	<select name="china">
    	<option value="1">짜장면</option>
        <option value="2" selected>짬뽕</option>
        <option value="3">탕수육</option>
    </select>
</form>
짜장면 짬뽕 탕수육
  • datalist를 사용하면 옵션 리스트에서 선택하거나 입력창에 직접 입력하여 항목을 선택할 수 있지만, select의 경우 옵션리스트에서만 선택할 수 있다.

label로 폼 요소의 캡션 만들기

다음은 텍스트 창의 예시로서, 텍스트 창 앞에 있는 '사용자 ID:'를 캡션이라고 부른다.

사용자 ID : <input type="text">
  캡션         폼 요소

대부분의 폼 요소는 캡션을 함께 사용하지만 따로 캡션임을 명시하지 않는다. <label> 태그를 이용하면 캡션과 폼 요소를 한 단위로 묶어 문서를 훨씬 명료하게 표현할 수 있고, 한 단위로 다룰 수 있어 많은 장점을 가진다.
<label>을 사용하는 방법에는 다음 두 가지가 있다.

<label>로 폼 요소 둘러싸기

<label>로 캡션과 폼 요소를 다음과 같이 묶는 방법이다.

<label>
사용자 ID : <input type="text">
</label>

<label>로 캡션을 지정하고, for 속성으로 캡션과 폼 요소 연결

'<label>캡션</label>'로 캡션 문자열을 만들고, for 속성을 이용하여 다음과 같이 연결한다.

<label for="loginID">
사용자 ID :
</label>
<input type="text" id="loginID">

  • label 태그를 이용한 로그인 폼 만들기
    <form name="fo" method="get">
	<label>사용자 ID: <input type="text" size="15" value="">
   </label>
   <label for="pass">비밀 번호 : </label>
   <input id="padd" type="password" size="15" value="">
   <input type="submit" value="완료">
</form>
    사용자 ID:
    비밀 번호 :

선택형 요소의 캡션을 <label>로 감싸기

지금까지 체크박스나 라디오 버튼에서 o,ㅁ를 클릭할 때만 선택으로 처리되고 '짜장면' 등의 캡션 위에 마우스를 클릭해도 체크박스나 라디오버튼의 상태를 변경할 수 없었다.
<label>을 이용하여 '짜장면', '짬뽕' 문자열을 캡션으로 달게 되면, 캡션 문자열 위에 마우스를 클릭해도 폼 요소를 클릭한 것으로 ㅓ리된다.

<label>
	짜장면<input type="radio" name="china" value="1"> //짜장면이 캡션이다.
</label>

이 코드는 다음과 같이 쓸 수도 있다.

<label for="china">짜장면</label>
<input type="radio" name="china" id="china" value="1">

<label>로 문자열과 이미지를 함께 캡션으로 만들 수 있다. 이렇게 하면, 다음과 같이 '짜장면' 글자나 jajang.png 이미지를 클릭해도 라디오버튼을 선택할 수 있다.

<label>
	<input type="radio" name="china" value="1">
   짜장면 <img src="jajang.png"> //캡션
</label>
<form>
	 <label>
		<input type="radio" name="china" value="1">
   	짜장면 <img src="media/jajang.png"> //캡션
	 </label><br>
    label>
		<input type="radio" name="china" value="2" selected>
   	짬뽕 <img src="media/jjambbong.png"> //캡션
	 </label><br>
    label>
		<input type="radio" name="china" value="3">
   	탕수육 <img src="media/tangsuyuk.png"> //캡션
	 </label>
</form>

색 입력, <input type="color">

HTML에서 색 표현

HTML과 CSS에서 색은 빛의 3원색인 red, green, blue가 섞인 것으로 '#'으로 시작하는 6자리 코드로 표현한다. 이 코드는 #rrggbb의 형식으로, rr은 빨강, gg는 초록, bb는 파랑의 농도를 표기하며, 각 원소 색은 8비트 범위(0~255)의 16진수(0~FF)로 표기한다.

사례
brown : #A52A2A
blueviolet : #8A2BE2
...

HTML5에서는 색을 꾸미는 것은 모두 CSS 스타일 시트를 사용하도록 하고 있다.

색 입력 폼 요소, <input type="color">

HTML5에서는 컬러 다이얼로그를 출력하여 색을 입력받는 다음 태그를 제공한다. 여기서 value는 초기 색을 지정한다. #00FF00은 초록색을 나타낸다

<input type="color" value="00FF00">

컬러 다이얼로그에서 사용자가 선택한 색은 #rrggbb 형식으로 value 속성에 저장되며, 이 값은 자바스크립트 코드에서 활용한다.

컬러 다이얼로그로 색 입력 응용

<form>
	색 선택 <input type="color" value="#00BFFF"
   	   onchange="document.body.style.color=this.value">
          // 선택한 색을 브라우저의 글자에 적용하는 자바스크립트 코드
</form>

시간 정보 입력

HTML5에서는 <input type="month|week|date|time|datetime-local"> 태그로 달, 주, 날짜, 시간을 쉽게 입력받을 수 있는 멋진 폼 요소를 제공한다.
value 속성에는 날짜나 시간의 초깃값을 지정하며, 사용자는 스핀 버튼을 눌러 날짜나 시간을 쉽게 수정할 수 있다. 또한 드롭다운 버튼을 클릭하면 달력이 펼쳐지고 원하는 시간을 쉽게 지정할 수 있다.

(a) 달 입력
<input type="month" value="2016-09">

  • 드롭다운 버튼

(b) 주 입력
<input type="week" value="2016-W36">

  • 드롭다운 버튼

(c) 날짜 입력
<input type="date" value="2016-09-01">

  • spin 버튼으로 변경 가능

(d) 로컬 날짜 시간 입력
<input type="datetime-local" value="2016-09-01T21:30:10.32">

  • spin 버튼으로 변경 가능

(e) 시간 입력
<input type="time" value="21:30">

  • spin 버튼으로만 변경
type 속성값입력 데이터value의 형식
<input type="month">년/월2016-09
<input type="week">년/몇 번째 주2016-W16
<input type="date">년/월/일2016-09-01
<input type="datetime-local">해당 나라의 시간 년/월/일/오전, 오후/시/분/초/100분의 1초2016-09-01T21:30:10:32
<input type="time">시/분21:30
  • 시간 정보 입력 폼 요소 활용
<form>
<pre>
month : <input type="month" value="2016-09"><br>
week : <input type="week" value="2016-W36"><br>
data : <input type="date" value="2016-09-01"><br>
time : <input type="time" value="21:30"><br>
local : <input type="datetime-local" value="2016-09-01T21:30:10.32"><br>
</pre>
</form>
month : 

week : 

data : 

time : 

local :
  • 생일 날짜 입력 받기
<form>
<table>
	<tr><td>생일</td>
    	<td><input type="date" value="2000-05-20"></td></tr>
    <tr><td>생일파티시간</td>
    	<td><input type="time"></td></tr>
    <tr><td>생일파티장소</td>
    	<td><input type="text"></td></tr>
 </table>
 </form>
생일
생일파티시간
생일파티장소
## 스핀버튼과 슬라이드바로 편리한 숫자 입력 HTML5에서는 정수나 실수를 편리하게 입력할 수 있는 다음 두 개의 폼 요소를 제공한다. - 스핀버튼으로 정교한 값 입력 : <input type="number"> - 슬라이드바로 대략적인 값 입력 : <input type="range">

이들 태그의 min, max, step 속성에 최소, 최대, 스핀버튼이나 슬라이드바를 조절할 때 증감 단위 값을 각각 지정한다. 사용자가 스핀버튼이나 슬라이드바로 입력한 숫자는 해당 태그의 value 속성에 저장된다. 이 값은 자바스크립트로 읽어 활용한다.

<form>
	지속시간 (0.0~10.0시간) :
    <input type="number" min="0.0" max="10.0"
    	   step="0.5"><br><br>
    온도 설정 :10&deg;
    <input type="range" min="10" max="30"
    	   list="temperatures">30&deg;
    <datalist id="temperatures">
    	<option value="12" label="Low">
        <option value="20" label="Medium">
        <option value="28" label="High">
    </datalist>
</form>
지속시간 (0.0~10.0시간) :

온도 설정 :10° 30°

입력할 정보의 힌트 보여주기 (회원가입할 때 쓰기)

<input> 태그의 placeholder 속성은 사용자가 입력할 정보의 형식을 살짝 보여주는 속성이다. 다음은 placeholder 속성으로 이메일 입력 창에 입력할 형식을 알려주는 사례입니다.

이메일 주소:
<input type="email" placeholder="id@host">

이메일 주소:

형식을 가진 텍스트 입력

HTML5에서는 email 주소, URL, 전화번호와 같이 텍스트가 특정 형식에 맞게 입력되었는지 검사하는 폼 요소들을 제공한다.

email 주소, <input type="email">

<input type="email">은 email 주소만 입력받는 태그이다. 이 창에는 'happy@mycom.com'과 같이 W3C의 규정에 맞도록 email 주소가 입력되어야 한다. 이 창은 <input type="text">에 의해 생성된 창과 모양은 같지만, submit 버튼이 클릭되면 웹 서버로 전송하기 전에 형식 검사가 수행된다. 입력된 텍스트가 email 주소의 형식에 맞지 않으면 오류 메세지를 출력하고 전송하지 않는다. 그러므로 잘못된 입력을 미리 발견함으로써 잘못된 입력이 웹 서버로 전송되는 불필요한 트래픽을 막을 수 있다.

이메일 주소:
<input type="email" placeholder="id@host">
<input type="submit" value="전송">

이메일 주소:

URL, <input type="url">

<input type="url">은 URL만 입력받는 태그로서 'http://www.naver.com'와 같이 W3C의 규정에 맞도록 입력되어야 하며, 웹 서버로 전송될 때 유효성이 자동으로 검사된다. 사용자의 바른 입력을 유도하기 위해 다음과 같이 placeholder 속성을 함께 사용하는 것이 바람직하다.

<input type="url" placeholder="http://">

전화번호 입력, <input type="tel">

전화번호의 형식이 워낙 다양하므로, 현재 W3C에서는 전화번호를 자유롭게 입력하도록 허용하고 있어 이 태그는 전화번호의 유효성 검사를 하지 않는다. 사용자의 실수를 줄이기 위해 다음과 같이 placeholder 속성에 전화번호 형식을 미리 보여주는 것이 바람직하다.

<input type="tel" placeholder="010-1234-5678">

검색어 입력, <input type="search">

다음 태그를 이용하면 검색어 입력 창을 만들 수 있다.

<input type="search" placeholder="검색어">

검색어 입력 창의 오른쪽 끝에 x 표시가 출력되며, x를 클릭하면 입력이 취소된다.

  • 형식을 가진 텍스트 입력
<form>
	emial : <input type="email" placeholder="id@host"><br>
    홈페이지 : <input type="url" placeholder="http://"><br>
    전화번호 : <input type="tel" placeholder="010-1234-5678"><br>
    		 <input type="submit" value="확인"><br><br>
<hr>
	검색어 : <input type="search" placeholder="검색어">
    	   <input type="button" value="검색">
</form>
emial :
홈페이지 :
전화번호 :


검색어 :

폼 요소들의 그룹핑, <fieldset>

HTML5에서는 <fieldset> 태그로 폼 요소들을 그룹으로 묶을 수 있으며, 그룹의 제목은 <legend> 태그로 표현한다. 브라우저는 그룹을 둘러싸는 외곽선 박스와 제목을 출력하여 그룹을 표시한다. <fieldset>으로 그룹을 만든 사례를 보여준다.

  • 폼 요소의 그룹핑
<form>
	<fieldset>
    	<legend>회원정보</legend>
        이메일 : <input type="email"><br>
        홈페이지 : <input type="utl"><br>
        전화번호 : <input type="tel">
    </fieldset>
    <small>질문 : Tel. 010-111-1111</small>
</form>
회원정보 이메일 :
홈페이지 :
전화번호 : 질문 : Tel. 010-111-1111
profile
귤티
취준 진입
이전 포스트

[Capstone] React Native Layout

다음 포스트

[Capstone] CSS3

0개의 댓글