HTML

HTML(HyperText Markup Language) 이란?

하이퍼-텍스트(HyperText) 란?

사용자에게 내용의 비순차적 검색이 가능하도록 제공되는 텍스트. 문서 내의 특정한 단어가 다른 단어나 데이터베이스와 링크되어 있어 사용자가 관련 문서를 넘나들며 원하는 정보를 얻을 수 있음. 전자 사전·멀티미디어 데이터베이스·문장 작성 시스템 등에 응용된다.

HTML은 웹페이지를 만드는 표준 마크업 언어.

HTML은 Hyper Text Markup Language 의 약자이다.
HTML은 마크업을 이용하여 웹페이지의 구조를 기술 한다.
HTML 요소(elements)는HTML페이지의 구성 요소이다.
HTML elements 는 태그들(tags)로 표현된다.
브라우저에 태그는 표시되지 않으며 웹페이지 내용(content) 만 랜더링 되어 보여진다.

간단한 HTML 문서 (Document)

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<!DOCTYPE html> : 이 문서의 종류 선언 (HTML5 )
<html> element 는 HTML page 의 루트 엘리먼트(root element)
<head> element 이 문서의 메타정보 포함(meta information)
<title> element는 이 문서 제목을 지정
<body> element는 보여지는 페이지 내용 포함
<h1> element는 가장 큰 제목 정의
<p> element는 한 문단 정의( a paragraph)

HTML 태그들(Tags)

`<tagname>`내용(content)…`</tagname>`

HTML tags는 짝을 이룸 ex) <p> and </p>
첫번째 태그를 start tag 또는 opening tag, 두번째 태그를 end tag 또는 closing tag 라고 한다.
end tag 는 the start tag 이름 앞에 / 를 붙인다.

웹브라우저(Web Browsers)

웹브라우저 (Chrome, IE, Firefox, Safari)의 목적은 HTML 문서를 읽고 그 내요을 표시하는 것이다.

브라우저는 HTML tags는 표시하지 않고 문서를 어떻게 표시할 지 방법을 결정하기 위해 사용한다.

HTML Page 구조

[구조보기][https://www.w3schools.com/html/html_intro.asp]

`<!DOCTYPE>` 선언

<!DOCTYPE> 선언은 HTML 문서타입을 나타내며 웹페이지를 올바르게 보이도록 한다.

문서의 첫 줄에 단 1번만 선언하고 <!DOCTYPE>은 <!doctype> 소문자로도 가능하다.

HTML5를 위한 <!DOCTYPE> 선언 :

<!DOCTYPE html>

HTML Versions

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

HTML 문서 확인 하기

Step 1: Open Editor(PC)

Step 2: HTML 작성

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: HTML Page 저장

Step 4: 웹브라우저에서 HTML Page 확인

HTML 요소(Elements)

HTML(Elements) 요소는 항상 시작태그 와 종료태그로 구성 된다.

<tagname>내용...</tagname>

<p>My first paragraph.</p>

시작태그	Element 내용	종료태그
`<h1>`	My First Heading	`</h1>`
`<p>`	My first paragraph.	`</p>`
`<br>`

내용이 없는 HTML요소는 비어 있는 요소라고 불린다. 텅 빈 요소
은 끝나는 태그를 가지고 있지 않다.

중첩 HTML 요소(Elements)

HTML요소는 중첩될 수 있다(요소는 요소를 포함할 수 있음).

모든 HTML문서는 중첩된 HTML요소로 구성된다.

이 예제에는 네가지 HTML요소가 포함되어 있다

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<html> 요소는 전체 문서를 정의 한다.

시작태그 <html> 과 종료태그</html>로 되어있다.

요소 내용은 다른 HTML요소(<body> 요소)에 작성 한다.

<body> 요소는 문서 body 를 정의 한다..

시작태그 <body> 와 종료태그 </body>로 되어 있다.

<body> 요소의 내용은 두개의 다른 HTML 요소를 가지고 있다. (<h1> 과 <p>).

<h1> 요소는 제목을 정의한다.

시작태그 <h1> 과 종료태그 </h1>로 되어있다.

<h1> 요소의 내용은 My First Heading 이다.

<p> 요소는 항목,문단을 정의한다.

시작태그 <p> 과 종료태그 </p>로 되어있다.

<p> 요소의 내용은 My first paragraph 이다.

종료태그를 잊지 마라!

일부 HTML요소는 종료 태그를 잊어 버리더라도 올바르게 표시가 된다.

<!DOCTYPE html>
<html>
<body>

<p>My First Heading.
<p>My first paragraph.
<br>
<br />

</body>
</html>

하지만 종료 태그를 잊어 버리면 예기치 않은 결과 또는 오류가 발생할 수 있습니다.

빈 HTML 요소(Empty HTML Elements)

내용이 없는 HTML요소는 비어 있는 요소라고 불린다.

<br> 요소는 종료 태그가 없는 빈 요소이다.

<br />로 쓸 수도 있다.

HTML5는 비어 있는 요소를 닫을 필요가 없다. 하지만 만약 엄격하게 문서를 확인하거나 XML구문 분석기를 사용하여 문서를 읽어야 하는 경우 모든 HTML요소를 올바르게 닫아야 합니다.

태그 작성시 소문자 사용

HTML 태그는 대소문자 모두 사용 가능하다. 하지만 W3C는 소문자를 추천하며 XHTML 문서 타입에서는 소문자만 사용 할 수 있다.

HTML 속성

모든 HTML 요소는 속성(attributes)을 가지고 있습니다.
속성은 HTML요소에 대한 추가 정보를 제공합니다.
속성은 항상 시작 태그에 지정됩니다.
속성은 일반적으로 name=”value”와 같은 Name /value 쌍으로 나타납니다.

태그의 lang Attribute

<!DOCTYPE html>
<html lang="ko">
<body>

...

</body>
</html>

ko 두 글자는 언어를 지정한다.

title 속성

<!DOCTYPE html>
<html lang="ko">
<body>

<p title="I'm a tooltip">
This is a paragraph.
</p>

</body>
</html>

<p> 요소에 title 속성 추가하면 내용(This is a paragraph)에 마우스 오버(Mouse Over)시 tooltip으로 보여진다.

href 속성

HTML 링크(link)는 <a> 태그로 정의하며 그 링크의 주소는 href 속성으로 지정한다.

<a href="http://www.thecoding.kr">This is a link</a>

Size 속성

HTML 이미지들은 <img> 태그로 정의하며 파일명은 src 속성에 지정하고 이미지의 크기는 width와 height 속셍에 지정한다.

<img src="thecoding.jpg" width="104" height="142">

alt 속성

alt 속성은 이미지가 보이지 않을 때 (이미지가 없을 때) 대신 보여진다.

<img src="thecoding.jpg" alt="thecoding.kr" width="104" height="142">

기타

속성은 대소문자를 가리지는 않지만 소문자를 사용하자.
속성의 값은 쌍(단)따옴표를 쓰지 않안도 되지만 쌍(단)따옴표를 사용하자.(값에 공백등 문제가 생기)

HTML 제목 태그(Headings) `<h1>~<h6`>

Headings는 HTML 문서에서 중요
<h1> 에서 <h6> 태그로 정의
<h1>가장중요한제목</h1에서 <h6>가장덜중요한제목</h6>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Headings는 HTML 문서에서 중요

검색 엔진(구글, 네이버등)이 Headings를 사용해서 웹페이지 구조와 내용을 색인화 함
제목을 위해서 만 사용
글자를 크고(Big) 굵게(Bold) 하기 위해 사용하면 안됨

HTML Horizontal Rules `<hr>`

HTML 페이지에서 주제가 변하거나 내용을 구분하기 위해 사용

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The HTML `<head>` Element

Headings와 관련 없음
HTML 문서의 <title>, metadata, scripts, styles 등을 작성 하는 곳
브라우저에 표시되지 않음

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
</body>
</html>

HTML 단락 태그 (Paragraphs) `<p>`

<p> 태그는 단락을 정의

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 줄바꿈 태그 (Line Breaks) `<br>`

<p>
  My Bonnie lies over the ocean.<br>

  My Bonnie lies over the sea.<br>

  My Bonnie lies over the ocean.<br>

  Oh, bring back my Bonnie to me.<br>
</p>

HTML `<pre>` Element

<pre></pre> 에 쓰여진 대로 보여 짐

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

HTML Styles

The HTML Style Attribute

HTML 요소에 스타일을 셋팅 하기 위해서는 style 속성 사용

<tagname style="property:value;">

HTML Background Color `background-color:value`

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color `color:value`

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts `font-family:value`

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size `font-size:value`

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

HTML Text 정렬(Alignment) `text-align:value`

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Formatting Elements

텍스트에 틀별한 의미를 부여하기 위한 태그
<b> – Bold text(단지 굵게)
<strong> – Important text(중요해서 굵게)
<i> – Italic text (이텔릭하게)
<em> – Emphasized text (중요해서 이텔릭하게)
<mark> – Marked text
<small> – Small text(작게)
<del> – Deleted text(삭제)
<sub> – Subscript text(아래첨자)
<sup> – Superscript text(윗첨자)

<b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<h2>HTML <small>Small</small> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

HTML 짧은 인용에 사용 `<q>`

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML 긴 인용에 사요 `<blockquote>`

Here is a quote from Lorem Ipsum Web Site:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non nunc vel elit sagittis interdum. Sed urna urna, rutrum et arcu a, scelerisque egestas dolor. Phasellus et elit vitae magna facilisis facilisis vitae vitae tellus. Vivamus ut lorem iaculis, maximus mauris sed, dapibus enim. Sed mauris arcu, varius id ultricies et, interdum vel diam. Duis tristique, lorem non vehicula ullamcorper, dolor tortor bibendum diam, nec varius ipsum metus ut ante. Donec vel fringilla urna, id efficitur augue. Mauris sem ante, rhoncus nec purus non, consequat pretium urna.

HTML 축약어 사용 `<abbr>`

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML 작품명에 사용 `<cite>`

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML 텍스트의 방향을 바꿀때 사용 `‘

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML 주석 (Comments)

HTML Comment Tags ``

<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

조건 주석 (Conditional Comments)

[참고][http://blog.naver.com/realmani/220243542500]
IE9 브라우저 일 경우 사용

<!--[if IE 9]>
    .... some HTML here ....
<![endif]-->

HTML Colors

Color Values

RGB Value

rgb(red, green, blue)

<h1 style="background-color:rgb(255, 0, 0)">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255)">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113)">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238)">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0)">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205)">rgb(106, 90, 205)</h1>

<p>In HTML, you can specify colors using RGB values.</p>

HEX Value

#rrggbb

<h1 style="background-color:#000000">#000000</h1>
<h1 style="background-color:#3c3c3c">#3c3c3c</h1>
<h1 style="background-color:#787878">#787878</h1>
<h1 style="background-color:#b4b4b4">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0">#f0f0f0</h1>
<h1 style="background-color:#ffffff">#ffffff</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

RGBA Value

rgb(red, green, blue, alpha)

<h1 style="background-color:hsla(9, 100%, 64%, 0)">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2)">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4)">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6)">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8)">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1)">hsla(9, 100%, 64%, 1)</h1>

<p>You can make transparent colors by using the HSLA color value.</p>

HTML Styles – CSS

HTML 스타일링 – CSS

CSS 는 Cascading Style Sheets 의 약자
CSS 는 HTML elements 을 creen, paper 또는 다른 media 에 표시하는 방법을 기술
HTML 태그로 구조를 만들고 CSS 로 다양하게 표현 가능

HTML 에 추가하는 방법

Inline – HTML elements 에 style 속성으로 사용
Internal – <head>section 에 <style>element 사용
External – 외부 별도 CSS file 로 작성

Inline CSS

style='key:value' 사용

<h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS

<style> 태그 사용

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

<link> 엘리먼트에 에 href 속성에 css 파일 위치 표시

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

id 속성

# 사용 해서 접근

<!DOCTYPE html>
<html>
<head>
<style>
  #p01 {
    color: blue;
}
</style>
</head>
<body>

<p id="p01">I am different</p>

</body>
</html>

class 속성

. 사용 해서 접근

<!DOCTYPE html>
<html>
<head>
<style>
  .error {
    color: blue;
}
</style>
</head>
<body>

<p class="error">I am different</p>

</body>
</html>

HTML Links

HTML Links – Hyperlinks

HTML links are hyperlinks
link 를 클릭하면 다른 문서로 이동

HTML Links – 문법

<a> 태그 사용
href 에 이동할 주소 작성

<a href="url">link text</a>
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Local Links

서버나 폴더 내에서는 도메인 주소는 생략 가능
절대 경로 나 상대 경로에 주의

<a href="html_images.html">HTML Images</a>

HTML Link Colors

방문전 link 는 밑줄 과 파랑색
방문후 link 는 밑줄 과 보라색
클릭하는 순간 link 는 밑줄 과 빨강색
CSS 를 이용하면 마우스 오버로드 시에도 스타일을 줄 수 있음

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a> 

</body>
</html>

HTML Links – target 속성

링크된 문서 오픈 위치를 지정
_blank – 새창 이나 새탭 (new window or tab)
_self – 현재 창이나 탭 (default, 생략 가능)
_parent – 프레임셋에서 부모 프레임
_top – 프레임셋에서 최상위(top)
framename – 이름을 지정한 프레임

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links – Image

글자 대신 이미지를 클릭 시 페이지 이동

<a href="https://www.daum.net/">
  <img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png" alt="daum" style="border:0;">
</a>

HTML Links – Bookmark

같은 문서내 id=C4 위치로 이동

<a href="#C4">Jump to Chapter 4</a>

다른 문서로 id=C4 위치로 이동

<a href="html_demo.html#C4">Jump to Chapter 4</a>

HTML Images

HTML Images 문법

<img 태그 사용
src 속성에 로컬 또는 URL(web 주소)에 있는 이미지 작성
alt 속성은 이미지가 없을 때 보여지는 택스트
width 은 이미지 너비 크기 (픽셀 px 나 % 로 지정)
height 은 이미지 높이 크기 (픽셀 px 나 % 로 지정)
닫는 태그 없음

<img src="url" alt="some_text" style="width:width;height:height;">
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png" alt="daum" style="border:0;">

Background Image

style 속성의 background-image 사용

<body style="background-image:url('skies.jpg')">
<h2>Background Image</h2>
<p style="background-image:url('skies.jpg')">
</body>

HTML Tables

### HTML Table 태그 <table>
– <table> 태그로 정의
– ‘

행(row) 생성

 - '<td>

행의 열(cell, column) 생성
– ‘

‘ 테이블 열(cell) 자료중 제목

<table style="width:100%;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

HTML Table – 열 Columns 합치기 `colspan`

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML Table – 행 Rows 합치기 `rowspan`

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML Lists

순서가 없는 HTML List

<ul> 과 <li> 태그 사용

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

순서가 없는HTML List – List Item 모양

Value	모양
disc	채워진 원 (default)
circle	원 (circle)
square	채워진 사각 (square)
none	모양 없음

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

순서가 있는 HTML List

<ol> 과 <li> 태그 사용

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

순서가 있는 HTML List – `<ol>` 의 Type 속성

Type	설명
type=”1″	숫자 (default)
type=”A”	영문대문자
type=”a”	영문소문자
type=”I”	로마대문자
type=”i”	로마소문자

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

수평으로 보이는 리스트 (Horizontal Lists)

CSS를 이용하여 스타일을 주면 HTML lists을 다양한 방법으로 보여줄 수 있음

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

HTML Block 과 Inline 요소

Block-level 요소

항상 새로운 줄에서 시작되고 사용할 수 있는 전체 폭(full width)을 사용
<div>, <h1>~<h6>, <p>, <form>

Inline 요소

새로운 줄에서 시작되지 않고 단지 필요한 곳에서 바로 사용
<span>, <a>, <img>

`<div>` 요소

다른 HTML 요소의 컨테이너(container)로 많이 사용

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

`<span>` 요소

보통 텍스트의 특정 부분에 스타일을 주기 위해 사용

<h1>My <span style="color:red">Important</span> Heading</h1>

HTML class 속성

class 속성 사용

class는 요소에 class 값을 동일하게 설정 가능
동일한 class 이름을 가지고 있는 요소에 똑같은 스타일이나 제어를 가능하게 해줌
Block 요소, Inline 요소 모두 사용

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
} 
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

HTML Iframes

Web Page 안에 또 다른 Web Page 를 표시

Iframe 문법

<iframe src="URL"></iframe>

Iframe – Height 과 Width 설정

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

Iframe – Border 제거 또는 설정

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>

Iframe – Target 으로 Link 지정

<iframe src="http://wwww.daum.com" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

HTML File 경로(Paths)

절대 경로(Absolute File Paths)

전체 경로를 표시(Full URL)
동일 웹서버의 경우 도메인은 생략 가능
도메인/폴더 또는 가상디렉토리 또는 라우팅/페이지
도메인 다음 / 가 웹서버 루트(root) 또는 홈(home)을 나타냄
‘/’ 다음에는 루트 하위의 폴더 또는 가상디렉토리 또는 라우팅 주소가 나옴

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

상대 경로(Relative File Paths)

현재 페이지 기준으로 한 파일들의 경로
현재 페이지가 있는 폴더 하위 images 폴더

<img src="images/picture.jpg" alt="Mountain">

현재 페이지가 있는 폴더 상위 images 폴더

<img src="../images/picture.jpg" alt="Mountain">

HTML Head

The HTML `<head>` 요소

HTML 문서의 metadata 정의
metadata : <title>, <style>, <meta>, <link>, <script>, `

HTML `<title>` 요소

웹브라우저의 탭에 표시 됨
즐겨찾기(favorites) 시 추가 되는 제목
검색엔진 결과 표시시에 표시됨

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML `<meta>` 요소

문서의 character set , page description, keywords, author 등등 정의
metadata 는 브라우저가 내용표시 방법, 검색엔진이 keywords 등을 사용하므로 작성 하는 것이 좋음

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

HTML Entities

HTML 에서 사용하는 예약된 특수한 문자들
&entity_name;' 또는&#entity_number`
< 는 < 또는 <

유용한 HTML Character Entities

Result	Description	Entity Name	Entity Number
	공백	` `
<	less than	`<`	<
>	greater than	`>`	>
&	ampersand	`&`	&
“	double quotation mark	`"`	"
‘	single quotation mark (apostrophe)	`'`	'
¢	cent	`¢`	¢
£	pound	`£`	£
¥	yen	`¥`	¥
€	euro	`€`	€
©	copyright	`©`	©
®	registered trademark	`®`	®

HTML Encoding (Character Sets)

HTML 페이지를 올바르게 표시하기 위해 웹브라우저는 character set(character encoding ) 을 알고 있어야 한다.

Character Encoding (character set) 종류

ASCII

Character Encoding 표준
128개의 다른 알파벳(a-z,A-Z), 숫자(0-9), 특수문자(!,$,+,-, (,),@,<,>,.)로 구성

ANSI (Windows-1252)

Windows character set
256개의 다른 문자코드로 구성

ISO-8859-1

HTML4 의 디폴트 character set
256개의 다른 문자코드로 구성
HTML 4는 UTF-8 도 지원

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

UTF-8 (Unicode)

세계의 거의 모든 언어 지원
HTML5의 디폴트 character set

<meta charset="UTF-8">

HTML Uniform Resource Locators

URL은 web address 의 또 다른 말이다.
URL은 도메인(thecoding.kr)이나 IP(Internet Protocal) adress(223.26.138.6)으로 구성된다.
IP 확인은 cmd 에서 ping thecoding 해보면 된다.

URL – Uniform Resource Locator

웹브라우저는 URL로 웹서버에 페이지를 요청

scheme://prefix.domain:port/path/filename

설명:

scheme – Internet service 프로토콜 정의(http, https, ftp)
prefix – 도메인 접두어 (http 는 www 가 디포트)
domain – 인터넷 도메인이름(thecoding.kr)
port – 서버랑 통신할 port number (http 는 80 디폴트)
path – 서버 root 밑의 디렉토리 경로 (사이트의 root directory는 생략 가능)
filename – 문서 또는 자원의 이름

Common URL Schemes

Scheme	Short for	Used for
http	HyperText Transfer Protocol	암호와되지 않은 web pages
https	Secure HyperText Transfer Protocol	암호화된 web pages
ftp	File Transfer Protocol	파일 업로드 및 다운로드
file		로컬 컴퓨터이 파일 위치(EditPlus에서 Ctrl+b 로 확인 )

HTML Forms

`<form>` Element

HTML form 의 다른 요소를 들을 포함하는 컨테이너 역할

<form>
.
form elements
.
</form>

Action Attribute

<form action="/action_page.php"> 는 데이터를 처리할 server-side script 페이지
server-side 종류 : PHP, ASP(.NET),JSP 등등

Method Attribute

GET 방식

submit 버튼등으로 전송시 디폴트 전송 방식
/action_page.php?name1=value&name2=value 처럼 화면에 보여짐
보여지만 안되는 중요한 정보 말고 간단한 정보만 보내야 함
보낼 수 있는 사이즈도 정해져 있음

LINK:
<a href="/action_page.php?page=1&no=5">5번글 읽기</a>

FORM:
<form action="/action_page.php" method="get">

POST 방식

전송시 화면에 보여지지 않기 때문에 보여지면 안되는 정보를 전송 할때 사용
전송할 수 있는 사이즈의 제한이 없음

<form action="/action_page.php" method="post">

Form Data 를 그룹핑 – `<fieldset>`

<fieldset> element 은 관련이 있는 데이터를 그룹핑
<legend> element 은 <fieldset> 의 설명 (caption)

<form action="/action_page.php" method="post">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

`<input>` Element

가장 중요한 form 요소
type 속성 값에 따라 보여지는 모습과 데이터 동작이 달라짐
name 속성 값으로 전송되어야 각 <input> 을 구분
value 속성 값을 넣으면 디폴트 값으로 보여짐
readonly 속성은 읽기 모드로 만듬
size 속성으로 크기 지정
maxlength 속성으로 입력 글자수 지정

<form>
  First name:<br>
  <input type="text" name="firstname" size="40" maxlength="10">
  Last name:<br>
  <input type="text" name="lastname" value="KIM" readonly><br>
  User password:<br>
  <input type="password" name="psw"><br>

  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br>

  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car<br>

  <br>
  <input type="button" onclick="alert('Hello World!')" value="Click Me!">
  <input type="submit" value="Submit">
  <input type="reset" value="초기화">
</form>

type 속성의 Text

<input type="text">
텍스트 데이터를 입력 받기 위해 사용

type 속성의 Password

<input type="password">
입력 데이터가 보이지 않도록 * 로 보여지게 함

type 속성의 Radio

<input type="radio">
ame 속성 값이 같은 데이터 중 하나만 선택 할 수 있는 요소

type 속성의 Checkbox

<input type="checkbox">
name 속성 값이 같은 데이터 복수 선택 할 수 있는 요소

type 속성의 Button

<input type="button">
클릭할 수있는 버튼 정의

type 속성의 Submit

<input type="submit">
form의 데이터를 action의 페이지로 전송하는 버튼

type 속성의 Reset

<input type="reset">
form의 입력한 데이터 초기화

`<select>` Element

drop-down list
선택하는 요소는 <option> 요소에 value 및 보여지는 값 설정
selected 값으로 미리 선택 되어지게 할 수 있음

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi" selected>Audi</option>
</select>

`<textarea>` Element

여러줄의 데이터를 처리하기 위한 요소
rows 와 cols 로 크기 조정

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

`<button>` Element

클릭할 수있는 버튼 정의

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Result	Description	Entity Name	Entity Number
	공백	` `
<	less than	`<`	<
>	greater than	`>`	>
&	ampersand	`&`	&
“	double quotation mark	`"`	"
‘	single quotation mark (apostrophe)	`'`	'
¢	cent	`¢`	¢
£	pound	`£`	£
¥	yen	`¥`	¥
€	euro	`€`	€
©	copyright	`©`	©
®	registered trademark	`®`	®

Result	Description	Entity Name	Entity Number
	공백	` `
<	less than	`<`	<
>	greater than	`>`	>
&	ampersand	`&`	&
“	double quotation mark	`"`	"
‘	single quotation mark (apostrophe)	`'`	'
¢	cent	`¢`	¢
£	pound	`£`	£
¥	yen	`¥`	¥
€	euro	`€`	€
©	copyright	`©`	©
®	registered trademark	`®`	®