정보기술

html5 기초

duqe 2025. 2. 17. 23:40

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: <sup></sup>
      • SubScript: <sub></sub>
      • <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
저작자표시 비영리 동일조건