HTML #1
HTML: HyperText Markup Language
<img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)
HTML 버전
| 버전 |
년도 |
DOCTYPE 및 설명 |
| HTML 1.0 | 1991 | 팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML |
| HTML 2.0 | 1995 | 국제 표준으로 제정된 최초의 HTML |
| HTML 3.2 | 1997 | W3C에 의해 제정된 최초의 HTML |
| HTML 4.01 | 1999 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| XHTML 1.0 | 2000 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| HTML 5 | 2014 | <!DOCTYPE html> |
W3C: World Wide Web Consortium
W3C는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관
W3C가 관리하는 대표적인 웹 표준
1. HTML
2. CSS
3. DOM
4. SVG
5. XHTML
6. XML
<head> : HTML 문서의 메타데이터(metadata)를 정의.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있습니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.
- 웹 브라우저의 툴바(toolbar)에 표시됩니다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.
- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
<h1> ~ <h6> : 제목(heading)을 나타냅니다.
<p> : 단락(paragraph)을 나타냅니다.
HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공합니다.
또한, HTML 요소는 시작 태그로 시작해서 종료 태그로 끝납니다.
속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값(value)으로 표현됩니다.
속성 이름은 언제나 소문자로 작성하자!
HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있습니다.
하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있습니다.
또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 합니다.
속성값은 언제나 따옴표로 감싸자!
HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습니다.
하지만 속성값을 따옴표로 감싸지 않으면, 다음과 같은 예상치 못한 오류가 발생할 수 있습니다.
띄어쓰기가 들어가게 되면, 반드시 따옴표를 사용해야 정확한 값을 저장할 수 있습니다.
속성값을 감쌀 때는 보통 큰따옴표("")가 사용되며, 작은따옴표('')도 사용할 수 있습니다.
<img>태그의 alt 속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열을 설정할 수 있습니다.
2.HTML 텍스트 요소
2.1제목
<h1>~<h6>
여러 검색엔진은 각 웹 사이트의 내용을 바로 이 <h>태그를 이용하여 키워드를 수집하고, 그 내용을 파악
따라서 HTML 문서에 포함되는 제목은 <h>태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있음
2.2단락
단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 부름
띄어쓰기와 줄 나누기
HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못함. 웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문
<br>태그(break line)를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있습니다.
이러한 <br>태그는 종료 태그가 없는 빈 태그(empty tag)
텍스트(text) 서식 미리 정의하기
HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용해야 합니다.
<pre>태그(preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현
수평 가로 구분선 <hr>
2.3서식
강조 <b> <strong>
이탤릭체 <i> <em> 검색엔진은 <strong>태그나 <em>태그를 사용하여 강조된 텍스트를 더 중요하게 인식
하이라이팅 <mark>
삭제 <del>
삽입 <ins>
위첨자는 <sup>
아래첨자는 <sub>
<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>
<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>
2.4 인용구
짧은 인용구 <q>
블록 인용구 <blockquote> 인용 부분을 별도의 단락으로 구분하여 나타냄
축약형 <abbr> 태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타남
주소 <address> 이러한 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입
2.5 주석
<!-- 주석내용 -->
<!--
위와 같이 어려운 코드의 이해를 돕기 위해서 개발자가 적어놓은 설명입니다.
-->
2.6 엔티티(Entity)
HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석
HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)
&엔티티이름; &#엔티티숫자;
엔티티문자 엔티티이름 16진수 엔티티 숫자 설명
| |   | 줄 바꿈 없는 공백 | |
| < | < | < | 보다 작은 |
| > | > | > | 보다 큰 |
| & | & | & | AND 기호 |
| " | " | " | 큰따옴표 |
| ' | ' | ' | 작은따옴표 |
발음 구별 부호 문자 16진수 엔티티 결과
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
심볼특수문자 엔티티 이름 16진수 엔티티 설명
| ¢ | ¢ | ¢ | 센트 |
| £ | £ | £ | 파운드화 |
| ¥ | ¥ | ¥ | 엔화 |
| € | € | € | 유로화 |
| © | © | © | 저작권 |
| ® | ® | ® | 등록상표 |
| × | × | × | 곱셈 |
| ÷ | ÷ | ÷ | 나눗셈 |
2.7 문자셋(Character set)
HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의 <meta>태그에 명시
HTML4에서 UTF-8의 경우 : <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5에서 UTF-8의 경우 : <meta charset="UTF-8">
현재 사용되는 대표적인 문자셋(character set)
1. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.
2. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.
3. ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.
4. UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋입니다.
3.HTML 기본요소
3.1 스타일(Style)
HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있습니다.
하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있습니다.
<태그이름 style="속성이름:속성값">
배경색 변경
<h1 style="background-color:white">
style 속성을 이용한 배경색 변경
</h1>
글자색 변경
<h1 style="color:maroon">
style 속성을 이용한 글자색 변경
</h1>
글자 크기 변경
<h1 style="font-size:250%">
style 속성을 이용한 글자 크기 변경
</h1>
문단 정렬 변경
<h1 style="text-align:center">
style 속성을 이용한 문단 정렬 변경
</h1>
여러 스타일의 설정
<h1 style="background-color:white; color:maroon; font-size:150%; text-align:center">
style 속성을 이용하여 한 번에 스타일링 하기!
</h1>
style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분
CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략할 수 있음
3.2 색
3.3 배경
3.4 링크
<a>
<a href="링크주소">HTML 링크</a>
<a href="/html/intro">
<h2>이 링크를 클릭해 보세요!</h2>
</a>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Links</title>
</head>
target 속성
<a>태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시
target 속성값 설명
| _blank | 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. |
| _self | 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) |
| _parent | 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. |
| _top | 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈. |
| 프레임(frame) 이름 | 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈. |
<body>
<h1>a태그의 target 속성값</h1>
<h2><a href="/html/intro" target="_blank">blank</a></h2>
<h2><a href="/html/intro" target="_self">self</a></h2>
<h2><a href="/html/intro" target="_parent">parent</a></h2>
<h2><a href="/html/intro" target="_top">top</a></h2>
<h2><a href="/html/intro" target="myframe">myframe</a></h2>
<iframe name="myframe" style="width:50%; height: 330px"></iframe>
</body>
</html>
링크의 상태(state)
링크의 상태 설명
| ink | 아직 한 번도 방문한 적이 없는 상태 (기본설정) |
| visited | 한 번이라도 방문한 적이 있는 상태 |
| hover | 링크 위에 마우스를 올려놓은 상태 |
| active | 링크를 마우스로 누르고 있는 상태 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Links</title>
<style>
a:link { color: teal; }
a:visited { color: maroon; text-decoration: none }
a:hover { color: yellow; text-decoration: none }
a:active { color: red; text-decoration: none }
</style>
</head>
<body>
<h1>링크의 상태</h1>
<h2><a href="/html/intro">링크의 상태에 따라 스타일을 다르게 설정합니다!</a></h2>
</body>
</html>
페이지 책갈피
<a>태그의 name 속성을 이용하면 간단한 책갈피를 만들 수 있습니다.
우선 책갈피를 통해 가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성
그다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Links</title>
</head>
<body>
<h1>페이지 책갈피</h1>
<a href="#bookmark"><p>제목 15로 갑시다!!!</p></a>
<h2>제목 1</h2>
<p>첫 번째 단락</p>
<h2>제목 2</h2>
<p>두 번째 단락</p>
<h2>제목 3</h2>
<p>세 번째 단락</p>
<h2>제목 4</h2>
<p>네 번째 단락</p>
<h2>제목 5</h2>
<p>다섯 번째 단락</p>
<h2>제목 6</h2>
<p>여섯 번째 단락</p>
<h2>제목 7</h2>
<p>일곱 번째 단락</p>
<h2>제목 8</h2>
<p>여덟 번째 단락</p>
<h2>제목 9</h2>
<p>아홉 번째 단락</p>
<h2>제목 10</h2>
<p>열 번째 단락</p>
<h2>제목 11</h2>
<p>열한 번째 단락</p>
<h2>제목 12</h2>
<p>열두 번째 단락</p>
<h2>제목 13</h2>
<p>열세 번째 단락</p>
<h2>제목 14</h2>
<p>열네 번째 단락</p>
<h2><a name="bookmark"></a>제목 15</h2>
<p>열다섯 번째 단락</p>
<h2>제목 16</h2>
<p>열여섯 번째 단락</p>
<h2>제목 17</h2>
<p>열일곱 번째 단락</p>
<h2>제목 18</h2>
<p>열여덟 번째 단락</p>
<h2>제목 19</h2>
<p>열아홉 번째 단락</p>
<h2>제목 20</h2>
<p>스무 번째 단락</p>
<h2>제목 21</h2>
<p>스물한 번째 단락</p>
<h2>제목 22</h2>
<p>스물두 번째 단락</p>
<h2>제목 23</h2>
<p>스물세 번째 단락</p>
<h2>제목 24</h2>
<p>스물네 번째 단락</p>
<h2>제목 25</h2>
<p>스물다섯 번째 단락</p>
</body>
</html>
3.5 이미지
<img>태그
<img>태그는 종료 태그가 없는 빈 태그(empty tag)
<img src="이미지주소" alt="대체문자열">
style 속성을 사용하여 이미지의 크기를 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Images</title>
<style>
img {
width:100%;
border: solid 1px black;
}
</style>
</head>
<body>
<h1>이미지의 크기 설정</h1>
<img src="/examples/images/img_flag.png" alt="html size" width="320" height="214">
<img src="/examples/images/img_flag.png" alt="style size" style="width:320px; height:214px">
</body>
</html>
이미지의 테두리(border) 설정
<img src="/examples/images/img_flag.png" alt="이미지 테두리"
style="width:320px; height:214px; border: 3px solid black">
이미지에 링크(link) 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TCPSchool HTML Images</title>
</head>
<body>
<h1>이미지에 링크 설정</h1>
<a href="/html/intro">
<img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214px; border: 1px solid black">
</a>
<p>이미지를 클릭해 보세요!</p>
</body>
</html>
이미지 맵
<map>태그를 이용하여 이미지 맵(image map)을 제작
<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정
<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Images</title>
</head>
<body>
<h1>이미지 맵 만들기</h1>
<img src="/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending" style="width:320px; height:240px" />
<map name="vending">
<area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
<area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
</map>
<p>표지판을 눌러보세요!</p>
</body>
</html>
3.5 리스트
HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공
1. 순서가 없는 리스트(unordered list) <ul>
2. 순서가 있는 리스트(ordered list) <ol>
3. 정의 리스트(definition list) <dl>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Lists</title>
</head>
<body>
<h1>순서가 없는 리스트</h1>
<p>검정색 작은 원 모양 (기본설정)</p>
<ul>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ul>
<p>흰색 작은 원 모양</p>
<ul style="list-style-type: circle">
<li>수박</li>
<li>참외</li>
<li>옥수수</li>
</ul>
<p>검정색 사각형 모양</p>
<ul style="list-style-type: square">
<li>감자</li>
<li>상추</li>
<li>고구마</li>
</ul>
</body>
</html>
ul
- disc : 검정색 작은 원 모양 (기본설정)
- circle : 흰색 작은 원 모양
- square : 사각형 모양
ol
- decimal : 숫자 (기본설정)
- upper-alpha : 영문 대문자
- lower-alpha : 영문 소문자
- upper-roman : 로마 숫자 대문자
- lower-roman : 로마 숫자 소문자
3.6 테이블
표 <table>
<table> 은
1. <tr>태그는 테이블에서 열을 구분해 줍니다.
2. <th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.
3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.
로 구성
4 HTML 공간 분할
4.1 블록과 인라인
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가짐
대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됨
1. 블록(block)
2. 인라인(inline)
display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
<div>요소
<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소
<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Block Inline</title>
</head>
<body>
<div style="background-color:lightgrey; color:green; text-align:center">
<h1>div요소를 이용한 스타일 적용</h1>
<p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
</body>
</html>
display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않음
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
<span>
<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소
<span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Block Inline</title>
</head>
<body>
<h1>span요소를 이용한 스타일 적용</h1>
<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>
</body>
</html>
4.2 iframe 요소
iframe: inline frame
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입
<iframe src="삽입할페이지주소"></iframe>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Iframes</title>
</head>
<body>
<h1>iframe 요소의 페이지 변경하기</h1>
<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px"></iframe>
<p><a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a></p>
<p>위의 링크를 클릭하면 iframe 요소의 페이지가 다른 페이지로 변경돼요!</p>
</body>
</html>
프레임셋(frameset)
프레임셋(frameset)을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시
iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있음
또한, noresize 속성을 명시하지 않으면, 사용자가 마음대로 페이지의 크기를 조절할 수 있음
프레임셋에서 각각의 페이지는 frame 요소로 표현
frame 요소는 iframe 요소와는 달리 종료 태그를 가지지 않음
noframes 요소는 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장
frameset, frame, noframes 요소는 더는 HTML5 표준 권고안에서 지원하지 않습니다.
따라서 하나의 브라우저 창에 여러 페이지를 표현하고 싶을 때는 iframe 요소를 사용하거나 CSS를 이용하여 표현해야 합니다.
수직 프레임셋
<frameset cols="25%,*,25%">
수평 프레임셋
<frameset rows="20%,60%,20%">
4.3 HTML 레이아웃
레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미
HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있음
1. div 요소를 이용한 레이아웃
2. HTML5 레이아웃
3. table 요소를 이용한 레이아웃
5. HTML 입력방식
5.1 Form 요소
웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있음
<form action="처리할페이지주소" method="get|post"></form>
action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시
이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)
method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시(GET, POST)
Input 요소
1. 텍스트 입력(text)
2. 비밀번호 입력(password)
3. 라디오 버튼(radio)
4. 체크박스(checkbox)
5. 파일 선택(file)
6. 선택 입력(select)
7. 문장 입력(textarea)
8. 버튼 입력(button)
9. 전송 버튼(submit)
10. 필드셋(fieldset)
비밀번호 입력 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Forms</title>
</head>
<body>
<h1>비밀번호 입력</h1>
<form>
사용자 : <br>
<input type="text" name="username"><br>
비밀번호 : <br>
<input type="password" name="password">
</form>
</body>
</html>
5.2 Input 요소의 속성
value
readonly
disabled
maxlength
size
http://tcpschool.com/css/css_intro_basic
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
