16. Fonts
- HTML에서 <font> 태그 이용을 반대한다. 장래 HTML 버전에선 <font> 태그가 제거되기 때문이다.
- 상당수의 사람들이 <font> 태그를 이용한다. 우리는 <font> 태그 사용을 피해야 한다. 대신, CSS를 사용해야 한다.
16.1 <font> 태그
- 다음 HTML 코드와 같이 사이즈와 브라우저 출력 타입을 지정할 수 있다.
16.2 폰트 속성
16.3 <font>태그는 사용하지 말아야 한다.
- <font> 태그는 HTML 최신 버전(HTML 4 and XHTML)에서 제거되었다.
- W3C(World Wide Web Consortium)는 recommendations에서 <font> 태그를 제거했다. HTML의 미래 버전에서는, 레이아웃과 HTML 요소의 속성을 나타내기 위해 스타일 시트(CSS)를 사용하게 될 것이다.
15. HTML Layout
- 웹 어디에서나 HTML 열들을 이용한, 일간지 처럼 정형화된 웹 페이지를 찾을 수 있다.
15.1 HTML 레이아웃 - 테이블을 사용하여
- HTML의 공통적인 관행중 하나는 HTML 페이지의 레이아웃 정형화를 HTML 테이블을 이용한다는 것이다. - 이번 페이지는 일간지와 같은, 두 개의 열을 이용하여 정형화 한다. - 이 페이지가 보인다면, 왼쪽 열과 오른쪽 열로 구성되어 있다는 것을 알 수 있을 것이다. - 이 텍스트는 왼쪽 열이다. | - HTML <table>은 이 웹 페이지를 두개의 열 부분으로 나눠 사용한다. - 트릭은 테이블의 borders 이용하는 것이고, 약간의 여분의 cellpadding을 이용했다. - 어떻게 이 페이지에 텍스트가 추가 되었는가에 상관없이, 열 borders 내부에 텍스트가 남을 것이다. |
- HTML의 공통적인 관행중 하나는 HTML 페이지의 레이아웃 정형화를 HTML 테이블을 이용한다는 것이다. - 이번 페이지는 일간지와 같은, 두 개의 열을 이용하여 정형화 한다. - 이 페이지가 보인다면, 왼쪽 열과 오른쪽 열로 구성되어 있다는 것을 알 수 있을 것이다. | - HTML <table>은 이 웹 페이지를 두개의 열 부분으로 나눠 사용한다. - 트릭은 테이블의 borders 이용하는 것이고, 약간의 여분의 cellpadding을 이용했다. - 어떻게 이 페이지에 텍스트가 추가 되었는가에 상관없이, 열 borders 내부에 텍스트가 남을 것이다. - 이 텍스트는 오른쪽 열이다. |
캐나다 밴쿠버 vs 한국 서울 시각표
| 캐나다 밴쿠버 | 한국 서울 |
|---|---|
| AM 01:00 | PM 05:00 |
| AM 02:00 | PM 06:00 |
| AM 03:00 | PM 07:00 |
| AM 04:00 | PM 08:00 |
| AM 05:00 | PM 09:00 |
| AM 06:00 | PM 10:00 |
| AM 07:00 | PM 11:00 |
| AM 08:00 | AM 12:00 |
| AM 09:00 | AM 01:00 |
| AM 10:00 | AM 02:00 |
| AM 11:00 | AM 03:00 |
| PM 12:00 | AM 04:00 |
| PM 01:00 | AM 05:00 |
| PM 02:00 | AM 06:00 |
| PM 03:00 | AM 07:00 |
| PM 04:00 | AM 08:00 |
| PM 05:00 | AM 09:00 |
| PM 06:00 | AM 10:00 |
| PM 07:00 | AM 11:00 |
| PM 08:00 | PM 12:00 |
| PM 09:00 | PM 01:00 |
| PM 10:00 | PM 02:00 |
| PM 11:00 | PM 03:00 |
| AM 12:00 | PM 04:00 |
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
[참조 : Source : http://www.w3schools.com/html/html_quick.asp]
14. HTML Color Values
- 색은 RED, GREEN, 그리고 BLUE 빛 소스의 조합으로 표현된다.
14.1 Color Values
- HTML 컬러는 Red, Green, 그리고 Blue 컬러 값의 조합에 대한 16진수표기법(RGB)으로 정의된다.
- 하나의 빛 소스로 가장 작은 값은 0 (hex #00) 그리고, 가장 큰 값은 255(hex #FF)이다.
14.2 Turn Off the Red
- 만약 Red 빛을 완벽하게 제거한다면, 65536 가지의 Green 과 Blue (256 * 256) 의 조합이 된다.
- Green and Blue 조합
13. HTML Colors
- 색은 RED, GREEN, 그리고 BLUE 빛 소스의 조합으로 표현된다.
13.1 Color Values
- HTML 컬러는 Red, Green, 그리고 Blue 컬러 값의 조합에 대한 16진수표기법으로 정의된다.
- 하나의 빛 소스로 가장 작은 값은 0 (hex #00) 그리고, 가장 큰 값은 255(hex #FF)이다.
- 아래 테이블은 Red, Green, 그리고 Blue 빛 소스 조합의 결과를 보여준다.
13.2 W3C Standard Color Names
- W3C는 HTML 밸리데이터가 허가한 16가지 컬러 이름 리스트를 정했다.
- 그 컬러 이름은 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, 그리고 yellow 이다.
13.3 Cross-browser Color Names
- 거의 150 가지의 컬러 이름을 모든 주요한 브라우저에서 지원된다.
- 아래 테이블은 모든 주요한 브라우저에서 지원되는 컬러 이름 리스트이다.
13.3 Cross-browser Color Values
- 몇 년 전, 대부분의 컴퓨터들은 단지, 256가지의 다른 컬러를 지원했다. 216가지의 웹 세이퍼 컬러 리스트는 웹표준으로 제안했었다. 그 이유는 마이크로 소프트사와 맥 운영체제는 40가지 다른 "예약된" 고정 시스템 컬러 (about 20 each). 때문이였다.
- 오늘날 대부분 컴퓨터는 백만가지 이상의 컬러를 지원하기 때문에, 이제 이러한 것들은 중요하지않다. 하지만, 선택은 자신에게 달렸다.
12. HTML 배경
- 괜찮은 배경은 웹 페이지를 정말 돋보이게 만든다.
12.1 Backgrounds
- 태그는 배경을 지정할 수 있는 두가지 속성을 가진다. 그 배경은 색 또는 이미지가 될 수 있다.
12.2 Bgcolor
- bgcolor 속성은 HTML 페이지를 위한 배경색을 지정한다. 이 속성 값은 16진수 값, RGB 값, 혹은, 색 이름이 될 수 있다.
- 위 라인 모든 배경 색은 검정이다.
12.3 Background
- 배경 속성은 HTML 페이지를 위한 배경-이미지를 지정한다. 이 속성 값은 나타내길 바라는 이미지의 URL이다. 만약 이미지가 브라우저 창보다 작다면, 브라우저 창 전체를 자신의 이미지를 반복해서 채운다.
- URL은 상대적(위 라인의 첫 번째)이거나, 절대적(위 라인의 두 번째)일 수 있다.
* Note : 이미지 배경을 사용하길 바란다면 아래 사항을 알아둬야 한다:
- 배경 이미지 로딩 시간이 얼마나 걸리나?
- 배경 이미지가 웹 페이지상의 이미지와 조화로운가?
- 배경 이미지가 웹 페이지상의 글자 색과 조화로운가?
- 배경 이미지가 웹 페이지상에서 자신을 반복해서 채웠을 때 예쁘게 보이는가?
- 배경 이미지가 텍스트 초점을 흐릿하게 하는가?
12.4 Useful Tips
- 태그 내에서, bgcolor, background, 그리고 텍스트 속성은 HTML 최근 버전(HTML 4 and XHTML)에선 반대한다. World Wide Web Consortium(W3C)에서 그것의 추천에서 이러한 속성을 제거했다.
- 대신에, 스타일 시트(CSS)를 사용해야 한다.(레이아웃과 HTML 요소의 디스플레이 속성)
11. HTML 이미지
- HTML은 문서 속에서 이미지를 나타낼 수 있다.
11.1 이미지 태그와 Src 속성
- HTML에서, 이미지는 <img> 태그로 정의되어진다.
- <img> 태그는 단지 속성만 포함한다는 것을 의미하고, 닫기 태그가 없는 엠티 태그이다.
- 페이지상에 이미지를 나타낼 땐, src 속성을 이용한다. src는 "source"의 약자이다. src 속성의 값은 페이지상에 나타내길 바라는 이미지의 URL이다.
- 이미지 사용법은 :
- URL은 이미지가 저장된 위치를 가리킨다. "http://linuxerhan.blogspot.com/" 상의 "images" 디렉토리내에 "boat.gif" 이름의 이미지 URL은 : http://linuxerhan.blogspot.com/images/boat.gif 이다.
- 브라우저는 문서내에서 이미지 태그를 발생시키는 곳에 놓는다. 만약, twho paragraphs 사이에 이미지를 두길 바란다면, 브라우저는 첫번째 paragraph를 보여주고, 이미지를, 그리고, 두번째 paragraph를 이어서 보여줄 것이다.
11.2 Alt 속성
- alt 속성은 이미지에서 "alternate text"를 말한다. alt 속성 값은 다음과 처음 정의된다:
- "alt" 속성은 그 페이지를 방문한 독자의 브라우저가 이미지를 로드하지 못했을 때 말해준다. 그 브라우저는 이미지 대신에 alternate text를 보여주게 된다. 페이지상의 각각의 이미지에 "alt"속성을 포함하는 것은 매우 좋은 습관이고, 텍스트 브라우저를 사용하는 사람들을 위해서도 유용한 것이다.
11.3 Useful Tips
- 만약 11개의 파일에 10개씩의 이미지가 포함된 HTML 파일은 정상적으로 나타난다.
- 이미지를 로딩하는데 시간이 걸리고, 그래서 이미지를 사용할 때는 주의깊게 사용해야 한다.
11.4 Image Tags
10. HTML 폼과 입력
- HTML 폼은 다수의 다른 사용자 입력을 선택되어 사용된다.
10.1 Forms
- 폼은 폼 요소를 포함하는 영역이다.
- 폼 요소들은 폼 안에서, 정보 입력을 바라는 사용자를 허락하는 요소이다. (텍스트 필드, 텍스트 에어리어 필드, 드롭-다운 메뉴, 라디오 버튼, 체크박스, 등)
- 폼은 태그로 정의된다.
9. HTML 리스트
- HTML은 ordered, unordered 그리고, definition lists를 지원한다.
9.1 Unordered Lists
- unordered list는 항목들의 리스트이다. 리스트 항목들은 불릿들로 이뤄진다.(일반적으로 작은 검은색 원)
- unordered list는 <ul> 태그로 시작된다. 각각의 리스트 항목은 <li> 태그로 시작된다.
