html5 기초

HTML Element

• Begin Tag: <a href="..." target="_blank">
  • Element Name: a
  • Attribute Name: href, target
  • Argment: "...", "_blank"
• Contents
• End Tag: </a>

Text-related

• line BReaker: <br/>
• Paragraph: <p></p>
• Horizontal Rule: <hr>
• Header text: <h1></h1> ~ <h6></h6>, <hgroup></hgroup>
• PREformatted text: <pre></pre>
• Block Quotation: <blockquote></blockquote>, (attribute)cite=url
• Special Characters
• Font Style
  • Physical Element
    • <b></b>
    • <i></i>
    • StrikeThrough: <s></s>
    • <u></u>
    • SuperScript: 
    • SubScript: 
    • <small></small>
  • Logical Element
    • Title of the Work (작품의 제목 이탤릭): <cite></cite>
    • <code></code>
    • 프로그램의 샘플 출력: <samp></samp>
    • Variable (변수 이탤릭): <var></var>
    • Definition (정의 이탤릭): <dfn></dfn>
    • Emphasis (강조 이탤릭): <em></em>
    • Important (더 강조): <strong></strong>
    • Abbreviation Form (축약형): <abbr></abbr>
    • address: <address></address>
    • Keyboard Input Content (키보드로 입력한 내용임을 표시): <kbd></kbd>
    • quotation (짧은 인용구): <q></q>
    • Highlighter (형광펜): <mark></mark>
• Block & Inline
  • <div></div>
  • <span></span>

List-related

Unordered Lists: <ul></ul>

• Using CSS (attribute) list-style-type
  • none
  • disc(Default)
  • circle
  • square

Ordered Lists: <ol></ol>

• (Attribute) type=argument
  • 1: 1, 2, 3...
  • a: a, b, c...
  • A: A, B, C...
  • i: i, ii, iii...
  • I: I, II, III...
• (Attribute) start=argument
  • Starting Number
• (Attribute) reversed: Revere Order
• li (Attribute) value=argument
  • Change Item Number

Definition Lists: <dl></dl>

• Definition Term: <dt></dt>
• Definition Description: <dd></dd>

Image-related

Attribute

• src
• width
• height
• alt
• usemap = "#name"

HyperLink-related

Default Attribute

• href (hyper reference)
• target
  • _blank
  • _self
  • _top
  • _parent
  • windows name
• download
• alt
• usemap = "#name"

Attribute "id"

• Link
  • <a href="#Name of Position">
• Destination
  • <a id="Name of Position">

Image Map

iframe element

구글
네이버
다음

ETC Link

• E-mail: <a href="mailto:aaa@aaa.com">
• JavaScript: <a href="javascript:alert('Hello, World!');">

Table

Basic Element

<table>
<caption></caption>
<colgroup>
<col style="">

	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
		</tr>
	</tfoot>
</table>

Merge

• Horizontal Merge: th, td (attribute) colspan
• Vertical Merge: th, td (attribute) rowspan

Grouping

• theader
• tbody
• tfoot

Column Style

<table>
    <caption>테스트 차트</caption>
    <colgroup>
        <col style="background-color: #f00">
        <col span="2" style="background-color: #ff0"> <!-- 2개의 열 적용 -->
        <col style="background-color: #0f0">
    </colgroup>
    <thead>
    <tr>
        <th>가</th>
        <th>나</th>
        <th>다</th>
        <th>라</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>6</td>
        <td>8</td>
        <td>10</td>
        <td>12</td>
    </tr>
    </tfoot>
</table>

Media-related

Audio/Video Element

• Attribute
  • autoplay
  • controls
  • loop
  • muted
  • preload= "value" // autoplay 의 경우 비적용
    • none
    • auto
    • metadata
  • src
  • Video Only
    • width
    • height
    • poster: Alternative Image

<audio controls>
    <source src="./audio/1.mp3" type="audio/mp3">
    <source src="./audio/2.ogg" type="audio/ogg">
    <source src="./audio/3.wma" type="audio/wma">
</audio>
<video controls width="700" height="400" poster="./img/a.jpg>
    <source src="./video/1.mp4" type="video/mp4">
    <source src="./video/2.avi" type="video/avi">
    <source src="./video/3.wmv" type="video/wmv">
</audio>

Semantic Element

Document Structualization

<header>
<nav>
<section>	<aside>
<article>
<article>
<article>
<footer>

HTML5를 이용한 문서 구조화

• <header>
  • Site Name, Logo, Introduction
• <footer>
  • Producer Information, Copyright
• <nav>
  • Navigation
• <aside>
  • Other than Major Contents
• <section>
  • Chapter, Verse
• <article>
  • Contents

Semantic Block Element

<!-- main 요소는 사이드바, 네비, 저작권, 로고, 검색 등은 제외 -->
<main>
    <section>
        <h1>웹페이지 구성요소</h1>
        <p>HTML, CSS, Javascript</p>
        <article>
            <h2>HTML</h2>
            <p>버전 5, 2014</p>
        </article>
        <article>
            <h2>CSS</h2>
            <p>모듈 3, 2012</p>
        </article>
        <article>
            <h2>JavaScript</h2>
            <p>ES 6, 2015</p>
        </article>
    </section>
</main>

<!-- figure 요소는 이미지, 동영상 등 블록화 -->
<figure>
    <img src="xxx.png" alt="rose" width="300" height="200">
    <figcaption>장미 사진</figcaption>
</figure>

<!-- detail 세부정보 선택적 표시 -->
<details> // 줄임 상태
    <summary>HTML</summary>
    <p>웹페이지의 구조와 내용</p>
    <p>표준안 발표: 2014년 10월</p>
    <p>단일 표준화: 2019년 5월</p>
</details>
<details open> // 펼침 상태
    <summary>CSS</summary>
    <p>웹페이지의 비주얼</p>
    <p>CSS3: 2012년</p>
    <p>다단 등 다양한 요소 포함</p>
</details>

Semantic Inline Element

<!-- time -->
<p>기상시간: <time>07:00</time></p>
<p>취침시간: <time>23:00</time></p>
<p>HTML5 표준안은 <time datetime="2014-10-28">2014년 말</time>에 발표</p>

<!-- meter 수치나 비율 -->
<p>디스크 사용률 <meter max="100" value="70"></meter>(1TB 기준)</p>
<p>영화 예매율 <meter min="0" max="100" value="95"></meter></p>
<p>지방선거 투표율 <meter value="0.35" title="오후 3시 현재 투표율"></meter></p>

<!-- pregress 작업의 진행율 표시, 동적 상황을 나타내므로 JavaScript 등 연동 필요 --> 
<p>파일 다운로드 상태 <progress value="25" max="100"></progress></p>

<!-- ruby 후리가나 같은 루비 주석 표시
<p><ruby>読仮名<rt>よみがな</rt></ruby></p>
<p><ruby>HTML5 웹프로그래밍<rt>HTML5, CSS, JavaScript</rt></ruby></p>

<!-- wbr (Word Break Oppotunity) 줄바꿈

Web Form

General Attribute of Form Element

• action="URL"
  • 폼데이터를 전달받아 처리할 서버 응용프로그램의 주소
• method="전송방식"
  • 폼 데이터를 웹서버로 전송하는 방식 (value: get, post)
• name="이름"
  • 폼 이름, js파일에서 사용
• accept-charset="인코딩"
  • 폼 제출을 위해 사용되는 문자 인코딩 방식
• autocomplete="on/off"
  • 폼의 input 요소에서 자동완성 기능의 사용 여부
• enctype=" 인코딩"
  • "method=post" 인 경우 서버로 제출될 때 폼 데이터의 인코딩 방식
• novalidate
  • 제출시 폼 데이터의 유효성을 검사하지 않도록 지정
• target="창"
  • 폼 제출 후 서버로부터 전달받은 처리 결과를 보여 줄 창 지정(value: _blanki, _self, _parent, _top, 창이름)

<p>이름: <input type="text" name="id"></p>
<p>비번: <input type="password" name="pwd"></p>
<input type="button" value="로그인">

Element Input

• Attribute Value of "input type="
  • text
  • password
  • radio
  • checkbox
  • hidden: 사용자에게 보이지 않는 상태로 데이터를 전송받아 서버로 전송
  • file: 로컬PC의 파일 선택 버튼
  • image: 이미지를 제출 버튼으로 지정
  • submit
  • reset
  • button: 클릭할 수 있는 일반 버튼. 주로 JavaScript 활성화를 위해 사용
  • search
  • tel
  • url: 자동으로 유효성 검사
  • email
  • number: 특정 범위의 숫자 입력
  • range: 특정 범위의 숫자 입력 (슬라이드 바 형태)
  • color: 색상
  • date: 년, 월, 일
  • month: 년, 월
  • week: 년, 주차
  • time
  • datetime-local
• other attribute
  • accept="파일유형"
    • input type=file
    • 서버로 업로드할 수 있는 파일형식 지정
    • value: image/*, audio/*.mp3
  • alt="텍스트" height="픽셀" width="픽셀" src="url"
    • input type=image
  • autocomplete="on/off"
    • input type=text, password, tel, search, url, email, range, color, date/time
    • 지정한 입력타입의 값을 자동으로 완성할 지 여부 결정
  • autofocus
    • 페이지 로드시 자동으로 입력 타입에 포커스 위치
  • checked
    • input type=checkbox, radio
  • disabled
    • input 요소를 비활성화
  • form="form id"
    • input 요소가 form 밖에서 사용되는 경우 input 요소가 속하는 폼 지정
  • formaction="url" formenctype="인코딩" formmethod="전송방식" formnovalidate formtarget="창"
    • input type=submit, image
    • form의 attribute인 action, enctype, method, novalidate target 대체
  • list="datalist id"
    • input element에 바인딩되는 datalist element 지정
  • min/max/step="숫자/날짜", "숫자"
    • input type=number, range, date/time
    • max/min: 최대/최소값 step: max/min 사이 입력값의 유효한 간격
  • minlength/maxlength="숫자"
    • 입력가능한 최소/최대 문자 개수
  • multiple
    • input type=file, email
    • input요소에서 하나 이상의 값을 지정할 수 있도록 함.
  • nume="이름"
    • 서버로 전달되는 input요소의 이름 지정
  • pattern="정규표현식"
    • input type=text, password, tel, search, url, email, date
    • 입력값에 대해 유효성 검사를 위한 정규 표현식을 지정
  • placeholder="텍스트"
    • input type=text, password, tel, search, url, email
    • 입력값에 대한 힌트를 희미한 텍스트로 보여줌.
  • readonly
    • input요소를 읽기전용으로 지정
  • required
    • input type=text, password, tel, search, url, email, date/time, checkbox, radio, file, number
    • 입력타입에 반드시 값이 입력되어야 함을 지정
  • size="숫자"
    • input type=text, password, tel, search, url, email
    • 화면에 보이는 텍스트 입력 타입의 최대 길이를 지정
  • type="유형"
    • input요소가 나타날 수 있는 입력 타입을 지정
  • value="텍스트"
    • input type=button, reset, submit
      • 버튼위에 표시되는 텍스트
    • input type=text, password, hidden
      • 입력타입에 표시되는 초기값
    • input type=checkbox, radio, image
      • 입력과 관련하여 서버로 전달되는 값

Text Input

• input type="text"
• attribute of input type="textarea"
  • name="이름"
    • 텍스트영역의 이름
  • cols="숫자" / rows="숫자"
    • 한줄에 입력 가능한 글자수 / 영역내에 라인수
  • wrap="값"
    • 줄바꿈 여부
    • Value
      • soft: Default 자동줄바꿈 않함.
      • hard: 자동줄바꿈. 다만 cols 속성이 지정되어야 함.
  • readonly
    • 읽기전용
• input type="password"
• input type="search"
• input type="tel"
• input type="emial

Name:

Phone number:

Birth date:

Password:

Search:

URL:

E-mail:

Number Input

• input type="number"
  • box shape with spin button
• input type="range"
  • slide bar shape
• other attribute
  • max/min
  • value
  • step

<form id="num">
    <p>Number type: <input type="number" min="1" max="10" step="0.5" value="1"></p>
    <p>Range type: <input type="range" min="1" max="100" step="5" value="50"></p>
    <input type="submit"> 
</form>

Date Selection

• input type="radio"
• input type="checkbox"
• input type="file"
• select
  • attribute
    • name="리스트 네임"
    • size="한번에 보여질 개수"
    • multiple
    • autofocus
    • disabled
    • form
    • required
  • optgroup
    • attribute
      • label
  • option
    • attribute
      • disable
      • selected
      • value
• datalist
  • input type="text"에 대한 옵션 리스트를 지정
  • option 사용

<h1>Selection</h1>
<form id="selection">
    <p>Gender:
        <input type="radio" name="gender" value="male" checked>man
        <input type="radio" name="gender" value="female">woman
    </p>
    <p>Grade:
        <input type="radio" name="grade" value="1">Freshman
        <input type="radio" name="grade" value="2" checked>Sophomore
        <input type="radio" name="grade" value="3">junior
        <input type="radio" name="grade" value="4">senior
    </p>
    <p>Subject1:
        <input type="checkbox" name="subject1" value="c1">OS
        <input type="checkbox" name="subject1" value="c2" checked>Programing
        <input type="checkbox" name="subject1" value="c3">Database
        <input type="checkbox" name="subject1" value="c4">AI
    </p>
    <p>Select2:
        <select name="subject2" size="10">
            <optgroup label="Freshman">
                <option value="a1">Korean Language</option>
                <option value="a2">English Language</option>
                <option value="a3">Mathemetics</option>
                <option value="a4">Economy</option>
            </optgroup>
            <optgroup label="Sophomore">
                <option value="b1" selected>Korean Language</option>
                <option value="b2">English Language</option>
                <option value="b3">Mathemetics</option>
                <option value="b4">Economy</option>
            </optgroup>
        </select>
    </p>
    <p>Web browser:
        <input type="text" list="browsers">
    </p>
    <datalist id="browsers">
        <option>Edge</option>
        <option>Chrome</option>
        <option>Opera</option>
        <option>Explorer</option disabled>
    </datalist>
    <p>Color:
        <input type="color" name="color">
    </p>
</form>
<form enctype="multipart/form-data"> <!-- entype 폼데이터가 서버로 제출될때 데이터가 인코딩되는 방법 명시 -->
    <p>File:</p>
    <input type="file" accept="image/*" multiple> <!-- accept로 선택할 수 있는 파일 유형 지정 -->
</form>

Button

• input type="submit", "image", "reset", "button"
• button type="button", "submit", "reset"
  • attribute
    • name
    • value

<form id="button">
    <input type="submit" value="login">
    <input type="reset" value="rewrite">
    <input type="image" src="./img/home.png" height="15" width="15" alt="confirm">
    <input type="button" value="Just Click!!" onclick="alert('Hello!! World!!!')">
    <button type="button">Just Click!!!</button>
    <button type="button"><img src="./img/home.png" height="15"></button>
</form>

Date/Time Selection

• input type="date", "month", "week", "time", "datetime-local
  • attribute
    • min/max
    • step
    • value

<form id="datetime">
    <p>Year Month Day:
        <input type="date" min="2023-10-01" max="2023-10-31">
    </p>
    <p>Month:
        <input type="month">
    </p>
    <p>Week:
        <input type="week">
    </p>
    <p>Time:
        <input type="time" step="10" value="16:00:00">
    </p>
    <p>Local Time:
        <input type="datetime-local" value="2023-10-01T16:00:00">
    </p>
</form>

Output

• output
  • input요소의 값을 출력하기 위해서는 input요소의 값이 변하게 되면 발생하는 form요소의 input이벤트를 활용하여 출력할 값의 연산식을 JavaScript문법으로 지정
  • attribute
    • name
    • for

<form oninput="out.value=(parseInt(a.value)*parseInt(b.value))">
    <input type="range" id="a" min="1" max="50" value="10"/>
    *
    <input type="number" id="b" min="1" max="100" value="20"/>
    =
    <output name="out" for="a b"></output>
</form>

Grouping

• label
  • form요소와 caption을 묶어줌.
• fieldset
  • attribute
    • name
    • form
    • disabled
  • <legend>: grouping 요소의 캡션 표시

<form>
    <p><label>id: <input type="text" value="knou"></label></p>
    <p><label>pass: <input type="password" placeholder="********"></label></p>
    <fieldset width="100">
        <legend>Gender</legend> <!-- Caption -->
        <!-- label의 for속성값과 input의 id속성값으로 매치 -->
        <label for="male">Man</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="female">Woman</label>
        <input type="radio" id="female" name="gender" valie="female">
    </fieldset>
    <input type="submit">
    <input type="reset">
</form>

HTML attribute Priority

1. rel
2. type
3. href, src
4. width, height
5. target
6. id
7. name
8. class
9. style
10. title, alt
11. etc attribute