이 섹션의 다중 페이지 출력 화면임. 여기를 클릭하여 프린트.

이 페이지의 일반 화면으로 돌아가기.

Web 프로그래밍 언어

1 - HTML

HTML 입문

HTML(Hypertext Markup Language)

1.1 - HTML 입문 | HTML 시작

1.1.1 - HTML 입문 | HTML 시작 | HTML 개요

HTML이란?

HTML은 HyperText Markup Language의 약자이다.
월드 와이드 웹(World Wide Web)에서 볼수 있는 하이퍼텍스트 문서로 만들기 위한 언어이다.
웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다.
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용된다.

HTML 작성

HTML 문서는 윈도우의 메모장, 리눅스의 vi와 같은 기본 에디터로도 작성할 수 있다..
HTML 문서의 작성을 한 후에 확장자를 .html 혹은 .htm으로 저장하면 웹 브라우저에서 바로 확인할 수 있다.

HTML 버전

버전 년도 설명
HTML 1991 팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML
HTML 2.0 1995 국제 표준으로 제정된 최초의 HTML
HTML 3.2 1997 W3C에 의해 제정된 최초의 HTML
HTML 4.01 2018 비주얼 태그가 모두 비권장으로 지정된 것이 가장 큰 변화
XHTML 1.0 2000 XML 1.0을 이용하여 HTML 4.01을 새로 만든 독립된 언어인 XHTML
HTML5 2014 HTML의 최신 버전

W3C

W3C는 World Wide Web Consortium의 약자이다.
W3C는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관이다.

https://www.w3.org/

이러한 W3C가 관리하는 대표적인 웹 표준은 다음과 같다.

  • HTML
  • CSS
  • DOM
  • SVG
  • XHTML
  • XML

참조

https://namu.wiki/w/HTML

1.1.2 - HTML 입문 | HTML 시작 | HTML 기본 구조

HTML 기본 구조

다음은 HTML 문서의 기본적인 구조를 보여주는 그림이다.

HTML 기본구조

<!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.)

<html> : HTML 문서의 루트(root) 요소를 정의한다.

<head> : HTML 문서의 메타데이터(metadata)를 정의한다.

  • 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
  • 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있다.

<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다.

  • 웹 브라우저의 툴바(toolbar)에 표시된다.
  • 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
  • 검색 엔진의 결과 페이지에 제목으로 표시된다.

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분이다.

<h1>~<h6> : 제목(heading)을 나타낸다.

<p> : 단락(paragraph)을 나타낸다.

<! DOCTYPE> 종류

HTML 5

HTML 5 버전이다.

 <!DOCTYPE html>

HTML 4.01 Strict

이 DTD는 모든 HTML 요소와 속성을 포함하고 있지만, 표상적인 또는 사용되지 않는 요소가 포함되어 있지 않는다. (글꼴 등) 프레임 셋은 허용되지 않는다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional (권장)

이 DTD는 표상적인 및 사용되지 않는 요소를 포함하여 모든 HTML 요소와 속성이 포함되어 있다. (글꼴 등) 프레임 셋은 허용되지 않는다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

이 DTD는 HTML 4.01 Transitional 동등하지만, 프레임 콘텐츠의 사용을 허용한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

이 DTD는 모든 HTML 요소와 속성을 포함하고 있지만, 표상적인 또는 사용되지 않는 요소가 포함되어 있지 않는다.(글꼴 등) 프레임 셋은 허용되지 않는다. 태그는 또한 제대로 구성된 XML을 작성해야 한다.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional (권장)

이 DTD는 표상적인 및 사용되지 않는 요소를 포함하여 모든 HTML 요소와 속성이 포함되어 있다. (글꼴 등) 프레임 셋은 허용되지 않는다. 태그는 또한 제대로 구성된 XML을 작성해야 한다.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

이 DTD는 XHTML 1.0 Transitional과 동일하지만, 프레임 콘텐츠의 사용을 허용한다.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

이 DTD는 XHTML 1.0 Strict과 동일하지만, 모듈을 추가 할 수 있다. (예를 들어 동아시아 언어에 대한 루비의 지원을 제공하기 위해)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

1.1.3 - HTML 입문 | HTML 시작 | HTML 요소 구조

HTML 요소 구조

HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보이다.
또한, HTML 요소는 시작 태그로 시작해서 종료 태그로 끝난다.

한글

HTML Element

영문

HTML Element

문법

<태그명 속성명="속성값">내용</태크명>

요소(Element)

HTML에서 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미한다.

태그(Tag)

요소(Elements)의 일부로 시작 태그와 종료 태그 두 종류가 있다.
시작 태그는 요소를 시작하며, 종료태그는 요소를 끝내는 기능을 가지고 있다. 일부 태그 중에는 종료 태그가 없는 것도 있다.

요소와 태그의 개념이 뚜렷이 구별되지 않고 혼용되는 경우가 많은데 HTML에서는 굳이 요소라는 말을 쓰지 않아도 되지만 CSS나 Javascript에서는 요소라는 말이 아주 중요한 용어가 된다.

속성(Attribute)

요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화된 명령어 체계를 의미한다.
속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값(value)으로 표현된다.

속성명은 언제나 소문자로 작성하자!

HTML5 표준에서는 속성명에 대소문자를 구분하지 않고 있다.
하지만 W3C에서는 속성명을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있다.
또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 한다.

속성값은 언제나 따옴표로 감싸자!

HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않는다. 하지만 속성값을 따옴표로 감싸지 않으면, 다음과 같은 예상치 못한 오류가 발생할 수 있다.

예제

<img src="noimage.jpg" alt="이미지가 없습니다">
<img src="noimage.jpg" alt=이미지가 없습니다>

코드 실행

위의 예제와 같이 속성값에 띄어쓰기가 들어가게 되면, 앞에 띄어쓰기 전까지만 인식을 하게 되어 속성값이 제대로 적용이 되지 않는 경우도 있다. 그래서 반드시 따옴표를 사용해야 정확한 값을 저장될 수 있기 해야 한다.

속성값을 감쌀 때는 보통 큰 따옴표(")가 사용되며, 작은 따옴표(’)도 사용할 수 있다.

<img>태그의 alt 속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열을 설정할 수 있다.

1.1.4 - HTML 입문 | HTML 시작 | HTML Self-Closing Tags

Self-Closing 은 원래 XHTML 에서 사용하는 문법이며, 엘리먼트를 꼭 slash를 이용하여 자체 닫기(self-closing) 해야 한다.

일부 태그에는 닫기 태그가 필요하지 않다. 예를 들어 img 태그는 다음과 같다.

<img src="my_image.jpg" alt="My image" width="100" height="100" />

여기서 </img>가 없다.

HTML5에 self-closing 태그의 전체 목록은 다음과 같다. 이것들은 HTML 스펙에서 “void-elements"라고 불린다.

<area />
<base />
<br />
<col />
<command />
<embed />
<hr />
<img />
<input />
<keygen />
<link />
<menuitem />
<meta />
<param />
<source />
<track />
<wbr />

슬래시 앞의 공백은 선택 사항이다.

엔딩 슬래시는 선택 사항인가?

  • HTML5 : 슬래시는 선택 사항이다.
  • HTML4 : 슬래시는 기술적으로 유효하지 않다. 그러나 W3C의 HTML 유효성 검사기에서 허용된다.
  • XHTML : 슬래시가 필요하다.

I recommend to always add the slash. Because, it provides a visual clue of non-closing tags.

항상 슬래시를 추가하는 것이 좋다. 왜냐하면 non-closing 태그는 시각적으로 가독성을 높여준다.

XHTML은 모든 태그에 대해 자체 닫는 구문을 지원한다.

XML / XHTML에서 모든 태그는 끝 슬래시 <… />로 자체를 닫는다.

XML을 테스트할 때 서버가 올바른 인터넷 미디어 유형을 XHTML (예 : application/xhtml+xml)으로 보내고 있는지 확인해야 한다. 그렇지 않으면 브라우저에서 파일의 DOCTYPE에 관계없이 HTML로 처리한다.

참고

https://www.w3.org/TR/html/syntax.html#void-elements

1.2 - HTML 입문 | HTML 텍스트 요소

1.2.1 - HTML 입문 | HTML 텍스트 요소 | 제목 (Headings)

제목 <h1>-<h6>

HTML은 제목을 표현하는 태그를 <h1>에서 <h6>까지 제공한다.
가장 크기가 큰 <h1>태그부터 가장 크기가 작은 <h6>태그까지 다양한 크기로 제목을 표현할 수 있다.

예제

<h1>이 것은 제목1 입니다.</h1>
<h2>이 것은 제목2 입니다.</h2>
<h3>이 것은 제목3 입니다.</h3>
<h4>이 것은 제목4 입니다.</h4>
<h5>이 것은 제목5 입니다.</h5>
<h6>이 것은 제목6 입니다.</h6>

코드 실행

<h1>-<h6>태그의 위아래로는 약간의 여백이 자동으로 삽입된다.

제목은 중요하다.

검색 엔진은 제목를 사용하여 웹 페이지의 구조와 내용을 색인화한다.
사용자는 제목을 보고 페이지의 내용을 파악 하기에 문서 구조에 있어서 제목을 사용하는 것을 중요하다. <h1> 표제는 주 표제 다음에 <h2> 표제 다음 덜 중요한 <h3> 등으로 사용되어야 한다.
머리말에만 HTML 제목을 사용하기 바란다.
제목을 사용하여 텍스트를 크게 또는 굵게 표시하지 말아야 한다.

1.2.2 - HTML 입문 | HTML 텍스트 요소 | 단락 (Paragraphs)

단락(Paragraph) <p>

<p>태그와 </p> 태그 사이에 위치하는 내용이 하나의 단락을 구성한다.

예제

<p>이건 단락입니다.</p>
<p>이건 또 다른 단락입니다.</p>

코드 실행

align 속성값

속성값 설명
기본 정렬하지 않은 문단은 기본적으로 왼쪽 정렬.
left 왼쪽 정렬. 정렬을 시키지 않으면 기본적으로 왼쪽정렬이 되므로 잘 사용하지 않는다.
center 가운데 정렬.
right 오른쪽 정렬.
justfy 맞춤 정렬. 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날때 그 가장자리 부분을 일정하게 맞춰주는 기능입니다. 언듯보면 왼쪽정렬(기본정렬)과 비슷하지만 줄바꿈이 일어난 오른쪽 가장자리를 비교하면 그 차이를 확인할 수 있다.

<p>태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입된다.

서식 그대로 표시 <pre>

HTML에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>(preformatted text)태그를 사용한다. <pre> 태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현된다.

예제

<pre>
진달래꽃

나 보기가 역겨워
가실 때에는
말없이 고이 보내드리우리다.

영변에 약산
진달래꽃
아름 따다 가실 길에 뿌리우리다.
</pre>

코드 실행

줄 바꿈 <br>

HTML에서는 <br>(Line Breaks)태그을 줄바꿈할 수 있다.

예제

<p>이 문단은 <br>줄 바꿈을<br>포함하고 있습니다.</p>

코드 실행

수평 가로 구분선 <hr>

단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 수평 가로 구분선을 사용한다. 이렇게 사용되는 수평 가로 구분선을 HTML 코드에서는 <hr> 태그(horizontal rule)로 간단하게 만들 수 있다.

예제

<p>여긴 하나의 단락입니다.</p>
<hr>
<p>여긴 하나의 단락입니다.</p>
<hr>
<p>여긴 하나의 단락입니다.</p>

코드 실행

1.2.3 - HTML 입문 | HTML 텍스트 요소 | 문자열 서식(Text Formatting)

HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공한다.

강조 <b><strong>

텍스트를 굵게 표시를 해야 할 경우에는 <b>(bold text)태그나 <strong>태그를 사용한다.

<p><b>이 문장은 굵게 표시합니다.</b>은 단순히 글씨가 굵은 부분이에요!</p>
<p><strong>이 문장은 강조하여 표시합니다.</strong></p>

코드 실행

이탤릭체 <i><em>

이탤릭체를 표시를 해야 할 경우에는 <i>(italic text)태그나 <em>(emphasized text)태그를 사용한다.

<p><i>이 문장은 이테릭체입니다.</i></p>
<p><em>이 문장은 강조합니다.</em></p>

코드 실행

마킹 표시 <mark>

<mark> 태그는 텍스트에 하이라이팅(highlighting)을 해준다.

<p>이 부분은 <mark>하이라이팅</mark> 됩니다 </p>

코드 실행

추가 <ins>

<ins>(insert)태그는 텍스트 밑줄을 쳐서 텍스트를 삽입한 거처럼 해준다.

<p>내가 좋아하는 과일을 <ins>바나나</ins> 사과입니다.</p>

코드 실행

삭제 <del>

<del>(delete)태그는 텍스트에 줄을 쳐서 텍스트를 지운 거처럼 해준다.

<p>내가 좋아하는 과일을 <del>바나나</del> 사과입니다.</p>

코드 실행

위첨자 <sup>

위첨자는 <sup>(superscript)태그을 사용한다.

<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>

코드 실행

아래첨자 <sub>

아래첨자는 <sub>(subscript)태그을 사용한다.

<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>

코드 실행

1.2.4 - HTML 입문 | HTML 텍스트 요소 | 인용 (Quotation)

HTML에서 인용구를 표현하는 방법은 다음과 같이 2가지가 있다.

  1. 짧은 인용구
  2. 블록 인용구

짧은 인용문 <q>

짧은 인용구는 <q>(quatation)태그를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙는다.

예제

<p>HTML는 <q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>이다.</p>

코드 실행

블록 인용문 <blockquote>

길이가 긴 인용문은 <blockquote>(block quatation)태그를 사용하여 표현할 수 있다. <blockquote> 태그는 이러한 인용 부분을 별도의 단락으로 구분하여 나타낸다.

예제

<p>HTML의 정의</p>
<blockquote>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
</blockquote>

코드 실행

축약형 표현 <abbr>

HTML에서 용어의 축약형을 표현하기 위해서는 <abbr>(abbreviation)태그를 사용한다. <abbr> 태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타난다.

예제

<p><strong><abbr title="Hyper Text Markup Language 5">HTML5</abbr></strong>
란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.</p>

코드 실행

주소 표현 <address>

<address> 태그를 사용하면 HTML에서 주소를 표현할 수 있다. 이러한 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입된다.

예제

<address>서울특별시 마포구 상암동</address>

코드 실행

1.2.5 - HTML 입문 | HTML 텍스트 요소 | 주석 (Comments)

주석(comment)

주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다. 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않는다.

HTML에서 주석을 표현하는 방법은 다음과 같다.

예제

<!-- 주석내용 -->

HTML 주석의 시작 태그()에는 느낌표가 없다. 이러한 주석은 HTML 코드의 어느 부분에서라도 사용할 수 있다. 여러 줄에 걸쳐 주석을 작성해도 인식한다.

예제

<!--
주석은 HTML 코드의 어느 부분에서라도 사용할 수 있다.
여러 줄에 걸쳐 주석을 작성해도 인식한다.
-->

1.2.6 - HTML 입문 | HTML 텍스트 요소 | 엔티티 (Entity)

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약된 문자(reserved characters)라고 부른다.
이러한 HTML 예약된 문자를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석한다.
따라서 HTML 예약된 문자를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 한다.

엔티티의 형태는 다음과 같다.

문법

&엔티티이름;
또는
&#엔티티숫자;

다음 예제는 HTML 코드 내에서 꺾쇠괄호(<>)를 사용하면 웹 브라우저가 그것을 어떻게 해석하는지 보여준다.

예제

<p>&lt;h2&gt;태그는 두 번째로 큰 제목을 나타내는 태그입니다.</p>
<p>&lt;p&gt;태그는 단락을 나타내는 태그입니다.</p>

코드 실행

위의 예제처럼 HTML 코드에서 사용된 꺾쇠괄호(<>)는 HTML 태그의 시작과 끝의 의미로 해석된다.

엔티티(entity)의 이름은 대소문자를 구분한다.

HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같다.

엔티티 문자 엔티티 이름 16진수 엔티티 숫자 설명
&nbsp; &#160; 줄 바꿈 없는 공백
< &lt; &#60; 보다 작은
> &gt; &#62; 보다 큰
& &amp; &#38; AND 기호
" &quot; &#34; 큰따옴표
' &apos; &#39; 작은따옴표

HTML에서 사용할 수 있는 모든 엔티티에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있다.

Character entity references in HTML

발음 구별 부호(diacritical marks)

발음을 나타내는 부호를 악센트(accent)라고 한다. 이러한 악센트는 단독으로는 사용하지 않으며, 보통 다른 문자와 함께 사용된다. 이것을 정확하게 표현하기 위하여 HTML에서는 다음과 같은 발음 구별 부호를 별도로 제공하고 있다.

HTML에서 제공하는 대표적인 발음 구별 부호(diacritical marks)는 다음과 같다.

발음 구별 부호 문자 16진수 엔티티 결과
̀ a a&#768;
 ́ a a&#769;
̂ a a&#770;
 ̃ a a&#771;
 ̀ O O&#768;
 ́ O O&#769;
̂ O O&#770;
 ̃ O O&#771;

예제

<p>j에 악센트가 있다는 발음 기호는 [j&#769;]입니다.</p>

코드 실행

심볼(Symbol) 특수문자

HTML 예약어 이외에도 키보드에 입력할 수 없는 문자를 표현하기 위한 심볼 특수문자를 사용할 수 있다. 이러한 심볼 특수문자에는 수학 용어, 그리스 문자, 국제 통화 등이 있다.

HTML에서 제공하는 대표적인 심볼(Symbol) 특수문자는 다음과 같다.

심볼 특수문자 엔티티 이름 16진수 엔티티 설명
¢ &cent; &#162; 센트
£ &pound; &#163; 파운드화
¥ &yen; &#165; 엔화
&euro; &#8364; 유로화
© &copy; &#169; 저작권
® &reg; &#174; 등록상표
× &times; &#215; 곱셈
÷ &divide; &#247; 나눗셈

1.2.7 - HTML 입문 | HTML 텍스트 요소 | 문자코드 (Character Codes)

Special HTML codes

Char Numeric code Named code Description
&#09; horizontal tab
&#10; line feed
&#13; carriage return / enter
&#160; &nbsp; non-breaking space

Regular HTML character codes

Char Numeric code Named code Description
&#32; space
! &#33; exclamation mark
" &#34; &quot; double quote
# &#35; number
$ &#36; dollar
% &#37; percent
& &#38; &amp; ampersand
' &#39; &apos; single quote
( &#40; left parenthesis
) &#41; right parenthesis
* &#42; asterisk
+ &#43; plus
, &#44; comma
- &#45; minus
. &#46; period
/ &#47; slash
0 &#48; zero
1 &#49; one
2 &#50; two
3 &#51; three
4 &#52; four
5 &#53; five
6 &#54; six
7 &#55; seven
8 &#56; eight
9 &#57; nine
: &#58; colon
; &#59; semicolon
< &#60; &lt; less than
= &#61; equality sign
> &#62; &gt; greater than
? &#63; question mark
@ &#64; at sign
A &#65;
B &#66;
C &#67;
D &#68;
E &#69;
F &#70;
G &#71;
H &#72;
I &#73;
J &#74;
K &#75;
L &#76;
M &#77;
N &#78;
O &#79;
P &#80;
Q &#81;
R &#82;
S &#83;
T &#84;
U &#85;
V &#86;
W &#87;
X &#88;
Y &#89;
Z &#90;
[ &#91; left square bracket
\ &#92; backslash
] &#93; right square bracket
^ &#94; caret / circumflex
_ &#95; underscore
` &#96; grave / accent
a &#97;
b &#98;
c &#99;
d &#100;
e &#101;
f &#102;
g &#103;
h &#104;
i &#105;
j &#106;
k &#107;
l &#108;
m &#109;
n &#110;
o &#111;
p &#112;
q &#113;
r &#114;
s &#115;
t &#116;
u &#117
v &#118;
w &#119;
x &#120;
y &#121;
z &#122;
{ &#123; left curly bracket
| &#124; vertical bar
} &#125; right curly bracket
~ &#126; tilde

Extra codes

Char Numeric code Named code Description
&#160; &nbsp; non-breaking space
¡ &#161; &iexcl; inverted exclamation mark
¢ &#162; &cent; cent sign
£ &#163; &pound; pound sign
¤ &#164; &curren; currency sign
¥ &#165; &yen; yen sign
¦ &#166; &brvbar; broken bar
§ &#167; &sect; section sign
¨ &#168; &uml; diaeresis
© &#169; &copy; copyright sign
ª &#170; &ordf; feminine ordinal indicator
« &#171; &laquo; left pointing guillemet
¬ &#172; &not; not sign
­ &#173; &shy; soft hyphen
® &#174; &reg; registered sign
¯ &#175; &macr; macron
° &#176; &deg; degree sign
± &#177; &plusmn; plus-minus sign
² &#178; &sup2; superscript two
³ &#179; &sup3; superscript three
´ &#180; &acute; acute accent
µ &#181; &micro; micro sign
&#182; &para; paragraph sign
· &#183; &middot; middle dot
¸ &#184; &cedil; spacing cedilla
¹ &#185; &sup1; superscript one
º &#186; &ordm; masculine ordinal indicator
» &#187; &raquo; right pointing guillemet
¼ &#188; &frac14; fraction one quarter
½ &#189; &frac12; fraction one half
¾ &#190; &frac34; fraction three quarters
¿ &#191; &iquest; inverted question mark
À &#192; &Agrave;  capital  A with grave
Á &#193; &Aacute;  capital  A with acute
 &#194; &Acirc;  capital  A with circumflex
à &#195; &Atilde;  capital  A with tilde
Ä &#196; &Auml;  capital  A with diaeresis
Å &#197; &Aring;  capital  A with ring
Æ &#198; &AElig;  capital  AE
Ç &#199; &Ccedil;  capital  C with cedilla
È &#200; &Egrave;  capital  E with grave
É &#201; &Eacute;  capital  E with acute
Ê &#202; &Ecirc;  capital  E with circumflex
Ë &#203; &Euml;  capital  E with diaeresis
Ì &#204; &Igrave;  capital  I with grave
Í &#205; &Iacute;  capital  I with acute
Î &#206; &Icirc;  capital  I with circumflex
Ï &#207; &Iuml;  capital  I with diaeresis
Ð &#208; &ETH;  capital  ETH
Ñ &#209; &Ntilde;  capital  N with tilde
Ò &#210; &Ograve;  capital  O with grave
Ó &#211; &Oacute;  capital  O with acute
Ô &#212; &Ocirc;  capital  O with circumflex
Õ &#213; &Otilde;  capital  O with tilde
Ö &#214; &Ouml;  capital  O with diaeresis
× &#215; &times; multiplication sign
Ø &#216; &Oslash;  capital  O with stroke
Ù &#217; &Ugrave;  capital  U with grave
Ú &#218; &Uacute;  capital  U with acute
Û &#219; &Ucirc;  capital  U with circumflex
Ü &#220; &Uuml;  capital  U with diaeresis
Ý &#221; &Yacute;  capital  Y with acute
Þ &#222; &THORN;  capital  THORN
ß &#223; &szlig;  small  sharp s
à &#224; &Agrave;  small  a with grave
á &#225; &Aacute;  small  a with acute
â &#226; &  small  a with circumflex
ã &#227; &#38atilde;  small  a with tilde
ä &#228; &#38auml;  small  a with diaeresis
å &#229; &#38aring;  small  a with ring above
æ &#230; &aelig;  small  ae
ç &#231; &ccedil;  small  c with cedilla
è &#232; &egrave;  small  e with grave
é &#233; &eacute;  small  e with acute
ê &#234; &ecirc;  small  e with circumflex
ë &#235; &euml;  small  e with diaeresis
ì &#236; &igrave;  small  i with grave
í &#237; &iacute;  small  i with acute
î &#238; &icirc;  small  i with circumflex
ï &#239; &iuml;  small  i with diaeresis
ð &#240; &eth;  small  eth
ñ &#241; &ntilde;  small  n with tilde
ò &#242; &ograve;  small  o with grave
ó &#243; &oacute;  small  o with acute
ô &#244; &ocirc;  small  o with circumflex
õ &#245; &otilde;  small  o with tilde
ö &#246; &ouml;  small  o with diaeresis
÷ &#247; &divide; division sign
ø &#248; &oslash;  small  o with stroke
ù &#249; &ugrave;  small  u with grave
ú &#250; &uacute;  small  u with acute
û &#251; &ucirc;  small  u with circumflex
ü &#252; &uuml;  small  u with diaeresis
ý &#253; &yacute;  small  y with acute
þ &#254; &thorn;  small  thorn
ÿ &#255; &yuml;  small  y with diaeresis

Symbols codes

Char Numeric code Named code Description
& &#38; & ampersand
&#8226; bullet
&#9702; white bullet
&#8729; bullet operator
&#8227; triangular bullet
&#8259; hyphen bullet
° &#176; ° degree
&#8734; infinity
&#8240; per-mille
&#8901; multiplication dot
± &#177; ± plus-minus
&#8224; hermitian
&#8212;
¬ &#172; ¬
µ µ

Currency codes

Char Numeric code Named code Description
$ &#36; dollar
&#8364; &euro; euro
£ &#163; &pound; pound
¥ &#165; &yen; yen / yuan
¢ &#162; &cent; cent
&#8377; indean Rupee
&#8360; rupee
&#8369; peso
&#8361; korean won
฿ &#3647; thai baht
&#8363; dong
&#8362; shekel

Intellectual property codes

Char Numeric code Named code Description
© &#169; &copy; copyright
® &#174; &reg; registered trademark
&#8471; sound recording copyright
&#8482; &trade; trademark
&#8480; service mark

Greek alphabet codes

Char Numeric code Named code Description
α α &alpha; small alpha
β β &beta; small beta
γ γ &gamma; small gamma
δ δ &delta; small delta
ε ε &epsilon; small epsilon
ζ ζ &zeta; small zeta
η η &eta; small eta
θ θ &theta; small theta
ι ι &iota; small iota
κ κ &kappa; small kappa
λ λ &lambda; small lambda
μ μ &mu; small mu
ν ν &nu; small nu
ξ ξ &xi; small xi
ο ο &omicron; small omicron
π π &pi; small pi
ρ ρ &rho; small rho
σ σ &sigma; small sigma
τ τ &tau; small tau
υ υ &upsilon; small upsilon
φ φ &phi; small phi
χ χ &chi; small chi
ψ ψ &psi; small psi
ω ω &omega; small omega
Α Α &Alpha; capital alpha
Β Β &Beta; capital beta
Γ Γ &Gamma; capital gamma
Δ Δ &Delta; capital delta
Ε Ε &Epsilon; capital epsilon
Ζ Ζ &Zeta; capital zeta
Η Η &Eta; capital eta
Θ Θ &Theta; capital theta
Ι Ι &Iota; capital iota
Κ Κ &Kappa; capital kappa
Λ Λ &Lambda; capital lambda
Μ Μ &Mu; capital mu
Ν Ν &Nu; capital nu
Ξ Ξ &Xi; capital xi
Ο Ο &Omicron; capital omicron
Π Π &Pi; capital pi
Ρ Ρ &Rho; capital rho
Σ Σ &Sigma; capital sigma
Τ Τ &Tau; capital tau
Υ Υ &Upsilon; capital upsilon
Φ Φ &Phi; capital phi
Χ Χ &Chi; capital chi
Ψ Ψ &Psi; capital psi
Ω Ω &Omega; capital omega

참조

http://www.rapidtables.com/web/html/html-codes.htm

1.2.8 - HTML 입문 | HTML 텍스트 요소 | 문자셋 (Character set)

웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지를 알아야 한다.
따라서 HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의 <meta>태그에 명시한다.

HTML4에서 UTF-8의 경우

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5에서 UTF-8의 경우

<meta charset="UTF-8">

위 두 예제는 해당 HTML 문서가 UTF-8 문자셋을 사용하여 저장되었음을 웹 브라우저에 알려준다.

문자셋의 종류

현재 사용되는 대표적인 문자셋(character set)은 다음과 같다.

  1. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있다.
  2. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원한다.
  3. ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋이다.
  4. UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋이다.

1.3 - HTML 입문 | HTML 기본 요소

1.3.1 - HTML 입문 | HTML 기본 요소 | HTML 메타(meta)

<meta>태그 요스는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 속성 정보를 담고 있다.

메타 <meta> 지정

<meta>태그는 문서의 헤더부분(<head>~</head>)에 위치한다.

<meta name="subject" content="여러 분야에 대한 지식 공유">
<meta name="title" content="데브쿠마">
<meta name="author" content="devkuma">
<meta name="keywords" content="meta태그, HTML, 지식 공유 프로젝트">

<meta>태그에서 가장 일반적으로 사용되는 속성은 name, content 속성이다.
name 속성값으로는 subject, title, author, keywords 등이 있다.

메타 <meta> 요소는 왜 지정하는가?

<meta>태그 요소는 검색 엔진에게 문서의 내용을 요약해 주고 정보를 전달해 주기도 하고, 웹 브라우저에게도 정보를 전달하는 역할을 한다.

웹 브라우저에게 정보를 전달하는 대표적인 경우는 아래와 같이 2가지를 생각할 수 있다.

지정한 페이지로 이동

<meta http-equiv="refresh" content="5;url=http://www.devkuma.com/">

싸이트의 주소가 바뀌었을 경우에 사용하는 태그로 5초뒤에 url 속성값으로 지정한 페이지로 이동한다는 의미이다.

이렇게 이동하는 것은 하이퍼링크를 눌러서 이동하는거와는 다른 의미를 갖는다.
하이퍼링크를 누른다는것은 한 페이지를 읽고 있다가 다른 페이지로 이동한다는 의미이지만, <meta> 태그를 이용한 페이지 이동은 http-equiv 속성값을 지정된거와 같이 refresh 한다는 의미이다.

즉, 위와 같은 <meta>태그가 입력된 페이지는 보지 않는 걸로 인식하겠다는 의미이다.

문자셋 정보를 웹브라우저에게 전달

한글로 작성된 싸이트라는 것을 웹 브라우저에게 알리기 위해서는 아래와 같이 <meta>태그를 지정해 준다.

<meta http-equiv="content-type" content="text/html; charset=euc-kr">

이렇듯 웹 브라우저에게 정보를 전달하기 위한 <meta>태그는 http-equiv 라는 속성을 사용한다.

1.3.2 - HTML 입문 | HTML 기본 요소 | HTML 스타일(style)

HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다. 다만, 이렇게 style 속성을 지정하게 되면 오직 단 하나의 HTML 요소에만 스타일이 적용된다.

문법

<태그명 style="속성이름:속성값"></태그명>

배경색 변경

다음 예제는 style 속성을 이용하여 배경색을 변경하는 예제이다.

<div style="background-color:yellow">
    style 속성을 이용한 배경색 변경
</div>

코드 실행

글자색 변경

다음 예제는 style 속성을 이용하여 글자색을 변경하는 예제이다.

<div style="color:blue">
    style 속성을 이용한 글자색 변경
</div>

코드 실행

글자 크기 변경

다음 예제는 style 속성을 이용하여 글자 크기를 변경하는 예제이다.

<div style="font-size:150%">
    style 속성을 이용한 글자 크기 변경
</div>

코드 실행

문단 정렬 변경

다음 예제는 style 속성을 이용하여 문단 정렬을 변경하는 예제이다.

<div style="text-align:center">
    style 속성을 이용한 문단 정렬 변경
</div>

코드 실행

여러 스타일의 변경

style 속성을 이용하여 여러 CSS 스타일을 한 번에 적용할 수 있다.

<div style="background-color:yellow; color:blue; font-size:150%; text-align:center">
    style 속성을 이용하여 여러가지 변경
</div>

코드 실행

style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분한다.

CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략할 수 있다.

1.3.3 - HTML 입문 | HTML 기본 요소 | HTML 색(color)

HTML에서 색을 표현하는 방법은 다음과 같이 세 가지 방법이 있다.

  1. 색상 이름으로 표현
  2. RGB 색상값으로 표현
  3. 16진수 색상값으로 표현

색상 이름으로 표현

W3C에서 정의한 16개의 HTML4 표준 색상 이름 및 sRGB은 다음과 같다.

기본 색상 키워드 목록은 16개이고, 색상 이름은 대소 문자를 구분하지 않는다.

색상 이름 Hex rgb Decimal
black #000000 0,0,0
silver #C0C0C0 192,192,192
gray #808080 128,128,128
white #FFFFFF 255,255,255
maroon #800000 128,0,0
red #FF0000 255,0,0
purple #800080 128,0,128
fuchsia #FF00FF 255,0,255
green #008000 0,128,0
lime #00FF00 0,255,0
olive #808000 128,128,0
yellow #FFFF00 255,255,0
navy #000080 0,0,128
blue #0000FF 0,0,255
teal #008080 0,128,128
aqua #00FFFF 0,255,255

현재는 주요 브라우저가 147개의 색상 이름을 모두 지원하고 있습니다.

색상 이름 Hex rgb Decimal
aliceblue #F0F8FF 240,248,255
antiquewhite #FAEBD7 250,235,215
aqua #00FFFF 0,255,255
aquamarine #7FFFD4 127,255,212
azure #F0FFFF 240,255,255
beige #F5F5DC 245,245,220
bisque #FFE4C4 255,228,196
black #000000 0,0,0
blanchedalmond #FFEBCD 255,235,205
blue #0000FF 0,0,255
blueviolet #8A2BE2 138,43,226
brown #A52A2A 165,42,42
burlywood #DEB887 222,184,135
cadetblue #5F9EA0 95,158,160
chartreuse #7FFF00 127,255,0
chocolate #D2691E 210,105,30
coral #FF7F50 255,127,80
cornflowerblue #6495ED 100,149,237
cornsilk #FFF8DC 255,248,220
crimson #DC143C 220,20,60
cyan #00FFFF 0,255,255
darkblue #00008B 0,0,139
darkcyan #008B8B 0,139,139
darkgoldenrod #B8860B 184,134,11
darkgray #A9A9A9 169,169,169
darkgreen #006400 0,100,0
darkgrey #A9A9A9 169,169,169
darkkhaki #BDB76B 189,183,107
darkmagenta #8B008B 139,0,139
darkolivegreen #556B2F 85,107,47
darkorange #FF8C00 255,140,0
darkorchid #9932CC 153,50,204
darkred #8B0000 139,0,0
darksalmon #E9967A 233,150,122
darkseagreen #8FBC8F 143,188,143
darkslateblue #483D8B 72,61,139
darkslategray #2F4F4F 47,79,79
darkslategrey #2F4F4F 47,79,79
darkturquoise #00CED1 0,206,209
darkviolet #9400D3 148,0,211
deeppink #FF1493 255,20,147
deepskyblue #00BFFF 0,191,255
dimgray #696969 105,105,105
dimgrey #696969 105,105,105
dodgerblue #1E90FF 30,144,255
firebrick #B22222 178,34,34
floralwhite #FFFAF0 255,250,240
forestgreen #228B22 34,139,34
fuchsia #FF00FF 255,0,255
gainsboro #DCDCDC 220,220,220
ghostwhite #F8F8FF 248,248,255
gold #FFD700 255,215,0
goldenrod #DAA520 218,165,32
gray #808080 128,128,128
green #008000 0,128,0
greenyellow #ADFF2F 173,255,47
grey #808080 128,128,128
honeydew #F0FFF0 240,255,240
hotpink #FF69B4 255,105,180
indianred #CD5C5C 205,92,92
indigo #4B0082 75,0,130
ivory #FFFFF0 255,255,240
khaki #F0E68C 240,230,140
lavender #E6E6FA 230,230,250
lavenderblush #FFF0F5 255,240,245
lawngreen #7CFC00 124,252,0
lemonchiffon #FFFACD 255,250,205
lightblue #ADD8E6 173,216,230
lightcoral #F08080 240,128,128
lightcyan #E0FFFF 224,255,255
lightgoldenrodyellow #FAFAD2 250,250,210
lightgray #D3D3D3 211,211,211
lightgreen #90EE90 144,238,144
lightgrey #D3D3D3 211,211,211
lightpink #FFB6C1 255,182,193
lightsalmon #FFA07A 255,160,122
lightseagreen #20B2AA 32,178,170
lightskyblue #87CEFA 135,206,250
lightslategray #778899 119,136,153
lightslategrey #778899 119,136,153
lightsteelblue #B0C4DE 176,196,222
lightyellow #FFFFE0 255,255,224
lime #00FF00 0,255,0
limegreen #32CD32 50,205,50
linen #FAF0E6 250,240,230
magenta #FF00FF 255,0,255
maroon #800000 128,0,0
mediumaquamarine #66CDAA 102,205,170
mediumblue #0000CD 0,0,205
mediumorchid #BA55D3 186,85,211
mediumpurple #9370DB 147,112,219
mediumseagreen #3CB371 60,179,113
mediumslateblue #7B68EE 123,104,238
mediumspringgreen #00FA9A 0,250,154
mediumturquoise #48D1CC 72,209,204
mediumvioletred #C71585 199,21,133
midnightblue #191970 25,25,112
mintcream #F5FFFA 245,255,250
mistyrose #FFE4E1 255,228,225
moccasin #FFE4B5 255,228,181
navajowhite #FFDEAD 255,222,173
navy #000080 0,0,128
oldlace #FDF5E6 253,245,230
olive #808000 128,128,0
olivedrab #6B8E23 107,142,35
orange #FFA500 255,165,0
orangered #FF4500 255,69,0
orchid #DA70D6 218,112,214
palegoldenrod #EEE8AA 238,232,170
palegreen #98FB98 152,251,152
paleturquoise #AFEEEE 175,238,238
palevioletred #DB7093 219,112,147
papayawhip #FFEFD5 255,239,213
peachpuff #FFDAB9 255,218,185
peru #CD853F 205,133,63
pink #FFC0CB 255,192,203
plum #DDA0DD 221,160,221
powderblue #B0E0E6 176,224,230
purple #800080 128,0,128
red #FF0000 255,0,0
rosybrown #BC8F8F 188,143,143
royalblue #4169E1 65,105,225
saddlebrown #8B4513 139,69,19
salmon #FA8072 250,128,114
sandybrown #F4A460 244,164,96
seagreen #2E8B57 46,139,87
seashell #FFF5EE 255,245,238
sienna #A0522D 160,82,45
silver #C0C0C0 192,192,192
skyblue #87CEEB 135,206,235
slateblue #6A5ACD 106,90,205
slategray #708090 112,128,144
slategrey #708090 112,128,144
snow #FFFAFA 255,250,250
springgreen #00FF7F 0,255,127
steelblue #4682B4 70,130,180
tan #D2B48C 210,180,140
teal #008080 0,128,128
thistle #D8BFD8 216,191,216
tomato #FF6347 255,99,71
turquoise #40E0D0 64,224,208
violet #EE82EE 238,130,238
wheat #F5DEB3 245,222,179
white #FFFFFF 255,255,255
whitesmoke #F5F5F5 245,245,245
yellow #FFFF00 255,255,0
yellowgreen #9ACD32 154,205,50

아래는 위에 색상 이름으로 만든 예제이다.

<div style="color:blue">색상 이름으로 표현된 파란색(blue)</div>
<div style="color:green">색상 이름으로 표현된 녹색(green)</div>
<div style="color:silver">색상 이름으로 표현된 은색(silver)</div>
<div style="color:teal">색상 이름으로 표현된 청록색(teal)</div>
<div style="color:red">색상 이름으로 표현된 빨간색(red)</div>

코드 실행

RGB 색상값으로 표현

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다.
HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다.
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.

<div style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색(0,0,255)</div>
<div style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색(0,128,0)</div>
<div style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색(192,192,192)</div>
<div style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색(0,128,128)</div>
<div style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색(255,0,0)</div>

코드 실행

Hex rgb(16진수) 색상값으로 표현

Hex rgb(16진수) 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다.
따라서 각각의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.

예를 들면, 빨간색을 나타내는 RGB 색상값인 **rgb(255,0,0)**은 16진수 색상값으로는 #FF0000이 된다.

<div style="color:#0000FF">16진수 색상값으로 표현된 파란색(#0000FF)</div>
<div style="color:#008000">16진수 색상값으로 표현된 녹색(#008000)</div>
<div style="color:#C0C0C0">16진수 색상값으로 표현된 은색(#C0C0C0)</div>
<div style="color:#008080">16진수 색상값으로 표현된 청록색(#008080)</div>
<div style="color:#FF0000">16진수 색상값으로 표현된 빨간색(#FF0000)</div>

코드 실행

참조

1.3.4 - HTML 입문 | HTML 기본 요소 | HTML 배경(background)

HTML 문서의 기본 배경(background)은 흰색이다. HTML 요소들마다 각각의 배경이 존재한다.

HTML에서는 배경을 다음과 같이 변경할 수 있다.

  1. 배경색 변경
  2. 배경을 이미지로 변경

배경색 변경

HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경할 수 있었다. 하지만 HTML5부터는 bgcolor 속성을 더 이상 지원하지 않으며, CSS를 이용하여 배경색을 변경하도록 권장하고 있다.

다음 예제는 CSS 스타일을 이용하여 배경색을 다른 색으로 변경하는 예제이다.

<style>
    body { background-color: lightgreen; }
    div { background-color: rgb(255,0,128); }
    p { background-color: #FFCCFF; }
</style>

코드 실행

CSS의 background-color 속성을 이용하면, 더욱 다양한 방법으로 배경색을 설정할 수 있다.

배경을 이미지로 변경

HTML 요소의 background 속성을 이용하면 HTML 요소의 배경을 이미지(image)로 설정할 수 있다.

문법

<태그명 background="이미지주소"></태그명>

다음 예제는 이미지를 이용하여 배경을 만들고 있다.

<body background="/resources/images/logo/96x96.png">
</body>

코드 실행

배경으로 이미지를 사용하면 웹 페이지의 로딩시간이 길어진다.
따라서, 보통은 작은 사이즈의 이미지를 패턴(pattern)으로 만들어 배경 이미지로 반복 표시하도록 설정한다.

1.3.5 - HTML 입문 | HTML 기본 요소 | HTML 링크(link)

웹 페이지는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다.
이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a> 태그로 표현한다.
“a"는 앵커(Anchor)를 의미한다.

문법

<a href="Link URL">링크제목</a>

아래 예제는 클릭하면 페이지가 이동된다.

<a href="//www.devkuma.com">DevKuma</a>

코드 실행

target 속성

속성값 설명
_blank 링크로 연결된 문서를 새 창이나 새 탭에서 열린다.
_self 링크로 연결된 문서를 현재 프레임(frame)에서 열린다. (기본설정)
_parent 링크로 연결된 문서를 부모 프레임(frame)에서 열린다.
_top 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 열린다.
frame 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 열린다.

예제

<div><a href="/books/5" target="_blank">_blank</a></div>
<div><a href="/books/5" target="_self">_self</a></div>
<div><a href="/books/5" target="_parent">_parent</a></div>
<div><a href="/books/5" target="_top">_top</a></div>
<div><a href="/books/5" target="myframe">frame</a></div>

<iframe name="myframe" style="width:50%; height: 100%"></iframe>

코드 실행

링크의 상태(state)

HTML 링크의 상태는 다음과 같이 4가지가 있다.

상태 설명
link 아직 한 번도 방문한 적이 없는 상태 (기본설정)
visited 한 번이라도 방문한 적이 있는 상태
hover 링크 위에 마우스를 올려놓은 상태
active 링크를 마우스로 누르고 있는 상태

웹 브라우저에서 링크가 연결되어 있는 텍스트의 색상은 다음과 같다.

  • 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경된다.
  • visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경된다.
  • active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경된다.
<style>
       a:link    { color: blue; }
       a:visited { color: green; }
       a:hover   { color: yellow; }
       a:active  { color: red; }
</style>

코드 실행

페이지 책갈피(Bookmark)

<a>태그의 name 속성을 이용하면 간단한 책갈피(Bookmark)를 만들 수 있다.
우선 책갈피를 통해서 이동하고 싶은 위치에 <a>태그를 만들고 name 속성을 작성한다.
그 다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 된다.

<a href="#bookmark25">제목25으로 이동</a>
...
<h2><a name="bookmark25">제목25</a><h2>

코드 실행

1.3.6 - HTML 입문 | HTML 기본 요소 | HTML 이미지(Image)

이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다. 웹 페이지에는 이러한 이미지가 매우 중요한 요소 중 하나이다.

웹 페이지에서 사용 가능한 이미지의 종류는 다음과 같다.

  • JPEG Images
  • GIF Images
  • PNG Images

이미지의 삽입

HTML에 이미지를 추가할 때는 <img>태그를 사용한다.
<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용된다.

문법

<img src="이미지주소" alt="대체문자열"/>

이미지를 삽입하는 예제는 아래와 같다.

<img src="/resources/images/logo/128x128.png" alt="devkuma logo"/>

코드 실행

이미지 크기(width, height)

HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있다.
또한, width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수도 있다.

위의 두 가지 방법 모두 HTML5 표준에는 적합한 방법이지만, 나중에 배우게 될 CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 style 속성을 사용하는 것이 좋다.

<img src="/resources/images/logo/128x128.png" alt="devkuma logo" style="width:256px;height:256px;">

코드 실행

이미지 alt 속성

alt는 이미지를 표시 할 수없는 경우 이미지에 대한 대체 텍스트를 표시한다.

연결 속도가 느리거나, 실제 이미지가 존재하지 않는 경우 등 브라우저에서 사용자가 볼 수 없는 경우에 이미지의 대체 정보를 제공한다.

<img src="noimage.png" alt="이미지가 없습니다.">

코드 실행

이미지 테두리(border)

border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.

<img src="/resources/images/logo/256x256.png" alt="이미지 테두리" style="border: 3px solid black">

코드 실행

이미지에 <a>태그를 이용하여 링크를 설정할 수 있다.

<a href="/books/pages/112" target="_blank">
    <img src="/resources/images/logo/256x256.png" alt="flag">
</a>

코드 실행

이미지 맵 만들기

HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있다. 이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미한다.

<map> 태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다.
<map> 태그는 하나 이상의 <area> 태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할을 한다.

<img src="/resources/images/logo/256x256.png" alt="devkuma logo" usemap="#devkuma"/>
<map name="devkuma">
  <area shape="rect" coords="105,145,150,175" alt="코"
        href="https://ko.wikipedia.org/wiki/%EC%BD%94">
  <area shape="rect" coords="25,50,60,85" alt="왼쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
  <area shape="circle" coords="205,65,30" alt="오른쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
</map>

코드 실행

img 태그

속성 설명
usemap 이 이미지에서 map을 사용할 것임을, 브라우저에게 알려준다. 사용할 map의 이름을 넣어준다.

map 태그

속성 설명
name map 태그에게 붙여줄 이름.
id name 속성에서 정한 것과 동일한 이름을 넣는다.

※ html 5로 넘어오면서, name 속성보다는 id 속성을 사용하라고 권하는 추세다.

area 태그

속성 설명
shape map의 모양. 링크를 걸어줄 영역의 모양. 기본값인 default는, 이미지의 전체 영역. default, rect, circle, poly 중에서 하나를 선택하여 사용한다.
coords map의 좌표. 다각형(poly)일 경우, 최소 3개의 좌표가 필요하다.
alt “스크린 리더” 사용자처럼 이미지를 볼 수 없는 경우, 또는 이미지를 불러올 수 없는 브라우저를 위한 설정. 이미지를 대신할 문구를 넣어준다.
title 말풍선. 해당 영역으로 마우스를 가져갔을 때 나타나는 문구.
href 클릭시 이동할 URL.
※ ie 7 이하에서는, title이 아닌 alt에서 설정한 내용이 말풍선으로 표시됨.

참조

1.3.7 - HTML 입문 | HTML 기본 요소 | HTML 리스트(list)

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현 할 수 있는 태그를 제공하고 있다.

  1. 순서가 있는 목록(ordered list)
  2. 순서가 없는 목록(unordered list)
  3. 정의 목록(definition list)

순서가 있는 목록(ordered list)

순서가 있는 목록는 <ol>태그로 작성하고, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 아라비아 숫자가 표시된다.

<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

코드 실행

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

  • decimal : 숫자 (기본설정)
  • upper-alpha : 영문 대문자
  • lower-alpha : 영문 소문자
  • upper-roman : 로마 숫자 대문자
  • lower-roman : 로마 숫자 소문자
<p>decimal : 숫자 (기본설정)</p>
<ol>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-alpha : 영문 대문자</p>
<ol style="list-style-type: upper-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-alpha : 영문 소문자</p>
<ol style="list-style-type: lower-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-roman : 로마 숫자 대문자</p>
<ol style="list-style-type: upper-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-roman : 로마 숫자 소문자</p>
<ol style="list-style-type: lower-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>

코드 실행

순서가 없는 목록(unordered list)

순서가 없는 목록은 <ul> 태그로 작성하고, 여기에 포함되는 각각의 목록 요소는 <li>태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 표시된다.

<ul>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
</ul>

코드 실행

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

  • disc : 검정색 작은 원형 모양 (기본설정)
  • circle : 흰색 작은 원형 모양
  • square : 사각형 모양
<p>disc : 검정색 작은 원형 모양 (기본설정)</p>
<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>
  
<p>circle : 흰색 작은 원형 모양</p>
<ul style="list-style-type: circle">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

<p>square : 사각형 모양</p>
<ul style="list-style-type: square">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

코드 실행

정의 목록(definition list)

정의 목록은 용어와 그에 대한 정의를 모아놓은 목록으로 <dl>태그로 작성한다. <dt>태그에는 용어가 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어간다.

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>XML</dt>
  <dd>eXtensible Markup Language</dd>
</dl>

코드 실행

1.3.8 - HTML 입문 | HTML 기본 요소 | HTML 테이블(table)

테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미한다.
HTML에서는 <table> 태그를 사용하여 이러한 테이블을 작성할 수 있다.

<table> 태그는 다음과 같은 태그들로 구성된다.

  1. <tr> 태그는 테이블에서 열을 구분해 준다.
  2. <th>태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.
  3. <td> 태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다.
<table>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

코드 실행

테이블의 스타일(style)

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다. border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리가 표시된다.

<style>
    table, th, td { border: 1px solid black }
</style>

코드 실행

위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table> 태그와 <th> 태그, <td> 태그가 모두 자신만의 테두리를 가지고 있기 때문이다.

위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용하면 된다. border-collapse 속성 값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있다.

<style>
    table, th, td { border: 1px solid black; border-collapse: collapse }
</style>

코드 실행

테이블의 열 합치기

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있다.

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
    <td></td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
    <td>감자</td>
  </tr>
</table>

코드 실행

테이블의 행 합치기

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있다.

<table>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td>채소</td>
    <td>감자</td>
  </tr>
</table>

코드 실행

테이블의 열과 행 합치기

colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있다.

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
    <td></td>
  </tr>
  <tr>
    <td>포도</td>
    <td rowspan="2">토마토 감자</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

코드 실행

테이블의 캡션(caption) 설정

<caption> 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.

<table style="width:100%">
  <caption>장바구니</caption>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

코드 실행

1.4 - HTML 입문 | HTML 공간 분할

1.4.1 - HTML 입문 | HTML 공간 분할 | HTML 블럭(block)과 인라인(inline)

HTML 블럭(block)과 인라인(inline)

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가진다.
대부분의 HTML 요소는 기본적으로 display 속성값으로 다음 두 가지 값 중 하나를 가지게 된다.

  1. 블록(block) 속성을 갖는 요소
  2. 인라인(inline) 속성을 갖는 요소

그 밖에 inline-block 속성도 있는데, 블럭(block)과 인라인(inline) 두 속성의 중간 단계이다.
inline-block 속성을 기본값으로 가지고 있는 태그는 없다. 여기서 설명을 하자면 길어지기에 따로 설명을 하지는 않겠다.

블록(block) 속성을 갖는 요소

display 속성값이 블록(block)인 요소는 언제나 새로운 줄(line)로 바뀌며, 해당 줄의 모든 너비를 차지한다.

display 속성값이 블록(block)인 대표적인 요소는 아래와 같다.

  • <div>
  • <h1>-<h6>
  • <p>
  • <ul>
  • <ol>
  • <form>

블록 속성의 특징은 아래와 같다.

  • 블록 속성을 가지고 있는 태그는 기본적으로 너비 100%(width: 100%) 속성을 가지고 있다. 화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 되는 것이다.
  • 또한, 인라인 요소와 다르게 margin, width, height 속성을 정의하면 모두 적용된다. 모양새를 쉽게 제어할 수 있는 속성 때문에 대부분 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용한다.

<div> 요소

<div> 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다. <div> 요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.

<div style="background-color:lightgrey; color:green;">
    <h1>오늘의 명언</h1>
    <p>오늘 내가 죽어도 세상은 바뀌지 않는다. 하지만 내가 살아 있는 한 세상은 바뀐다.</p>
</div>

코드 실행

인라인(inline) 속성을 갖는 요소

display 속성값이 인라인(inline)인 요소는 새로운 줄(line)로 바꾸지 않고 다른 요소와 같이 표시된다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

display 속성값이 인라인(inline)인 대표적인 요소이다.

  • <span>
  • <a>
  • <img>
  • <strong>

인라인 속성의 특징은 아래와 같다.

  • 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않는다. 인라인 요소의 상, 하 여백은 margin 속성이 아니라 line-height 속성에 의해 발생한다.
  • 너비(width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.
  • 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.

<span>요소

<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소이다. <span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.

나는 당신을 <span style="color:red">사랑</span>합니다.

코드 실행

블럭(block)과 인라인(inline) 속성 태그 표기시 주의할 점

블럭(block)은 인라인(inline)을 포괄하는 더 큰 개념이다. 따라서 HTML을 마크업 할 때는 Inline 속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 된다.

나쁜 예제

<span><p>문장입니다.</p></span>

좋은 예제

<p><span>문장입니다.</span></p>

부득이한 경우에는 인라인(inline) 속성의 태그를 CSS에서 span { display: block } 과 같이 정의하여 임의로 block 속성으로 변경할 수 있지만, CSS는 표준 문법 규칙을 지키는 것을 원칙으로 한다. 여기서는 인라인(inline)이 블럭(block)보다 작은 개념이라는 것을 잊지말도록 하자.

참조

1.4.2 - HTML 입문 | HTML 공간 분할 | HTML 아이플레임(iframe)

iframe 요소

iframe이란 inline frame의 약자이다.
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.

문법은 아래와 같다.

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

iframe 요소는 frame 요소와는 달리 종료 태그가 존재한다. 또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정된다.

<iframe src="//www.devkuma.com" style="width:100%; height:300px"></iframe>

코드 실행

iframe 요소의 테두리 변경

iframe 요소는 기본적으로 검정색 테두리(border)를 가진다. 이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있다.

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border: 3px dashed maroon">
</iframe>

테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 된다.

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border:none"></iframe>

코드 실행

iframe 요소의 페이지 변경하기

<a>태그를 이용하면 iframe 요소의 페이지를 변경할 수 있다. <a> 태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a>태그를 통해 iframe 요소의 페이지를 변경할 수 있다.

<iframe src="//www.devkuma.com" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
  <a href="//www.google.com" target="frame_target">구글로 이동</a>
</p>

코드 실행

그밖에

그밖에 <frameset>, <frame>, <noframes> 요소가 있는데, HTML5 표준 권고안에서 더 이상 지원하지 않는다. 따라서, 하나의 페이지에 여러 페이지를 표현하기 위해서는 <iframe> 요소를 사용해야 한다.

1.4.3 - HTML 입문 | HTML 공간 분할 | HTML 레이아웃(layout)

HTML 레이아웃(layout)

레이아웃(layout)이란, 특정 공간 안에 문자, 이미지 등의 구성 요소를 보기 쉽게 효과적으로 배치하는 작업한다. (출처: 위키) 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다.

HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있다.

  1. div 요소를 이용한 레이아웃
  2. HTML5 의미 요소를 이용한 레이아웃
  3. table 요소를 이용한 레이아웃

HTML5 layout

div 요소를 이용한 레이아웃

div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 예전에는 자주 사용되었다. 최신에는 div보다는 HTML5 의미 요소를 이용한 레이아웃를 추천한다.

<div id="header">Header</div>
<div id="nav">Nav</div>
<div id="section">
  Section
  <div id="article">Article</div>
</div>
<div id="aside">Aside</div>
<div id="footer">Footer</div>

코드 실행

HTML5 의미 요소를 이용한 레이아웃

HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공한다. 이러한 요소들을 의미(semantic) 요소라고 한다.

의미(semantic) 요소는 기능은 없지만 의미를 명확하게 하여, 컴퓨터가 정보를 이해하고 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가된 태그이다. 검색 엔진 최적화(SEO)를 할 시에 중요한 역활을 한다.

<header>Header</header>
<nav>Nav</nav>
<section>
  Section
  <article>Article</article>
</section>
<aside>Aside</aside>
<footer>Footer</footer>

코드 실행

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같다.

의미 요소 설명
<header> HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav> HTML 문서의 탐색 링크를 정의함.
<section> HTML 문서의 주요 콘텐츠(content)를 정의함.
<article> HTML 문서에서 섹션(section) 부분을 정의함.
<aside> HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<footer> HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. 

table 요소를 이용한 레이아웃

table 요소를 이용하여 레이아웃을 작성하는 방법은 오래전에 사용하던 방식이며, 현재는 거의 사용하지 않는다.
table 요소는 레이아웃을 만들기 위해 설계된 요소가 아니므로, 테이블로 작성된 레이아웃은 수정이 매우 힘들다.
따라서 되도록이면 table 요소로 레이아웃을 작성하지 말아야 한다.

<table width="100%" style="text-align:center; border:none;">
  <tr>
    <td colspan="2" style="background-color:#ddd;margin:4px;padding:4px;">Header</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:#ddd;margin:4px;padding:4px;">Nav</td>
  </tr>
  <tr>
    <td style="background-color:#ddd;width:280px;">
      Section
      <p style="background-color:#efefef;width:265px;margin:10px;">Article</p>
    </td>
    <td style="background-color:#ddd;height:60px;">Aside</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:#ddd">Footer</td>
  </tr>
</table>

코드 실행

참조

1.5 - HTML 입문 | HTML 입력 양식 (Forms)

1.5.1 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 입력폼(form)

입력폼 (form)

웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다.

form 요소는 다음과 같은 문법으로 사용한다.

문법

<form action="처리할페이지주소" method="get|post"></form>

action 속성

action 속성은 입력받은 데이터를 처리할 서버 상의 URL 주소를 명시한다.
전달받은 데이터를 처리하는 서버 프로그램을 폼 핸들러(form-handler)라고 한다.

method 속성

method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다.
따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠진다.

GET 방식

GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식이다. 데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적이다. 따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용한다.

POST 방식

POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식이다. 데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다. 따라서 보안성 및 활용성이 GET 방식보다 좋다.

HTML5 Attributes

HTML5에서 <form> 태그에 추가된 속성을 아래와 같다.

  • autocomplete
  • novalidate

1.5.2 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 입력(input) 요소 타입(type)

입력(input) 요소 타입(type)

form 요소는 다양한 타입의 input 요소를 포함할 수 있다.
HTML에서 자주 사용되는 input 요소의 대표적인 타입은 다음과 같다.

  1. text
  2. password
  3. submit
  4. reset
  5. image
  6. button
  7. radio
  8. checkbox
  9. file

HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다.

  1. 숫자 입력(number)
  2. 입력 범위 지정(range)
  3. 색상 입력(color)
  4. 날짜 입력(date)
  5. 시간 입력(time)
  6. 날짜와 시간 입력(datetime-local)
  7. 연도와 월 입력(month)
  8. 연도와 주 입력(week)
  9. 이메일 입력(email)
  10. URL 주소 입력(url)
  11. 전화번호 입력(tel)
  12. 검색어 입력(search)

텍스트 입력 - text

<input> 태그의 type 속성값을 “text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.

<form>
  제목 : <input type="text" name="title">
</form>

코드 실행

비밀번호 입력 - password

<input> 태그의 type 속성값을 “password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다.
비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표(*)나 작은 원 모양(•)이 표시된다.

<form>
  사용자명 : <input type="text" name="username"><br/>
  비밀번호 : <input type="password" name="password">
</form>

코드 실행

전송 버튼 - submit

<input> 태그의 type 속성값을 “submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼이 된다.

폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.
이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.

<form action="/">
  사용자명 : <input type="text" name="username"><br/>
  <input type="submit" value="전송">
</form>

코드 실행

재설정 버튼 - reset

<input> 태그의 type 속성값을 “reset"으로 설정하면, 사용자가 입력한 값이 초기 값으로 재설정하는 버튼이 된다.

<form action="/">
  사용자명 : <input type="text" name="username" value="개발곰"><br/>
  <input type="reset" value="재설정">
</form>

코드 실행

이미지 버튼 - image

<input> 태그의 type 속성값을 “image"으로 설정하면, 전송버튼(Submit Button)의 역할을 하면서 이미지로 출력되는 버튼이 된다.

<form action="/">
  사용자명 : <input type="text" name="username"><br/>
  <input type="image" src="/resources/images/logo/64x64.png">
</form>

코드 실행

전송버튼이 아닌 일반적인 버튼을 이미지로 처리할려면 <img> 태그를 사용하고 이를 자바스크립트를 이용하여 액션을 지정해야 한다.

일반 버튼 - button

<input> 태그의 type 속성값을 “button"으로 설정하면, 일반적인 버튼이 된다.

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

코드 실행

button은 <button> 태그로도 표현이 가능하다. 참조

라디오 버튼 - radio

<input> 태그의 type 속성값을 “radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.

이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.

<input type="radio" name="fruit" value="apple" checked> 사과
<input type="radio" name="fruit" value="banana"> 바나나
<input type="radio" name="fruit" value="orange"> 오렌지
<input type="radio" name="fruit" value="strawberry"> 딸기

코드 실행

체크박스 - checkbox

<input> 태그의 type 속성값을 “checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.

체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다.
이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.

<input type="checkbox" name="fruit" value="apple" checked> 사과
<input type="checkbox" name="fruit" value="banana"> 바나나
<input type="checkbox" name="fruit" value="orange"> 오렌지
<input type="checkbox" name="fruit" value="strawberry"> 딸기

코드 실행

파일 선택 - file

<input> 태그의 type 속성값을 “file"로 설정하면, 파일을 전송할 수 있다.

<input type="file" name="imageFile" accept="image/*">

코드 실행

숫자 입력(number)

<input> 태그의 type 속성값을 “number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다.

number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.
브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.

<input type="number" name="num" min="1" max="9">

코드 실행

number 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

입력 범위 지정(range)

<input> 태그의 type 속성값을 “range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.

0 <input type="range" name="favnum" min="1" max="9"> 9

코드 실행

range 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

색상 입력(color)

<input> 태그의 type 속성값을 “color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해준다.

선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다.
브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여준다.

<input type="color" name="color" value="#FF0000">

코드 실행

color 타입은 사파리 9.1과 그 이전 버전, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

날짜 입력(date)

<input> 태그의 type 속성값을 “date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여준다.

<input type="date" name="day1">

또한, min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있다.

<input type="date" name="day2" min="1977-01-01" max="2020-12-31">

코드 실행

date 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

시간 입력(time)

<input> 태그의 type 속성값을 “time"로 설정하면, input 요소는 사용자가 시간을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 시간을 선택하기 위한 도구를 보여줍니다.

<input type="time" name="time">

코드 실행

time 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.

날짜와 시간 입력(datetime-local)

<input> 태그의 type 속성값을 “datetime-local"로 설정하면, input 요소는 사용자가 날짜와 시간을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구를 보여준다.

<input type="datetime-local" name="time">

코드 실행

datetime-local 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.

연도와 월 입력(month)

<input> 태그의 type 속성값을 “month"로 설정하면, input 요소는 사용자가 연도와 월을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더를 보여준다.

<input type="month" name="month">

코드 실행

month 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

연도와 주 입력(week)

<input> 태그의 type 속성값을 “week"로 설정하면, input 요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더를 보여준다.

<input type="week" name="week">

코드 실행

week 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

이메일 입력(email)

<input> 태그의 type 속성값을 “email"로 설정하면, input 요소는 사용자가 email 주소를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 전송할 때 입력한 email 주소가 유효한 email 주소인지 자동으로 검사한다.

<input type="email" name="email">

코드 실행

email 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

URL 주소 입력(url)

<input> 태그의 type 속성값을 “url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사한다.

<input type="url" name="url">

코드 실행

url 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

전화번호 입력(tel)

<input> 태그의 type 속성값을 “tel"로 설정하면, input 요소는 사용자가 전화번호를 입력할 수 있도록 해준다.

<input type="tel" name="tel">

코드 실행

tel 타입은 사파리 8에서만 지원한다.

검색어 입력(search)

<input> 태그의 type 속성값을 “search"로 설정하면, input 요소는 사용자가 검색어를 입력할 수 있도록 해준다. 이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작한다.

search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시가 생기는 점이다.

<input type="search" name="keyword">

코드 실행

1.5.3 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 입력(input) 요소 속성(attributes)

입력(input) 요소 속성(attributes)

input 요소는 다양한 속성을 가지고 있다.
input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있다.
HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같다.

  1. value
  2. readonly
  3. disabled
  4. maxlength
  5. size

value 속성

value 속성은 input 요소의 입력 필드(input field)에 표시되는 초깃값을 설정한다.

사용자명: <input type="text" name="name" value="개발곰">

코드 실행

readonly 속성

readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정한다.
disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 값이 서버로 전송된다는 점이다.

사용자명: <input type="text" name="name" value="개발곰" readonly>

코드 실행

disabled 속성

disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정한다.
disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없다.
또한, readonly 속성과는 달리 전송 버튼(submit)을 눌러도 초깃값이 서버로 전송되지 않는다.

사용자명: <input type="text" name="name" value="개발곰" disabled>

코드 실행

maxlength 속성

maxlength 속성은 입력 필드에 입력할 수 있는 최대 문자수(length)를 설정한다.

사용자명: <input type="text" name="name" value="개발곰" maxlength="10">

코드 실행

size 속성

size 속성은 입력 필드에 보여지는 input 요소의 크기(size)를 설정한다.
maxlength 속성과는 달리 입력 필드가 한 번에 보여줄 수 있는 문자수만을 의미한다.
따라서 입력될 수 있는 최대 문자수는 maxlength 속성값에 따라 달라지며, size 속성과는 전혀 무관한다.

사용자명: <input type="text" name="name" value="개발곰" size="10">

코드 실행

1.5.4 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 선택 입력(select)

선택 입력 select 요소

select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력 받을 수 있다.
콤보 박스라고도 하며, 풀다운 메뉴(pull-down menus)라고도 한다.

option 요소는 드롭다운 리스트에 선택할 수 있는 각각의 옵션을 명시한다.

좋아하는 과일은?
<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana" selected>바나나</option>
  <option value="orange">오렌지</option>
  <option value="strawberry">딸기</option>
</select>

코드 실행

selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

option 요소

option 요소는 여러 항목 중에 선택 가능한 항목이다.

option 요소에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 다르다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만, <option> 태그의 경우는 이 option이 선택된 경우에 전송되는 값을 지정하는 것이다.

optgroup 요소

optgroup 요소는 HTML 4 버전에서 새로 만들어진 태그로 옵션을 그룹화할 수 있다.
대부분의 웹브라우저에서 지원하고 있다.

당신의 취미는?
<select name="hobby">
  <option value="독서">독서</option>
  <optgroup label="스포츠">
    <option value="야구">야구</option>
    <option value="축구">축구</option>
  </optgroup>
  <option value="음악감상">음악감상</option>
</select>

코드 실행

1.5.5 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 문장 입력(textarea)

문장 입력 textarea 요소

input 태그 요소가 한줄의 텍스트만 입력지만, textarea 태그 요소는 여러 줄의 텍스트를 입력받을 수 있다.

<textarea name="content" rows="5" cols="30"></textarea>

너비와 높이를 지정하기 위해서 rows와 cols 속성이 사용된다.

기본값은 <textarea></textarea> 태그 사이에 적어주면 된다.
기본값이 입력되면 처음 화면이 표시되어 있을 때 입력이 되어 있는 것을 확인 할 수 있다.

<textarea name="content" rows="5" cols="30">내용을 입력하세요.</textarea>

코드 실행

1.5.6 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 버튼(button)

버튼 button 요소

button 요소는 사용자가 누를 수 있는 버튼을 표시한다.

<button type="button" onclick="alert('버튼을 눌렸습니다.')">
    버튼을 눌러주세요.
</button>

코드 실행

버튼은< input> 태그에 type='button'으로도 표현 가능하다.

1.5.7 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 필드셋(fieldset)

필드셋 fieldset 요소

fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다. legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 표시한다.

<form>
  <fieldset>
    <legend>로그인 인증</legend>
    <p>사용자명 : <input type="text" name="username"></p>
    <p>비밀번호 : <input type="password" name="password"></p>
    <button type="button">로그인</button>
  </fieldset>
</form>

코드 실행

1.5.8 - HTML 입문 | HTML 입력 양식 (Forms) | HTML 라벨(label)

라벨(label) 요소

label 요소는 사용자가 input text, checkbox, radio button의등을 좀 더 쉽게 선택할 수 있도록 도와준다.
label 요소를 클릭하면 input text의 경우에는 자동으로 focus가 이동하고 checkbox, radio button의 경우는 자동으로 선택된다.
label의 for 속성의 이름과 폼요소의 id 값이 일치하게 아래와 같이 작성하면 된다.

<label for="html">HTML</label> <input type="checkbox" name="html" id="html">
<label for="css">CSS</label> <input type="checkbox" name="css" id="css">

코드 실행

1.6 - HTML 입문 | HTML 확장

1.6.1 - HTML 입문 | HTML 확장 | HTML 스타일시트(CSS)

CSS란?

CSS란 Cascading Style Sheets의 약자이다.
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보일지에 대한 정의하는 언어이다.

HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.

CSS 적용 방법

HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다.

  • 인라인 스타일(Inline style)
  • 내부 스타일 시트(Internal style sheet)
  • 외부 스타일 시트(External style sheet)

인라인 스타일(Inline style)

인라인 CSS이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.

<p style="color:green; text-decoration:underline">이 글은 녹색이고 밑줄이 있습니다.</p>

코드 실행

내부 스타일 시트(Internal style sheet)

내부 CSS를 이용한 방법은 HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 스타일을 지정한다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.

<style>
    body { background-color: lightyellow; }
    p { color: red; text-decoration: underline; }
</style>

코드 실행

외부 스타일 시트(External style sheet)

외부 CSS를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
스타일을 적용할 모든 웹 페이지의 <head> 태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함하면 된다.

<link rel="stylesheet" href="/external_style_sheet.css">

코드 실행

CSS 적용의 우선순위

위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다.

  1. 인라인 CSS (Inline CSS)
  2. 내부 / 외부 CSS
  3. 웹 브라우저 기본 스타일

예를 들어, 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다. 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.

이보다 자세한 내용은 CSS 선택자 를 참조하길 바란다.

CSS 선택자(selector)

스타일을 적용할 HTML 요소를 선택하는데 사용하는 대표적인 선택자는 다음과 같다.

  • HTML 요소 선택자
  • 아이디(id) 선택자
  • 클래스(class) 선택자

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 태그명을 명시하여 선택할 수 있다.

p { color: red; font-size: 14px; }

위 예제에서는 태그가 <p>인 모든 요소에 적용된다.

아이디(id) 선택자

아이디 선택자는 CSS를 적용할 대상의 아이디가 지정된 요소를 선택할 때 사용한다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디에 해당하는 요소만을 선택해 준다.

이때 선택하려는 속성값 앞에 샵(#)를 추가해서 작성한다.

<style>
  #text { color: blue; font-weight: 600; }
</style>
...
<p id="text">이 문장은 파란색이고 두껍습니다.</p>

위 예제에서는 id가 text인 모든 요소에 적용된다.

HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 동일한 아이디를 사용해도 별 문제없이 동작은 한다.
하지만, 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생할 수도 있다. 따라서, 되도록이면 하나의 웹 페이지에 속하는 모든 요소의 아이디를 다르게 하거나 클래스를 사용하는 것이 좋다.

클래스(class) 선택자

클래스 선택자는 어떠한 그룹의 여러 요소를 한 번에 선택할 때 사용한다.
이러한 어떠한 그룹을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 준다.

이때 선택하려는 속성값 앞에 마침표(.)를 추가해서 작성한다.

<style>
  .text { color: lime; text-decoration: overline; }
</style>
...
<p class="text">이 문장은 파란색이고 두껍습니다.</p>
<p>이 문장은 스타일 스타일이 적용되지 않았습니다.</p>
<p class="texts">이 문장도 파란색이고 두껍습니다.</p>

위 예제에서는 class가 text인 모든 요소에 적용된다.

1.6.2 - HTML 입문 | HTML 확장 | HTML 자바스크립트(JavaScript)

자바스크립트란?

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.

script 요소

script 요소는 해당 웹 페이지에 사용할 스크립트(script)를 정의하기 위해 사용한다.
script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시하면 된다.

<script>
    document.getElementById("text").innerHTML = "이것이 자바스크립트다!";
</script>

코드 실행

JavaScript로 HTML 스타일도 변경할 수 있다.

document.getElementById("text").style.fontSize = "25px";
document.getElementById("text").style.color = "red";
document.getElementById("text").style.backgroundColor = "yellow";

코드 실행

noscript 요소

noscript 요소는 스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정할 때 사용한다. noscript 요소는 일반적인 HTML 문서의 body 요소 내부에 나올 수 있는 모든 요소를 포함할 수 있다.

<script>
    document.getElementById("text").innerHTML = "이것이 자바스크립트다.";
</script>
...
<noscript>이 웹 브라우저는 자바스크립트를 지원하지 않습니다!</noscript>

코드 실행

외부 JavaScript

외부 JavaScript를 이용한 방법은 HTML과 JavaScript를 분리하여 관리할수 있게 해준다.
자바 스크립트를 적용할 모든 웹 페이지의 <head> 태그 내에 <script>태그를 사용하여 자바스크립트를 포함하면 된다.
최근에는 웹 페이지 로딩 문제로 body에 맨 아래에 넣는 경우도 있다.

<script type="text/javascript" src="/external_javascipt.js"></script>

참조

1.6.3 - HTML 입문 | HTML 확장 | HTML과 XHTML

XHTML(EXtensible HTML)

XHTML은 HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가진다.

좀 더 엄격한 버전인 XHTML을 사용하는 이유

최근 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있다.
따라서, 부정확한 HTML 문법을 지원하기에 필요한 자원이 부족한 환경이 점차 생겨나고 있다.
XHTML 문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다.

XHTML에서의 변경 사항

문서의 구조적 측면

  • XHTML DOCTYPE을 반드시 명시해야 한다.
  • <html> 태그의 xmlns 속성을 반드시 명시해야 한다.
  • <html>, <head>, <title>, <body>태그를 반드시 사용해야 한다.

문서의 요소적 측면

  • 모든 태그는 반드시 닫혀야 한다.
  • 모든 태그는 순서대로 닫혀야 한다.
  • 모든 요소는 반드시 소문자로 사용되어야 한다.
  • XHTML 문서는 반드시 하나의 root 요소를 포함해야 한다.

문서의 속성적 측면

  • 속성 이름은 반드시 소문자로 사용되어야 한다.
  • 속성값은 반드시 따옴표로 감싸야 한다.
  • 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 한다.

HTML과 XHTML의 차이점

다음 예제들은 HTML과 XHTML의 차이점을 보여주고 있다.
XHTML에서 작성되지 말아야 할 오류이다.

  • 종료 태그가 없는 빈 태그(empty tag)는 반드시 끝에 공백과 함께 슬래시(/)를 붙여야 한다.
HTML  : <br>
XHTML : <br />
  • 비어있지 않은 요소는 반드시 종료 태그를 가져야 한다.
HTML  : <p>첫 번째 문장</p><p>두 번째 문장
XHTML : <p>첫 번째 문장</p><p>두 번째 문장</p>
  • 태그 요소들은 반드시 열린 순서대로 닫혀야 한다.
HTML  : <em><strong>This is some text.</em></strong>
XHTML : <em><strong>This is some text.</strong></em>
  • 이미지 태그에는 반드시 alt 속성이 기술되어야 한다.
HTML  : <img src="devkuma_logo.png" />
XHTML : <img src="devkuma_logo.png" alt="데브쿠마" />
  • 모든 텍스트(text)는 반드시 태그로 감싸야 한다.
HTML  : <body>본문에 사용되는 텍스트 단락</body>
XHTML : <body><p>본문에 사용되는 텍스트 단락</p></body>
  • 속성 값은 반드시 따옴표로 감싸야 한다.
HTML  : <td rowspan=3>
XHTML : <td rowspan="3">
  • 태그나 속성은 반드시 소문자만 사용해야 한다.
HTML  : <BODY><P>태그과 속성은</P></BODY>
XHTML : <body><p>반드시, 소문자만을 사용해야 한다.</p></body>
  • 속성값 생략이 되지 않아, 반드시 속성값을 명시해야 한다.
HTML  : <textarea readonly>읽기만 가능합니다.</textarea>
XHTML : <textarea readonly="readonly">읽기만 가능합니다.</textarea>

위에서 살펴본 모든 HTML 예제는 XHTML 기준에는 맞지 않지만, HTML에서는 모두 정상적으로 동작한다.

HTML 문서를 XHTML 문서로 변환하는 방법

  1. 첫줄에 다음 코드를 추가한다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
    <html xmlns="http://www.w3.org/2018/xhtml">
  2. xmlns 속성을 추가한다.
  3. 모든 태그 이름을 소문자로 바꿔준다.
  4. 모든 빈 태그를 닫아준다.
  5. 모든 속성 이름을 소문자로 바꿔준다.
  6. 모든 속성값을 따옴표로 둘러쌓아 준다.

참조

1.7 - HTML 입문 | HTML5 시작

1.7.1 - HTML 입문 | HTML5 시작 | HTML5 개요

HTML5 개요

HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 최신 표준 권고안이자 핵심 마크업 언어이다.
HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 최신 표준 권고안이자 차세대 표준이다.

HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처한다.
따라서 다음과 같은 사항들을 모두 문법적으로 허용한다.

  • 태그명에 대문자 사용 가능
  • 속성값에 따옴표 생략 가능
  • 속성값 생략 가능
  • 빈 태그의 종료 태그(/) 생략 가능

HTML5에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 가면 확인할 수 있다.

W3C HTML5 : W3C Recommendation, 14 December 2017

HTML5 기본 구조

HTML5에서는 DOCTYPE 선언이 매우 간단해졌다.

<!DOCTYPE html>

또한, 문자셋(character set)의 선언도 매우 간단해졌다.
HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8이다.

HTML5 이전

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5 이후

<meta charset="UTF-8">

참조

1.7.2 - HTML 입문 | HTML5 시작 | HTML5 변경사항

HTML5에 추가된 요소 및 타입

  • 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
  • 멀티미디어 요소 : <video>, <audio>
  • 그래픽 요소 : <canvas>, <svg>
  • input 요소의 타입 : number, date, time, calendar, range

HTML5에 추가된 자바스크립트 API

  • Geolocation
  • Drag and Drop
  • Web Storage
  • Application Cache
  • Web Worker
  • Server Sent Events

HTML5에 삭제된 기존 요소

삭제된 기존 요소 설명
<acronym> <abbr> 태그로 대체
<applet> <object> 태그로 대체
<basefont> CSS로 적용
<big> CSS로 적용
<center> CSS로 적용
<dir> <ul> 태그로 대체
<font> CSS로 적용
<frame> 삭제
<frameset> 삭제
<noframes> 삭제
<strike> CSS로 적용
<tt> CSS로 적용

 

HTML5에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 가면 확인할 수 있다.

W3C Recommendation, 14 December 2017

웹 브라우저의 HTML5 지원

현재 최신 버전의 주요 웹 브라우저들은 모두 HTML5를 지원하고 있다.
HTML5의 새로운 요소들이 구형 버전의 웹 브라우저에서는 제대로 표현되지 못할 수도 있다.
따라서, 구형 버전의 웹 브라우저가 알지 못하는 새로운 HTML 요소를 정보를 알려줘야 한다.

다음 예제는 웹 브라우저가 알지 못하는 새로운 HTML 요소를 어떻게 다뤄야 하는지 알려주는 방법이다.

<script>document.createElement("mytag")</script>
<style>
  mytag { background-color: #fff2cc; font-size: 20px; font-weight: 600} 
</style>
<mytag>여기서만 사용할 수 있는 태그입니다.</mytag>

코드 실행

위와 같은 방법을 사용하면 모든 새로운 요소를 웹 브라우저에 표현할 수 있다.

익스플로러 8 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않는다.
따라서, 위와 같은 방식이 아닌 HTML5Shiv을 사용해야 한다.

HTML5Shiv

HTML5Shiv은 익스플로러 8과 그 이전 버전에서도 HTML5의 새로운 요소들을 자유롭게 사용할 수 있도록 하기 위해 개발된 라이브러리이다. Sjoerd Visscher에 의해 개발되었다.

GitHub에 가면 자세한 설명과 다운로드가 가능하다.
https://github.com/afarkas/html5shiv

적용 방법은 아래와 같이 라이브러리 파일을 주석 코드과 함께 <head>태그 내에 삽입하면 된다. 그러면 익스플로러 8(IE6~9)과 그 이전 버전의 브라우저만이 이 자바 스크립트 파일을 읽고 적용할 수 있게 된다.

<head>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

참조

1.7.3 - HTML 입문 | HTML5 시작 | HTML5 시멘틱(semantic) 요소

HTML5 시멘틱(Semantic) 요소

시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.

시멘틱 요소가 아닌 div, span 요소 등은 해당 요소가 무슨 내용인지는 내부 코드를 봐야 알 수 있다.
그에 비해, 시멘틱 요소인 form, table, img 요소는 코드를 보지 않아도 해당 요소가 이름만 봐도 바로 알 수가 있다.

HTML5에 추가된 시멘틱 요소

시멘틱 요소 설명
<header> HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 나타낼 때 사용한다.
<nav> HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 나타낼 때 사용한다.
<main> HTML 문서의 주요 콘텐츠(content)를 정의함.
<section> HTML 문서에서 섹션(section) 부분으로 내용의 컨텐츠를 나타낼 때 사용한다.
<article> HTML 문서에서 내용의 컨텐츠 중에 독립적인 하나의 글(article) 부분을 나타낼 때 사용한다.
<aside> HTML 문서에서 페이지 부분 이외의 컨텐츠(content)를 나타낼 때 사용한다.
<figure> HTML 문서에서 그래픽과 비디오 등의 독립적인 컨텐츠(content)를 나타낼 때 사용한다.
<figcaption> figure 요소를 위한 캡션을 나타낼 때 사용한다.
<footer> HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 나타낼 때 사용한다.
<bdi> 기본 출력방향과는 다른 방향으로 출력되는 텍스트를 나타낼 때 사용한다.
<mark> 하이라이팅된 텍스트를 정의함.
<details> 사용자가 보거나 숨길 수 있는 추가적인 설명문을 나타낼 때 사용한다.
<summary> details 요소에 나타날 내용을 정의함.
<dialog> 다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함.
<menuitem> 사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 나타낼 때 사용한다.
<meter> 정해진 범위 내의 스칼라 치수를 나타낼 때 사용한다.
<progress> 작업에 대한 진행 정도를 나타낼 때 사용한다.
<ruby> 루비(ruby) 문자를 나타낼 때 사용한다. 루비란? 임의의 문자(보통은 한자)에 대해 읽는 법을 알려주는 문자를 말한다.
<rt> 본문 위에 나타날 문자를 나타낼 때 사용한다.
<rp> 루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 나타낼 때 사용한다.
<time> 날짜와 시간을 나타낼 때 사용한다.
<wbr> br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 나타낼 때 사용한다.

HTML5에 추가된 주요 시멘틱 요소

HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같다.

  1. header 요소
  2. nav 요소
  3. main 요소
  4. section 요소
  5. article 요소
  6. figure와 figcaption 요소
  7. footer 요소

header 요소

header 요소는 HTML 페이지나 섹션(section) 부분에 대한 헤더(header)를 정의한다.
헤더(header)란? 일반적으로 어떤 것에 앞에 나오는 것으로서, 각 페이지의 맨 위에 출력되는 텍스트나 이미지등의 조합이다. 한 페이지 내에 여러 개의 header 요소가 존재할 수 있다.

<header>
    <h1>전체 문서에 대한 헤더(header)입니다.</h1>
</header>
...
<section>
    <header>
        <h2>섹션 부분에 대한 헤더(header)입니다.</h2>
        <p>헤더 부분에 들어간 단락입니다.</p>
    </header>
</section>

nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의한다.
nav 요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav 요소에 포함되는 것은 아니다.

<nav>
    <a href="/html/html5_element_semantic">의미 요소</a> |
    <a href="/htmlhtml5_element_form/">Forms 요소</a> |
    <a href="/html/html5_element_inputtype">Input 요소</a>
</nav>
...
<p>이 링크는 nav 요소에 포함되지 않는 <a href="/html/html5_element_inputattr">Input 속성</a>에 관한 링크에요!</p>

section 요소

section 요소는 HTML 문서에서 섹션(section) 부분을 정의한다.
섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미한다.

<section>
    <h2>섹션(section) 영역입니다.</h2>
    <p>Lorem ipsum</p>
</section>

article 요소

article 요소는 HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의한다. article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 한다.

<article>
    <h2>기사(article) 영역입니다.</h2>
    <p>Lorem ipsum</p>
</article>

위의 두 예제를 살펴보면 section 요소와 article 요소 간의 별다른 차이점을 발견할 수 없을 것이다.
실제로도 두 요소 간의 쓰임에 있어 큰 차이를 보이지는 않는다.
대체로 section 요소는 HTML 문서의 전체적인 내용에 포함되며, article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용하면 된다.

figure 요소와 figcaption 요소

책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션(caption)이 위치하게 된다.
HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공하고 있다.

figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의할 때 사용한다.
figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용한다.

<figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
    <figcaption>[ 그림 1. 위의 그림은 이쁜 꽃이네요! ]</figcaption>
</figure>

footer 요소는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의한다.
HTML 문서의 푸터(footer)에는 일반적으로 사이트의 작성자나 그에 따른 저작권 정보, 연락처 등을 명시한다.
또한, 한 문서 내에 여러 개의 footer 요소가 존재할 수 있다.

예제

<footer>
    <p>전체 문서에 대한 푸터(footer)입니다.</p>
    <p>Copyright 2016. 지은이 all rights reserved.</p>
    <p>연락처 : 02-1234-5678</p>
</footer>

시멘틱 요소는 왜 사용하는가?

HTML4를 사용하여 개발자는 요소 스타일에 고유 한 ID / 클래스 이름을 사용했었다. header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, 기타 등등

시멘틱 요소(Semantic Elements)가 추가되기 전인 HTML4까지는 div 요소를 사용하여 레이아웃을 작성하는 경우가 많았다.

<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>

이로 인해 검색 엔진이 올바른 웹 페이지 컨텐츠를 식별 할 수 없었다.
새로운 HTML5 요소 (<header>, <footer> <nav> <section>, <article>)를 사용하면 이 작업이 더욱 쉬워질 것이다.
W3C에 따르면 시맨틱 웹 (Semantic Web)은 응용 프로그램, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 할 수 있다.

1.7.4 - HTML 입문 | HTML5 시작 | HTML5 입력(input) 요소 타입(type)

HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다.

  1. 숫자 입력(number)
  2. 입력 범위 지정(range)
  3. 색상 입력(color)
  4. 날짜 입력(date)
  5. 시간 입력(time)
  6. 날짜와 시간 입력(datetime-local)
  7. 연도와 월 입력(month)
  8. 연도와 주 입력(week)
  9. 이메일 입력(email)
  10. URL 주소 입력(url)
  11. 전화번호 입력(tel)
  12. 검색어 입력(search)

숫자 입력(number)

<input> 태그의 type 속성값을 “number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다.

number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.
브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.

<input type="number" name="num" min="1" max="9">

코드 실행

number 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

입력 범위 지정(range)

<input> 태그의 type 속성값을 “range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.

0 <input type="range" name="favnum" min="1" max="9"> 9

코드 실행

range 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

색상 입력(color)

<input> 태그의 type 속성값을 “color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해준다.

선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다.
브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여준다.

<input type="color" name="color" value="#FF0000">

코드 실행

color 타입은 사파리 9.1과 그 이전 버전, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

날짜 입력(date)

<input> 태그의 type 속성값을 “date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여준다.

<input type="date" name="day1">

또한, min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있다.

<input type="date" name="day2" min="1977-01-01" max="2020-12-31">

코드 실행

date 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

시간 입력(time)

<input> 태그의 type 속성값을 “time"로 설정하면, input 요소는 사용자가 시간을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 시간을 선택하기 위한 도구를 보여줍니다.

<input type="time" name="time">

코드 실행

time 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.

날짜와 시간 입력(datetime-local)

<input> 태그의 type 속성값을 “datetime-local"로 설정하면, input 요소는 사용자가 날짜와 시간을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구를 보여준다.

<input type="datetime-local" name="time">

코드 실행

datetime-local 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.

연도와 월 입력(month)

<input> 태그의 type 속성값을 “month"로 설정하면, input 요소는 사용자가 연도와 월을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더를 보여준다.

<input type="month" name="month">

코드 실행

month 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

연도와 주 입력(week)

<input> 태그의 type 속성값을 “week"로 설정하면, input 요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더를 보여준다.

<input type="week" name="week">

코드 실행

week 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

이메일 입력(email)

<input> 태그의 type 속성값을 “email"로 설정하면, input 요소는 사용자가 email 주소를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 전송할 때 입력한 email 주소가 유효한 email 주소인지 자동으로 검사한다.

<input type="email" name="email">

코드 실행

email 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

URL 주소 입력(url)

<input> 태그의 type 속성값을 “url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사한다.

<input type="url" name="url">

코드 실행

url 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

전화번호 입력(tel)

<input> 태그의 type 속성값을 “tel"로 설정하면, input 요소는 사용자가 전화번호를 입력할 수 있도록 해준다.

<input type="tel" name="tel">

코드 실행

tel 타입은 사파리 8에서만 지원한다.

검색어 입력(search)

<input> 태그의 type 속성값을 “search"로 설정하면, input 요소는 사용자가 검색어를 입력할 수 있도록 해준다. 이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작한다.

search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시가 생기는 점이다.

<input type="search" name="keyword">

코드 실행

1.7.5 - HTML 입문 | HTML5 시작 | HTML5 입력(input) 요소 속성(attributes)

HTML5 form 요소 속성

HTML5에서 새롭게 추가된 form 요소의 속성은 다음과 같다.

  1. autocomplete
  2. novalidate

HTML5 input 요소 속성

HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같다.

  1. autocomplete
  2. autofocus
  3. form
  4. formaction
  5. formenctype
  6. formmethod
  7. formnovalidate
  8. formtarget
  9. height and width
  10. list
  11. min and max
  12. multiple
  13. pattern
  14. placeholder
  15. required
  16. step

autocomplete 속성

autocomplete 속성은 form 요소나 input 요소에 입력된 정보를 자동 저장할지에 대한 여부를 명시한다.
이 속성의 값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를 자동으로 저장한다.
그 이 후에는 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해 준다.

이 속성은 아래와 같은 input 타입에서만 사용할 수 있다.

  • text, search, url, tel, email, password, datepickers, range, color
<form action="/" autocomplete="on">
  이름 : <input type="text" name="name"><br>
  이메일 : <input type="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

코드 실행

novalidate 속성

novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성이다.
이 속성은 입력한 정보(data)를 전송할 때, 그 정보가 유효성 검사에 대한 여부를 명시한다. url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 기입하면 유효성 검사를 하지 않는다.
즉, 이 속성이 사용된 form 요소로 전달받은 정보(data)는 반드시 서버 측에서 따로 유효성 검사를 실시해야 한다.

<form action="/" novalidate>
  이메일 : <input type="email" name="email">
  <input type="submit">
</form>

코드 실행

novalidate 속성은 Internet Explorer 9 이전 버전, Safari 10 버전에서 지원되지 않는다.

autofocus 속성

autofocus 속성은 웹 페이지가 로드(load)될 때, 속성이 적용된 input 요소에 자동으로 포커스(focus)가 가도록 해준다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password" autofocus><br><br>
</form>

autofocus 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

form 속성

form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해 준다.
포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있다.

<form action="/examples/media/request.php" id="user">
    사용자 : <input type="text" name="username"><br><br>
</form>
...
비밀번호 : <input type="password" name="password" form="user">

form 속성은 익스플로러에서 지원하지 않는다.

formaction 속성

formaction 속성은 입력한 정보(data)를 전송할 때 정보가 전달될 서버 측 파일을 명시한다.
즉, formaction 속성은 form 요소의 action 속성을 덮어쓰게 된다.
이 속성을 사용하면 입력된 정보를 넘겨줄 서버 측 파일을 input 요소에서 바꿀 수 있게 된다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password"><br><br>
    <input type="submit" value="관리자 권한으로 전송" formaction="/examples/media/request_admin.php"><br>
</form>

formaction 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

formenctype 속성

formenctype 속성은 입력한 정보(data)를 전송할 때 암호화하는 방법을 명시한다.
즉, formaction 속성은 form 요소의 enctype 속성을 덮어쓰게 된다.

formenctype 속성은 form 요소의 method 속성이 post일 때만 적용된다.
이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request_enctype.php" method="post">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="암호화하여 전송" formenctype="multipart/form-data"><br>
</form>

formenctype 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

formmethod 속성

formmethod 속성은 입력한 정보(data)를 전송할 때 사용하는 http 메소드(method)를 명시한다.
즉, formmethod 속성은 form 요소의 method 속성을 덮어쓰게 된다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php" method="get">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="post 방식으로 전송" formmethod="post"><br>
</form>

formmethod 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

formnovalidate 속성

formnovalidate 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
즉, formnovalidate 속성은 form 요소의 novalidate 속성을 덮어쓰게 된다.

이 속성은 오직 submit 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 : <input type="url" name="url"><br><br>
    <input type="submit" value="novalidate 방식으로 전송" formnovalidate><br>
</form>

formnovalidate 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

formtarget 속성

formtarget 속성은 입력한 정보(data)를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시합니다.
즉, formtarget 속성은 form 요소의 target 속성을 덮어쓰게 됩니다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있습니다.


<form action="/examples/media/request.php">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="응답 화면을 새창에 표시" formtarget="_blank"><br>
</form>

formtarget 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

height와 width 속성

<input>태그의 type 속성이 “image"일 경우에는 height 속성과 width 속성을 사용하여 이미지의 높이와 너비를 명시할 수 있습니다.
따라서 이 속성은 오직 image 타입에서만 사용할 수 있습니다.
또한, 이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 x와 y라는 이름으로 같이 전송된다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password" autofocus><br><br>
    <input type="image" src="/examples/images/img_penguin.png" alt="전송" height="26" width="26">
    그림을 클릭하시면 전송됩니다!
</form>

list 속성

list 속성은 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있다.
input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결이 된다.

<form action="/examples/media/request.php">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
        </datalist>
</form>

list 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

min과 max 속성

min속성과 max 속성은 input 요소에 입력할 수 있는 최솟값과 최댓값을 명시한다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

  • number, range, date, time, datetime-local, month, week 타입
<form action="/examples/media/request.php">
    <input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
    <input type="submit" value="전송">
</form>

min과 max 속성은 파이어폭스, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

multiple 속성

multiple 속성은 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용한다.

이 속성은 email 타입과 file 타입에서만 사용할 수 있습니다.

<form action="/examples/media/request.php">
    <input type="file" name="uploadfile" multiple><br><br>
    <input type="submit" value="전송">
</form>

multiple 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

pattern 속성

pattern 속성은 input 요소에 입력된 값을 검사하기 위한 정규 표현식(regular expression)을 명시한다.
정규 표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 의미한다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

  • text, password, email, tel, url 타입
<form action="/examples/media/request.php">
    <input type="email" name="email"
        pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
</form>

위의 예제에서 사용된 정규 표현식의 의미는 다음과 같다.

  1. [a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음.
  2. [@] : ‘@’ 문자만이 나와야 함.
  3. [.] : ‘.’ 문자만이 나와야 함.
  4. [.]* : ‘.’ 문자가 나와도 되고 나오지 않아도 됨.
  5. [a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨.

따라서 위와 같은 정규 표현식을 사용하면, 해당 문자열이 이메일 양식에 맞는 문자열인지를 확인할 수 있다.

pattern 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

placeholder 속성

placeholder 속성은 input 요소에 입력되어야 할 값에 대한 힌트를 제공한다. 이러한 힌트는 예시가 될 수도 있고, 입력 형식에 대한 설명이 될 수도 있다. placeholder 속성값은 해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않는다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있습니다.

  • text, password, email, tel, url, search 타입
<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username" placeholder="홍길동"><br>
    비밀번호 : <input type="password" name="password" placeholder="1234"><br><br>
</form>

placeholder 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

required 속성

required 속성은 반드시 입력되어야 할 필수 input 요소를 명시한다. 이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송(submit)할 수 있다.

<form action="/examples/media/request.php">
    이름 : <input type="text" name="name" required> (이름은 반드시 입력해야 해요!)<br>
    나이 : <input type="number" name="age" min="1" max="99"><br><br>
</form>

required 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

step 속성

step 속성은 input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시한다.
예를 들어, step 속성값이 2이면, 입력이 허용되는 숫자는 …, -4, -2, 0, 2, 4,… 가 된다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

  • number, range, date, time, datetime-local, month, week 타입
<form action="/examples/media/request.php">
    여러분이 가장 좋아하는 숫자는 몇인가요? (단, -30부터 30사이에서 5단위로 골라주세요!)<br><br>
    <input type="number" name="favnum" min="-30" max="30" step="5"><br><br>
</form>

step 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

1.7.6 - HTML 입문 | HTML5 시작 | HTML5 기타 요소

HTML5에서 추가된 다양한 타입의 input 요소

HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같다.

요소 설명
<datalist> input 요소에 대해 미리 정의된 옵션 리스트를 명시함.
<keygen> form 요소 안에 두 개의 key를 만들어주는 생성기를 명시함.
<output> 스크립트 등으로 실행된 계산의 결과를 바로 나타냄.

datalist 요소

datalist 요소는 input 요소에 미리 정의된 옵션 목록을 제공해 주는 요소이다.
사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 선택해도 된다.

작성하는 방법은 input 요소의 list 속성값과 datalist 요소의 id 속성값과 동일해야 연결이 된다.

좋아하는 과일은?
<input list="fruits" name="fruit">
<datalist id="fruits">
   <option value="apple">
   <option value="strawberry">
   <option value="banana">
   <option value="grape">
</datalist>

코드 실행

datalist 요소는 익스플로러 10 이전 버전에서는 지원하지 않는다.

keygen 요소

keygen 요소는 사용자가 입력한 데이터를 공개키 암호 방식의 키를 생성하여 폼을 전송한다. 폼 전송시 비밀 키와 공개 키가 동시에 생성되어 비밀 키는 클라이언트 측에, 공개 키는 서버 측에 전송된다.

이는 주로 사용자가 인증할 시에 사용할 수 있다.

<form>
  아래 값을 입력하고 전송 버튼을 누르면 암호화하여 전송하게 됩니다.
  <input type="text" name="username">
  <keygen name="security">
  <input type="submit" value="전송"> 
</form>

keygen 요소는 익스플로러에서 지원하지 않는다.

output 요소

output 요소는 스크립트(script)에 의해 실행된 계산의 결과를 바로 표시해준다

<form oninput="total.value=parseInt(val1.value) + parseInt(val2.value)">
  0<input type="range" id="val2" value="50" min="0" max="100">100
  + <input type="number" id="val1" value="20">
  = <output name="total" for="val1 val2"></output>
</form>

코드 실행

for 속성에는 해당 결과와 관련 있는 요소의 id를 공백으로 구분으로 나열한다.

output 요소는 익스플로러에서 지원하지 않는다.

1.8 - HTML 입문 | HTML5 멀티미디어

HTML5에서 추가된 멀티미디어 요소

멀티미디어 요소 설명
<audio> 오디오와 음악 등 오디오 파일을 명시함.
<embed> 플러그인(plug-in)과 같은?HTML 문서에 삽입할?객체(object)를 명시할 때 사용한다.
<source> 멀티미디어 요소의 원본에 대한 파일 형식 및 파일 주소를 여러 개 명시할 때 사용한다.
<track> 비디오 플레이어에 대한 텍스트 자막을 명시할 때 사용한다.
<video> 비디오와 영화 등 비디오 파일을 명시할 때 사용한다.

1.8.1 - HTML 입문 | HTML5 멀티미디어 | 멀티미디어 파일 형식

멀티미디어 파일 형식

HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔다.
하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었다.

웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단한다.
만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것이다.

비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장된다.
이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있다.

비디오(video) 파일 형식

대표적인 비디오 파일 형식은 다음과 같다.

파일 형식 파일 확장자 설명
MPEG .mpg .mpeg Moving Picture Experts Group에 의해 개발되었으며, 변환 코덱을 이용하는 손실 압축 방식을 사용함.
MP4 .mp4 Moving Picture Experts Group에 의해 개발되었으며, 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어서 인터넷을 통한 스트리밍에 자주 활용됨.
OGV .ogg Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식임.
WebM .webm 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식으로, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용하는 멀티미디어 파일 형식임.
AVI .avi Microsoft에 의해 개발되었으며, PC에서 동영상을 구현하기 위한 파일 형식임.
WMV .wmv Microsoft에 의해 개발되었으며, Microsoft windows media player의 주 스트리밍 파일 형식임.
QuickTime .mov Apple에 의해 개발되었으며, 매킨토시 컴퓨터에 동영상을 지원하기 위하여 개발된 파일 형식임.
RealVideo .rm .ram Real Networks에 의해 개발되었으며, 스트리밍 기술을 이용한 동영상용 플러그 인 파일 형식임.
Flash .swf .flv Macromedia에 의해 개발되었으며, 벡터 도형 처리 기반의 애니메이션 제작용 소프트웨어 파일 형식임.

HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐이다.

오디오(audio) 파일 형식

대표적인 오디오 파일 형식은 다음과 같다.

파일 형식 파일 확장자 설명
WAV .wav IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식임.
Ogg .ogg Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식임.
MP3 .mp3 Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축 파일 형식임.
MP4 .mp4 Moving Picture Experts Group에 의해 개발되었으며, MPEG-4의 일부로 규정된 멀티미디어 컨테이너 파일 형식임. MP4는 비디오 파일 형식이기도 하지만 오디오에서도 사용할 수 있음. 
MIDI .mid .midi 모든 전자 음악기기의 연주 정보를 상호 전달하기 위해 정해진 데이터 전송 규격임.
RealAudio .rm .ram Real Networks에 의해 개발되었으며, 인터넷에서 실시간으로 음악을 들을 수 있는 스트리밍 사운드 기술임.
WMA .wma Microsoft에 의해 개발되었으며, Microsoft windows media 기술에서 음악 정보(data)만을 압축하는 기술임.
AAC .aac Apple에 의해 개발되었으며, iPhone, iPod, iTunes의 기본 오디오 파일 형식임. 표준적인 손실 압축 방식을 사용함.

HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐이다.

1.8.2 - HTML 입문 | HTML5 멀티미디어 | 비디오(video) 요소

비디오(video) 요소

HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다.
하지만 HTML5에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공한다.

<video>태그를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

요소 ie chrome firefox safari opera
<video>태그 9.0 4.0 3.5 4.0 10.5

비디오 요소의 속성

예제

<video style="width:576; height:360" controls>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.
또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있다.

웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용한다.
<video>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video>태그를 지원하지 않을 때만 화면에 표시된다.

autoplay 속성은 웹 페이지가 로드(load) 될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정한다.

예제

<video style="width:576; height:360" controls autoplay>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

loop 속성을 설정하면, 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생합니다.

예제

<video style="width:576; height:360" controls loop>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

<track>태그는 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시할 때 사용한다.

예제

<video style="width:576; height:360" controls>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    <track kind="subtitles" src="sample_subtitle_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="sample_subtitle_fr.vtt" srclang="fr" label="Francais">
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

kind 속성은 자막 문자열의 타입을 명시하며, srclang 속성은 해당 문자열의 언어 설정을 명시한다.
label 속성은 사용자가 보게 될 라벨을 명시한다.

HTML5 비디오 파일 형식

HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐이다.

  • MP4 : Moving Picture Experts Group에 의해 개발되었으며, 비디오 코덱으로는 H.268, 오디오 코덱으로는 ACC를 사용합니다. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어 인터넷을 통한 스트리밍에 많이 활용되는 파일 형식입이다.
  • WebM : 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이며, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용한다.
  • OGV : Theora Ogg라고도 불리며, Xiph 재단에 의해 MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다. 비디오 코덱으로는 Theora, 오디오 코덱으로는 Vorbis를 사용한다.

HTML5 비디오 파일 형식별 주요 웹 브라우저의 지원 여부는 다음 표와 같다.

파일 형식 미디어 타입 ie chrome firefox safari opera
MP4 video/mp4
WebM video/webm Χ Χ
OGV video/ogg Χ Χ

HTML5 video 요소

요소 설명
video 비디오와 영화 등 비디오 파일을 명시함.
source video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함.
track 비디오 플레이어에 대한 텍스트 자막을 명시함.

HTML5 video 속성

속성 설명
src 비디오 파일의 경로를 명시함.
height 비디오 파일의 높이를 명시함.
width 비디오 파일의 너비를 명시함.
controls 비디오의 기본적인 동작을 조절할 수 있는 패널를 명시함.
autoplay 비디오의 자동 재생 여부를 명시함.
loop 비디오의 반복 재생 여부를 명시함.
poster 비디오가 아직 준비 중일때 불러올 이미지 파일의 경로를 명시함.
preload 비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.

1.8.3 - HTML 입문 | HTML5 멀티미디어 | 오디오(audio) 요소

오디오(audio) 요소

HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안이 없었다.
따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다.
하지만 HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다.

<audio>태그를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

요소 ie chrome firefox safari opera
<audio>태그 9.0 4.0 3.5 4.0 10.5

오디오 요소의 속성

예제

<audio controls>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

control 속성은 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.

웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용한다. <audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시된다.

autoplay 속성은 웹 페이지가 로드(load) 될 때 음악을 자동으로 재생시켜 줄지 않을지를 설정한다.

예제

<audio controls autoplay>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

loop 속성을 설정하면 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생한다.

예제

<audio controls loop>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

HTML5 오디오 파일 형식

HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐입니다.

  • MP3 : Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식이다.
  • WAV : IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식이다.
  • Ogg : Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식이다.

HTML5 오디오 파일 형식별 주요 웹 브라우저의 지원 여부는 다음 표와 같다.

파일 형식 미디어 타입 ie chrome firefox safari opera
MP3 audio/mp3
WAV audio/wav Χ
Ogg audio/ogg Χ Χ

HTML5 audio 요소

요소 설명
audio 오디오와 음악 등 오디오 파일을 명시함.
source audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함.

HTML5 audio 속성

속성 설명
src 오디오 파일의 경로를 명시함.
controls 오디오의 기본적인 동작을 조절할 수 있는 패널를 명시함.
autoplay 오디오의 자동 재생 여부를 명시함.
loop 오디오의 반복 재생 여부를 명시함.
preload 오디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.

1.8.4 - HTML 입문 | HTML5 멀티미디어 | 플러그인(Plug-in)

플러그인(Plug-in)

HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미한다.
가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등이 있다.
이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가할 수 있다.

object 요소

object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용한다. 이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입할 수도 있다.

예제

<object data="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px"></object>

또한, object 요소는 이미지를 삽입할 때에도 사용할 수 있다.

예제

 <object data="/examples/images/img_flower.png"></object>

embed 요소

embed 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용한다.
embed 요소는 오래전부터 사용되어 왔지만, HTML5 이전까지는 HTML 표준이 아니었다.
이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 HTML 문서를 삽입할 수도 있다.

예제

 <embed src="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px">

또한, embed 요소는 이미지를 삽입할 때에도 사용할 수 있다.

예제

<embed src="/examples/images/img_flower.jpg" style="width:350px; height:263px">

embed 요소는 HTML5 이전까지는 HTML 표준이 아니었으므로, HTML5에서는 유효하지만, HTML4에서는 유효하지 않는다.

1.9 - HTML 입문 | HTML5 그래픽

HTML5에서 추가된 그래픽 요소

그래픽 요소 설명
<canvas> 자바 스크립트를 이용한 그래픽으로 표현을 할 시에 사용한다.
<svg> SVG를 이용한 그래픽으로 표현을 할 시에 사용한다.

1.9.1 - HTML 입문 | HTML5 그래픽 | Canvas

canvas 요소

canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공한다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행한다.
따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 한다.

canvas 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

요소 ie chrome firefox safari opera
canvas 9.0 4.0 2.0 3.1 9.0

canvas 요소의 속성

canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간이다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다.

canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 된다.

예제

<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

사각형 그리기

캔버스를 정의한 후에는 스크립트를 이용하여 canvas 요소에 그래픽을 그릴 수 있다.

다음 예제는 스크립트를 이용하여 canvas 요소에 사각형을 그리는 예제이다.

예제

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

위의 예제에서 사각형을 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달 받는다.

  1. 사각형의 왼쪽 위 꼭짓점의 x좌표
  2. 사각형의 왼쪽 위 꼭짓점의 y좌표
  3. 사각형의 너비
  4. 사각형의 높이

사각형을 그리는데 사용하는 스크립트 함수는 다음과 같다.

함수 설명
fillStyle() 사각형 영역을 채울 색상을 설정함. 색상값만을 사용할 수도 있고, 투명도까지 명시할 수 있음.
fillRect() 사각형을 그리기 시작할 시작점의 x, y좌표와 사각형의 너비, 높이 등을 설정함.
strokeRect() 사각형 영역에 테두리를 그릴 때 사용함.
clearRect() 지정된 사각형 영역을 투명하게 만듦.

선 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 선을 그리는 예제이다.

context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();

선을 그리는데 사용하는 스크립트 함수는 다음과 같다.

함수 설명
moveTo() 선이 시작될 좌표를 설정함.
lineTo() 선이 끝나는 좌표를 설정함.
lineTo() 함수를 연속적으로 사용할 때의 시작 위치는 이전 선 그리기가 끝난 위치로 자동 설정됨.
stroke() 선 그리기 시작함.

예제

이러한 선 그리기를 이용하면 도형을 만들 수도 있으며, 만든 도형에 색을 채울 수도 있다.

context.moveTo(0, 0);
context.lineTo(300, 200);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();

위의 예제에서는 우선 moveTo() 함수와 lineTo() 함수를 이용하여 선 그리기로 도형을 만든다.
그 후 fillStyle() 함수로 원하는 색상을 지정하고나서, fill() 함수를 사용하여 만든 도형에 색상을 칠하게 된다.

원 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 원을 그리는 예제이다.

예제

context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();

위의 예제에서 사용된 arc() 함수는 다음 순서대로 인수를 전달 받는다.

  1. 원의 중심 x좌표
  2. 원의 중심 y좌표
  3. 원의 반지름
  4. 원호를 그리기 시작할 각도
  5. 원호 그리기를 마칠 각도

원을 그리는데 사용하는 스크립트 함수는 다음과 같다.

함수 설명
beginPath() 도형 그리기를 시작함.
arc() 원의 중심 좌표와 반지름, 원을 그리기 시작할 시작 위치와 종료 위치의 좌표, 그리는 방향 등을 설정함.
closePath() 도형 그리기를 마침.

예제

이러한 원 그리기를 이용하면 원호 또한 간단히 만들 수 있다.

context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();

Math.PI는 원의 원주를 지름으로 나눈 비율(원주율) 값으로 대략 3.14159를 나타낸다.

텍스트(text) 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 텍스트를 그리는 예제이다.

예제

context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);

위의 예제에서 텍스트를 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달 받는다.

  1. canvas 요소에 그릴 텍스트의 내용
  2. 텍스트의 왼쪽 위 꼭짓점의 x좌표
  3. 텍스트의 왼쪽 위 꼭짓점의 y좌표

텍스트를 그리는데 사용하는 스크립트 함수는 다음과 같습니다.

함수 설명
font() 텍스트의 크기, 폰트(font)와 색상 등을 설정함.
fillText() 텍스트의 내용과 텍스트를 그리기 시작할 시작 위치의 좌표를 설정함.
strokeText() 테두리만 있는 텍스트를 그릴 때 사용함.

그래디언트(gradient) 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 선형 그래디언트를 그리는 예제이다.

예제

var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);

위의 예제에서 사용된 createLinearGradient() 함수는 다음 순서대로 인수를 전달 받는다.

  1. 선형 그래디언트가 시작하는 점의 x좌표
  2. 선형 그래디언트가 시작하는 점의 y좌표
  3. 선형 그래디언트가 끝나는 점의 x좌표
  4. 선형 그래디언트가 끝나는 점의 y좌표

이렇게 createLinearGradient() 함수를 사용하여 선형 그래디언트를 생성한다.
이때 addColorStop() 함수를 사용하여 그래디언트에 사용될 색상을 명시할 수 있다.
또한, 이렇게 생성된 그래디언트는 fillStyle이나 strokeStyle 속성을 이용하여 그릴 수 있다.

다음 예제는 스크립트를 이용하여 canvas 요소에 원형 그래디언트를 그리는 예제이다.

예제

var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

위의 예제에서 사용된 createRadialGradient() 함수는 다음 순서대로 인수를 전달 받는다.

  1. 원형 그래디언트가 시작하는 원의 중심 x좌표
  2. 원형 그래디언트가 시작하는 원의 중심 y좌표
  3. 원형 그래디언트가 시작하는 원의 반지름
  4. 원형 그래디언트가 끝나는 원의 중심 x좌표
  5. 원형 그래디언트가 끝나는 원의 중심 y좌표
  6. 원형 그래디언트가 끝나는 원의 반지름

그래디언트(gradient)를 그리는데 사용하는 스크립트 함수는 다음과 같다.

함수 설명
createLinearGradient() 선형 그래디언트를 그리기 시작할 시작 위치와 종료 위치의 좌표를 설정함.
createRadialGradient() 원형 그래디언트를 그리기 시작할 큰 원의 중심 좌표, 반지름과 그래디언트가 끝날 작은 원의 중심 좌표, 반지름 등을 설정함.
addColorStop() 그래디언트의 색을 설정함. 시작점인 0에서부터 종료점인 1까지 다양한 색 지정이 가능함.

createLinearGradient() 함수와 createRadialGradient() 함수는 익스플로러 8과 그 이전 버전에서 지원하지 않습니다.

이미지 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 이미지를 그리는 예제이다.

예제

<p><button onclick="drawImage()">이미지 그리기</button></p>
...
<script>
    function drawImage() {
        var srcImg = document.getElementById("Monalisa");
        context.drawImage(srcImg, 10, 10);
    }
</script>

위의 예제에서 사용된 drawImage() 함수는 다음 순서대로 인수를 전달 받는다.

  1. canvas 요소에 그릴 이미지의 주소
  2. 이미지의 왼쪽 위 꼭짓점의 x좌표
  3. 이미지의 왼쪽 위 꼭짓점의 y좌표

이미지를 그리는데 사용하는 스크립트 함수는 다음과 같다.

함수 설명
drawImage() canvas 요소에 그릴 이미지의 주소와 이미지가 그려질 시작 위치를 설정함.

1.9.2 - HTML 입문 | HTML5 그래픽 | SVG(Scalable Vector Graphics)

svg 요소

svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다.
기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다.

하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다.
따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다.

svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

요소 ie chrome firefox safari opera
svg 9.0 4.0 3.0 3.2 10.1

사각형 그리기

다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제이다.

예제

<svg width="200" height="150">
    <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>

사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다.

속성 설명
width 도형의 너비를 설정함.
height 도형의 높이를 설정함.
stroke 도형의 테두리 색상을 설정함.
stroke-width 도형의 테두리 굵기를 설정함.
fill 도형을 채울 색상을 설정함.
opacity 도형의 투명도를 설정함.

위와 같이 각각의 속성을 사용하여 설정할 수도 있으며, 다음 예제와 같이 style 속성을 사용하여 한 번에 설정할 수도 있다.

예제

<svg width="200" height="150">
    <rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
</svg>

rect 요소에 x, y, rx, ry 속성을 추가하여 모서리가 둥근 사각형을 그릴 수 있다.

예제

<svg width="250" height="200">
    <rect width="200" height="150" x="20" y="20" rx="20" ry="20"
        stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

모서리가 둥근 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다.

속성 설명
x 사각형의 왼쪽 위 꼭짓점의 x좌표를 설정함.
y 사각형의 왼쪽 위 꼭짓점의 y좌표를 설정함.
rx 사각형 모서리 굴곡의 x축 반지름을 설정함.
ry 사각형 모서리 굴곡의 y축 반지름을 설정함.

선 그리기

다음 예제는 line 요소를 사용하여 선을 그리는 예제이다.

예제

<svg width="250" height="200">
    <line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
</svg>

선을 그리는데 사용하는 line 요소의 속성은 다음과 같다.

속성 설명
x1 선이 시작될 위치의 x좌표를 설정함.
y1 선이 시작될 위치의 y좌표를 설정함.
x2 선이 끝나는 위치의 x좌표를 설정함.
y2 선이 끝나는 위치의 y좌표를 설정함.

원 그리기

다음 예제는 circle 요소를 사용하여 원을 그리는 예제이다.

예제

<svg width="300" height="300">
    <circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

원을 그리는데 사용하는 circle 요소의 속성은 다음과 같다.

속성 설명
cx 원의 중심 x좌표를 설정함.
cy 원의 중심 y좌표를 설정함.
r 원의 반지름을 설정함.

타원 그리기

다음 예제는 ellipse 요소를 사용하여 타원을 그리는 예제이다.

예제

<svg width="300" height="300">
    <ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

타원을 그리는데 사용하는 ellipse 요소의 속성은 다음과 같다.

속성 설명
cx 타원 중심의 x좌표를 설정함.
cy 타원 중심의 y좌표를 설정함.
rx 타원의 x축 반지름을 설정함.
ry 타원의 y축 반지름을 설정함.

다각형 그리기

다음 예제는 polygon 요소를 사용하여 별모양의 다각형을 그리는 예제이다.

예제

<svg width="300" height="300">
    <polygon points="10,100 190,100 30,200 100,40 170,200"
       stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

다각형을 그리는데 사용하는 polygon 요소의 속성은 다음과 같다.

속성 설명
points 다각형의 각 꼭짓점이 표시될 위치의 좌표를 설정함.

points 속성은 다각형을 이루는 각 꼭짓점의 x좌표와 y좌표를 명시한다.
이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로 선으로 연결되어 다각형을 표현하게 된다.

1.9.3 - HTML 입문 | HTML5 그래픽 | Canvas vs SVG

Canvas vs SVG

canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소이다.
어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있다.

작업 환경에 따른 선택의 기준

다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여준다.

렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킨다.
따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미한다.

Canvas와 SVG간의 성능 비교Canvas와 SVG간의 성능 비교

  • canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋다.
  • svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(<10k)에 좋다.

따라서 각 작업 환경에 맞는 그래픽 요소를 선택하여 사용하는 것이 가장 좋다.

작업 종류에 따른 선택의 기준

다음 그림은 canvas 요소와 svg 요소를 사용할 때 선택의 기준을 제시해준다.

Canvas 대 SVG 성능

  • canvas 요소는 복잡하고 고성능의 애니메이션(animation) 작업이나 동영상 조작 등의 작업에 잘 어울린다.
  • svg 요소는 고품질의 문서 작업이나 정적 이미지의 조작 작업 등에 잘 어울린다.

따라서 각 작업 종류에 맞는 그래픽 요소를 선택하여 사용하는 것이 가장 좋다.

Canvas와 SVG의 차이점

Canvas SVG
픽셀(pixel) 기반 모양(shape) 기반
단일 HTML 요소 DOM의 일부분이 되는 다중 그래픽 요소
스크립트(script)를 통해서만 수정할 수 있음. 스크립트(script) 및 CSS를 통해서도 수정할 수 있음.
그래픽이 주작업인 게임에 적합함. 렌더링 영역이 넓은 응용 프로그램(application)에 적합함.

참조

1.10 - HTML 입문 | HTML5 API

1.10.1 - HTML 입문 | HTML5 API | Geolocation

HTML5 API

HTML5에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있다. 그러므로 본 내용을 이해하기 위해서는 자바스크립트에 대한 기초 지식이 필요하다.

geolocation API

geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API이다. 사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송된다.

이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다. 하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있다.

geolocation API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API ie chrome firefox safari opera
geolocation 9.0 5.0 - 49.0 (http) / 50.0 (https) 3.5 5.0 16.0

크롬 50.0 버전부터는 https와 같은 보안 프로토콜에서만 geolocation API가 동작하도록 허용하고 있습니다.

getCurrentPosition() 메소드

getCurrentPosition() 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있다. 이 메소드의 첫 번째 인수로는 가져온 사용자의 위치 정보를 출력하는 함수가 들어간다.

예제

function findLocation() {
    if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(showYourLocation); 
    } else { 
        loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!"; 
    }
}

이 메소드의 두 번째 인수로는 위치 정보에 관한 오류를 처리하는 함수가 들어간다.

예제

function showErrorMsg(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
        loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!"
        break;
        case error.POSITION_UNAVAILABLE:
        loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!"
        break;
        case error.TIMEOUT:
        loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!"
        break;
        case error.UNKNOWN_ERROR:
        loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!"
        break;
    }
}

이처럼 가져온 사용자의 위치 정보를 구글 맵을 통해 표시할 수 있다.

예제

function showYourLocation(position) {
    var userLat = position.coords.latitude;
    var userLng = position.coords.longitude;
    var imgUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + userLat + "," + userLng + "&zoom=15&size=500x400&sensor=false";
    document.getElementById("mapLocation").innerHTML = "<img src='"+imgUrl+"'>";
}

위의 예제처럼 단순한 이미지로 표시하는 것이 아닌 구글 맵 스크립트를 이용한 연동도 가능하다.

예제

function showYourLocation(position) {
    var userLat = position.coords.latitude;
    var userLng = position.coords.longitude;
    var userLocation = new google.maps.LatLng(userLat, userLng);
    loc = document.getElementById("mapLocation");
    loc.style.width = '500px';
    loc.style.height = '400px';
    var mapOptions = { 
        center: userLocation, 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false, 
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL} 
    }
    var map = new google.maps.Map(loc, mapOptions);
    var marker = new google.maps.Marker({position:userLocation,map:map,title:"여기가 현재 위치입니다!"});
}

Geolocation API 메소드

Method 설명
getCurrentPosition() 사용자의 현재 위치를 가져옴.
watchPosition() 사용자의 현재 위치를 가져오고 나서, 사용자의 움직임에 따라 지속적으로 위치 정보를 갱신함.
clearWatch() watchPosition() 메소드의 실행을 중지함.

getCurrentPosition() 메소드의 반환값

속성 반환값
coords.latitude 소수로 표현된 위도 값
coords.longitude 소수로 표현된 경도 값
coords.accuracy 위도 값과 경도 값의 정확도
coords.altitude 평균 해수면을 기준으로 하는 고도 값(해발)
coords.altitudeAccuracy 고도 값의 정확도
coords.heading 북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로의 각도 값(˚)
coords.speed 초당 이동한 미터 수를 나타내는 속도 값(초속)
timestamp 위치 정보를 가져온 시간을 나타냄.

1.10.2 - HTML 입문 | HTML5 API | Drag and Drop

드래그 앤 드롭(drag and drop) API

드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정해준다. HTML5 이전에 이와 같은 기능을 구현하기 위해서는 엄청나게 많고 복잡한 스크립트를 작성해야 했다. 하지만 HTML5에서는 드래그 앤 드롭(drag and drop) 기능이 표준 권고안에 포함되어 간단하게 사용할 수 있게 되었다. 현재 주요 웹 브라우저들은 모두 이 기능을 지원하며, 따라서 웹 페이지 내의 모든 요소는 드래그될 수 있다.

드래그 앤 드롭 API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API ie chrome firefox safari opera
드래그 앤 드롭 9.0 4.0 3.5 6.0 12.0

드래그 앤 드롭 이벤트

마우스로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 된다.

다음 표는 드래그 앤 드롭시 일어나는 이벤트를 순서대로 보여준다.

이벤트 설명
dragstart 사용자가 객체(object)를 드래그하려고 시작할 때 발생함.
dragenter 마우스가 대상 객체의 위로 처음 진입할 때 발생함.
dragover 드래그하면서 마우스가 대상 객체의 위에 자리 잡고 있을 때 발생함.
drag 대상 객체를 드래그하면서 마우스를 움직일 때 발생함.
drop 드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생함.
dragleave 드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생함.
dragend 대상 객체를 드래그하다가 마우스 버튼을 놓는 순간 발생함.

드래그 앤 드롭 이벤트를 위한 모든 이벤트 리스너 메소드(event listener method)는 DataTransfer 객체를 반환한다.
이렇게 반환된 DataTransfer 객체는 드래그 앤 드롭 동작에 관한 정보를 가지고 있게 된다.

draggable 속성

웹 페이지 내의 모든 요소는 draggable 속성을 사용하여 드래그될 수 있는 객체(draggable object)로 변환될 수 있다.

ondragstart 속성

드래그될 수 있는 객체로 만든 후에는 ondragstart 속성을 통해 DataTransfer 객체의 setData() 메소드를 호출한다.
setData() 메소드는 드래그되는 대상 객체의 데이터(data)와 타입(data type)을 설정한다.

ondragover 속성

ondragover 속성은 드래그되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정한다.
기본적으로 HTML 요소는 다른 요소의 위에 위치할 수 없다.
따라서 다른 요소 위에 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야만 한다.
이 작업을 event.preventDefault() 메소드를 호출하는 것만으로 간단히 설정할 수 있다.

ondrop 속성

드래그하던 객체를 놓으면 drop 이벤트가 발생합니다.
ondrop 속성을 이용하여 drop 이벤트에 대한 동작을 설정할 수 있다.

예제

function dragEnter(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

1.10.3 - HTML 입문 | HTML5 API | Web Storage

웹 스토리지(web storage) API

웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해준다.

HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)라는 곳에 그 정보를 저장한다.
하지만 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해준다.
웹 스토리지는 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다.

이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다.
오리진(origin)이란 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자이다.
따라서 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터(data)를 저장하며 또한 같은 데이터에 접근할 수 있다.

웹 스토리지 API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API ie chrome firefox safari opera
웹 스토리지 8.0 4.0 3.5 4.0 11.5

웹 스토리지 지원 여부 확인

웹 스토리지를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.

문법

if (typeof(Storage) !== "undefined") {
    // web storage를 위한 코드 부분
} else {
    // web storage를 지원하지 않는 브라우저를 위한 안내 부분
}

웹 스토리지 객체

웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 두 가지 객체를 제공한다.

  • sessionStorage 객체 : 하나의 세션(session)만을 위한 데이터를 저장하는 객체
  • localStorage 객체 : 보관 기한이 없는 데이터를 저장할 수 있는 객체

sessionStorage 객체

sessionStorage 객체는 하나의 세션(session)만을 위한 데이터를 저장한다.
따라서 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라진다.

예제

function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount) { 
            sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; 
        } else { 
            sessionStorage.clickcount = 1; 
        }
        document.getElementById("counter").innerHTML = "카운터의 현재 횟수는 " + sessionStorage.clickcount + "입니다!";
    }
}

localStorage 객체

localStorage 객체는 보관 기한이 없는 데이터를 저장한다. 따라서 브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅 해도 저장된 데이터는 없어지지 않는다.

예제

function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) { 
            localStorage.clickcount = Number(localStorage.clickcount) + 1; 
        } else { 
            localStorage.clickcount = 1; 
        }
        document.getElementById("counter").innerHTML = "카운터의 현재 횟수는 " + localStorage.clickcount + "입니다!";
    }
}

1.10.4 - HTML 입문 | HTML5 API | Application Cache

application Cache API

application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해준다.
따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있다.

application cache를 사용해서 생기는 장점은 다음과 같다.

  • 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있다.
  • 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있다.
  • 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 된다.

application cache를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API ie chrome firefox safari opera
application cache 10.0 4.0 3.5 4.0 11.5

cache manifest 파일

application cache를 사용하기 위해서는 먼저 cache manifest 파일을 작성해야 한다.
cache manifest 파일은 웹 브라우저에 캐시(cache) 해야 할 파일과 캐시하지 말아야 할 파일을 알려준다.

이러한 mainfest 파일은 다음과 같이 세 개의 세션(session)으로 이루어진다.

  • CACHE MANIFEST : 처음 다운로드한 이후에 계속 캐시할 파일들을 기록한다.
  • NETWORK : 서버와의 접속이 필요한 파일들을 기록하며, 이 파일들은 절대로 캐시되지 않는다.
  • FALLBACK : 파일에 접속할 수 없을 때에 대체할 파일들을 기록한다.

캐시(cache)의 갱신

웹 브라우저는 다음과 같은 경우가 발생하면 캐시(cache)의 정보를 갱신하게 된다.

  • 사용자가 웹 브라우저의 캐시를 강제로 지웠을 경우
  • application cache가 프로그램 때문에 갱신됐을 경우
  • cache manifest 파일이 수정됐을 경우

문법

CACHE MANIFEST
# 2016-03-22 v1.0.1
test.html
test.css
test.js
 
NETWORK:
test.jpg
 
FALLBACK:
/ offline.html

한 번 캐시 되면 서버상의 파일을 수정해도, 웹 브라우저는 사용자 측에 캐시 되어 있는 버전의 파일만을 보여준다.
따라서 서버상의 파일을 수정한 후에는 반드시 웹 브라우저가 캐시를 갱신하도록 만들어야 한다.

이때 가장 많이 사용되는 방법이 cache manifest 파일 내의 주석 부분을 수정하는 것이다.
일반적으로 갱신 날짜 및 버전 정보를 주석으로 표시하고, 이 부분을 수정하여 웹 브라우저가 캐시를 갱신하도록 유도한다.

1.10.5 - HTML 입문 | HTML5 API | Web Worker

web worker API

웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 된다. web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트이다.

즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원한다. 따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해준다..

web worker를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

API ie chrome firefox safari opera
web worker 10.0 4.0 3.5 4.0 11.5

web worker 지원 여부 확인

web worker를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.

문법

if (typeof(Worker) !== "undefined") {
    // web worker를 위한 코드 부분 }
else {
    // web worker를 지원하지 않는 브라우저를 위한 안내 부분
}

web worker 파일 생성

web worker의 동작을 확인하기 위해 소수를 찾는 외부 자바스크립트 파일을 만든다.

예제

var n = 1;
search: while (true) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
        if (n % i == 0)
            continue search;
        postMessage(n);
}

위의 예제에서 postMessage() 메소드는 HTML 문서에 결과를 전달하기 위해 사용한다.

web worker 객체 생성

위에서 만든 web worker 파일을 불러올 HTML 파일을 만든다.

예제

if(typeof(webworker) == "undefined") {
    webworker = new Worker("/examples/web_worker.js");
}

위의 예제는 web worker 파일이 존재하지 않으면, 새로운 web worker 객체를 만들어 준다.

worker 객체와의 연결

onmessage 이벤트 리스너(event listener)를 통해 web worker 파일과 메시지를 주고받을 수 있다.

예제

webworker.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
};

위의 예제에서 web worker 파일이 메시지를 보내면 해당 이벤트 리스너(event listener)가 실행된다.
이 때 web worker 파일이 보낸 정보는 event.data에 저장된다.

web worker 객체의 실행 종료

web worker 객체는 생성되고 나서 종료될 때까지 계속해서 메시지를 받을 준비를 한다.
따라서 웹 브라우저나 컴퓨터의 자원을 돌려주기 위해서는 terminate() 메소드를 사용하여 web worker를 반드시 종료해줘야 한다.

예제

webworker.terminate();

web worker 객체의 재사용

web worker 객체가 종료된 후에는 web worker의 값을 undefined로 설정해야만 web worker 객체를 재사용할 수 있다.

예제

webworker = undefined;

web worker 예제

다음 예제는 앞에서 살펴본 web worker의 동작을 하나의 예제로 보여주는 예제이다.

예제

var webworker;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(webworker) == "undefined") { webworker = new Worker("/examples/web_worker.js"); }
        webworker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; 
    }
}
function stopWorker() { 
    webworker.terminate();
    webworker = undefined;
}

1.10.6 - HTML 입문 | HTML5 API | SSE(Server Sent Events)

Server Sent Events API

server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정한다.

server sent events를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API ie chrome firefox safari opera
server sent events 지원안함 6.0 6.0 5.0 11.5

server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.

문법

if (typeof(EventSource) !== "undefined") {
    // server sent events를 위한 코드 부분
} else {
    // server sent events를 지원하지 않는 브라우저를 위한 안내 부분
}

다음 예제는 server sent events를 이용해 5초마다 웹 페이지를 갱신하는 예제이다.

예제

if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("/examples/media/sse.php");
    source.onmessage = function(event) { 
        document.getElementById("result").innerHTML += event.data + "<br>"; 
    };
}

위의 예제에서 사용한 서버 측 PHP 파일인 sse.php 파일은 다음과 같다.

sse.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

EventSource 객체 메소드

위의 예제에서 onmessage 이벤트를 사용하여 메시지를 가져 왔다. 다른 이벤트도 존재하는데 이벤트 메소드의 종류는 아래와 같다

이벤트 설명
onopen 서버에 대한 연결이 열릴 때
onmessage 메시지가 수신되었을 때
onerror 오류가 발생했을 때

1.11 - HTML meta 태그로 페이지 이동하기

html의 <meta> 태그를 이용하면 지정한 시간에, 페이지를 이동하게 할 수 있다.

아래 <meta> 태그는 <head> 태그 사이에 추가해 준다.

<meta http-equiv=”refresh” conten=”10;url=http://tistory.com“>
<meta http-equiv=”refresh” conten=”초단위;url=이동할url“>

예제

아래 예제는 10초 후에 다른 페이지로 이동하는 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="10;url=https://www.devkuma.com">
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <title>meta 태그로 페이지 이동하기</title>
    <script>
     $(function() {
            var seconds = 10;
            function counting() {
	            $(".seconds").html(seconds--);
                setTimeout(counting, 1000);
            }
            counting();
     });
    </script>
</head>
<body>
    <h1>meta 태그로 페이지 이동하기</h1>
    <p><span class="seconds">10</span>초 후에 페이지가 이동합니다.</p>
</body>
</html>

코드 실행

2 - CSS

CSS

CSS는 Cascading Style Sheets의 약자이다.

2.1 - CSS 입문 | CSS 시작

CSS(Cascading style sheet)는 HTML을 보완하기 위해서 만들어진 것으로 폰트, 색상, 공백 공간과 그 밖의 문서 표현 측면을 자유로이 지정할 수 있는 기능을 제공한다.

https://www.w3schools.com/css/default.asp

2.1.1 - CSS 입문 | CSS 시작 | CSS 개요

CSS란?

CSS는 Cascading Style Sheets의 약자이다.
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어이다.
HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.
오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다.

CSS를 사용하는 이유

HTML은 문서의 구조를 표현하기에 적합한 마크업 언어라서 화면상에 컨텐츠를 깔끔하게 보여주기에는 한계가 있다.
HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 한다.
이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어진다.

HTML의 표현 한계 보완

CSS를 사용하면 HTML에서 지원하지 않는 다양한 스타일의 표현이 가능하다.

작업의 효율성 향상

CSS를 사용하면 문서의 컨텐츠와 스타일을 분리할 수 있다.
CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.
또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워진다.
이러한 외부 스타일 시트는 보통 확장자를 .css 파일로 저장한다.

이러한 문제점들을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS이다.

CSS 버전

인터넷의 발전에 따라 CSS는 현재까지 새로운 버전이 계속해서 발표되고 있다.

1996년에 최초의 CSS1이 W3C 표준 권고안으로 제정된다.
그 이후 2017년에 CSS2가 발표되었으며, 2005년부터는 현재 사용 중인 CSS3가 개발되고 있다. CSS는 현재 모듈(module)별로 개발되고 있으며, 브라우저 공급자가 지원할 모듈을 자유롭게 선택할 수 있도록 하고 있다.
따라서 현재 최신 버전의 CSS 표준 권고안은 CSS Level 2 Revision 1 (CSS 2.1)이다.

최신 버전의 CSS 표준 권고안에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있다.

W3C CSS Snapshot 2015 : W3C Working Group Note, 13 October 2015

CSS 표준 권고안의 모듈별 현재 상태에 대해 자세히 알고 싶다면, 다음 링크를 방문하여 확인할 수 있다.

W3C CSS current work & how to participate

2.1.2 - CSS 입문 | CSS 시작 | CSS 문법

CSS 문법

영문
CSS Syntax

국문
CSS Syntax

CSS의 문법은 선택자(selector)와 선언부(declaration)로 구성된다.
선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킨다.
선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러싼다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결된다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마친다.

2.1.3 - CSS 입문 | CSS 시작 | CSS 적용

CSS를 적용하는 방법

HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있다.

  1. 인라인 스타일(Inline style)
  2. 내부 스타일 시트(Internal style sheet)
  3. 외부 스타일 시트(External style sheet)

인라인 스타일(Inline style)

인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.

<body>
    <h2 style="color:green; text-decoration:underline">
        인라인 스타일을 이용하여 스타일을 적용하였습니다.
    </h2>
</body>

이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용해야 한다.

내부 스타일 시트(Internal style sheet)

내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용한다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.

<head>
    <style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
    </style>
</head>

외부 스타일 시트(External style sheet)

외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장된다.
스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용된다.

<head>
    <link rel="stylesheet" href="/examples/media/expand_style.css">
</head>

위의 예제에서 사용된 CSS 파일의 내용은 다음과 같다.

expand_style.css

body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }

스타일 적용의 우선순위

위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다.

  1. 인라인 스타일 (HTML 요소 내부에 위치함)
  2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
  3. 웹 브라우저 기본 스타일

예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다. 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.

<link rel="stylesheet" href="/examples/media/expand_style.css">
...
<h2>이 부분은 외부 스타일 시트만이 적용됩니다.</h2>
<h2 style="color:maroon; text-decoration:line-through"> 이 부분은 인라인 스타일과 외부 스타일 시트가 둘 다 적용됩니다. </h2>

따라서 웹 사이트의 스타일 적용은 외부 스타일 시트를 사용하는 것이 유지 보수도 편하며, 가장 안정적이다.

2.2 - CSS 입문 | CSS 기본 속성

2.2.1 - CSS 입문 | CSS 기본 속성 | CSS 색 (color)

CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있다.

  1. 색상 이름으로 표현
  2. RGB 색상값으로 표현
  3. 16진수 색상값으로 표현

색상 이름으로 표현

색상 이름으로 표현이 가능하다.
W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같다.

aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow

HTML에서 색상 이름은 대소문자를 구분하지 않는다.

<style>
    .blue { color: blue; }
    .green { color: green; }
    .silver { color: silver; }
</style>

RGB 색상값으로 표현

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다.
따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다.

RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.

<style>
    .blue { color: rgb(0,0,255); }
    .green { color: rgb(0,128,0); }
    .silver { color: rgb(192,192,192); }
</style>

16진수 색상값으로 표현

16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.

예를 들면, 녹색을 나타내는 RGB 색상값 rgb(0,255,0)은 16진수 색상값으로는 #00FF00이 된다.

<style>
    .blue { color: #0000FF; }
    .green { color: #008000; }
    .silver { color: #C0C0C0; }
</style>

CSS3 색

CSS3에서 새롭게 추가된 색 표현 방법은 다음과 같다.

  1. RGBA 색상값으로 표현
  2. HSL 색상값으로 표현
  3. HSLA 색상값으로 표현
  4. opacity 속성

CSS3에서 추가된 색상값 및 opacity 속성 지원 버전

CSS3에서 추가된 색상값 및 opacity 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

속성 ie chrome firefox safari opera
RGBA 색상값, HSL 색상값, HSLA 색상값 9.0 4.0 3.0 3.1 10.1
opacity 9.0 4.0 2.0 3.1 10.1

RGBA 색상값으로 표현

RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값이다.

알파 채널(alpha channel)이란 색상의 투명도를 나타내는 채널이다. 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

<style>
    #header_01 {background-color: rgba(0,255,0,0);}
    #header_02 {background-color: rgba(0,255,0,0.2);}
    #header_03 {background-color: rgba(0,255,0,0.4);}
    #header_04 {background-color: rgba(0,255,0,0.6);}
    #header_05 {background-color: rgba(0,255,0,0.8);}
    #header_06 {background-color: rgba(0,255,0,1);}
</style>

HSL 색상값으로 표현

HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현한다.
HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미한다.

색상은 0부터 360 사이의 값을 가지며, 색상환(color wheel)의 각도를 나타낸다.
색상 값이 0 또는 360이면 빨간색(red)이 되며, 120이면 녹색(green), 240이면 파란색(blue)이 된다.

<style>
    #header_01 {background-color: hsl(0, 100%, 50%);}
    #header_02 {background-color: hsl(90, 100%, 50%);}
    #header_03 {background-color: hsl(180, 100%, 50%);}
    #header_04 {background-color: hsl(270, 100%, 50%);}
    #header_05 {background-color: hsl(360, 100%, 50%);}
</style>

채도는 0%부터 100% 사이의 값을 가지며, 색상의 연하고 짙은 정도를 나타낸다.
채도 값이 0%면 회색이 되고, 100%면 원래 색상이 된다.

<style>
    #header_01 {background-color: hsl(0, 0%, 50%);}
    #header_02 {background-color: hsl(0, 20%, 50%);}
    #header_03 {background-color: hsl(0, 40%, 50%);}
    #header_04 {background-color: hsl(0, 60%, 50%);}
    #header_05 {background-color: hsl(0, 80%, 50%);}
    #header_06 {background-color: hsl(0, 100%, 50%);}
</style>

명도는 0%부터 100% 사이의 값을 가지며, 색상의 밝고 어두운 정도를 나타낸다.
명도 값이 0%면 검정색이 되고, 50%면 원래 색상, 100%면 흰색이 된다.

<style>
    #header_01 {background-color: hsl(0, 100%, 0%);}
    #header_02 {background-color: hsl(0, 100%, 20%);}
    #header_03 {background-color: hsl(0, 100%, 40%);}
    #header_04 {background-color: hsl(0, 100%, 50%);}
    #header_05 {background-color: hsl(0, 100%, 60%);}
    #header_06 {background-color: hsl(0, 100%, 80%);}
    #header_07 {background-color: hsl(0, 100%, 100%);}
</style>

HSLA 색상값으로 표현

HSLA 색상값은 HSL 색상값에 알파 채널 값을 더한 색상값이다.

<style>
    #header_01 {background-color: hsla(0, 100%, 50%, 0);}
    #header_02 {background-color: hsla(0, 100%, 50%, 0.2);}
    #header_03 {background-color: hsla(0, 100%, 50%, 0.4);}
    #header_04 {background-color: hsla(0, 100%, 50%, 0.6);}
    #header_05 {background-color: hsla(0, 100%, 50%, 0.8);}
    #header_06 {background-color: hsla(0, 100%, 50%, 1);}
</style>

opacity 속성

opacity 속성은 색상에 대한 투명도를 설정해 준다. opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

<style>
    #header_01 {background-color: rgb(0,255,0); opacity:0}
    #header_02 {background-color: rgb(0,255,0); opacity:0.2}
    #header_03 {background-color: rgb(0,255,0); opacity:0.4}
    #header_04 {background-color: rgb(0,255,0); opacity:0.6}
    #header_05 {background-color: rgb(0,255,0); opacity:0.8}
    #header_06 {background-color: rgb(0,255,0); opacity:1}
</style>

opacity 속성과 알파 채널과의 차이점

위에서 살펴본 opacity 속성과 알파 채널 모두 투명도를 조절한다는 공통점을 가지고 있다.

opacity 속성은 투명도를 설정했을 때 설정한 요소의 모든 자식(child) 요소까지 전부 같은 투명도로 설정한다.
하지만 알파 채널은 투명도를 설정한 요소에만 투명도를 설정하는 차이점이 존재한다.

다음 예제는 opacity 속성과 알파 채널과의 차이점을 보여주는 예제이다.

<style>
    #para_01 {background-color: rgb(255,0,0); opacity:0}
    #para_06 {background-color: rgb(255,0,0); opacity:1}
    #para_07 {background-color: rgba(255,0,0,0);}
    #para_12 {background-color: rgba(255,0,0,1);}
</style>

2.2.2 - CSS 입문 | CSS 기본 속성 | CSS 배경 (background)

웹 페이지뿐만 아니라 HTML 요소는 모두 각자의 배경을 가지고 있다.
CSS의 background 속성은 이러한 각 요소의 배경에 다양한 효과를 줄 수 있게 해준다.

CSS background 속성

속성 설명
background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
background-color HTML 요소의 배경색을 설정함.
background-image HTML 요소의 배경 이미지를 설정함.
background-repeat 설정된 배경 이미지의 반복 유무를 설정함.
background-position 반복되지 않는 배경 이미지의 상대 위치를 설정함.
background-attachment 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴.

background-color 속성

background-color 속성은 해당 HTML 요소의 배경색(background color)을 설정한다.

<style>
    body { background-color: lightblue; }
    h1 { background-color: rgb(255,128,0); }
    p { background-color: #FFFFCC; }
</style>

background-image 속성

background-image 속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정한다.
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타낸다.

<style>
    body { background-image: url("/examples/images/img_background_good.png"); }
</style>

background-repeat 속성

배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타낸다.
background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있다.

다음 예제는 배경 이미지의 수평 반복을 보여준다.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
</style>

다음 예제는 배경 이미지의 수직 반복을 보여준다.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }
</style>

배경 이미지가 반복되지 않고 한 번만 나타나게 할 수도 있다.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }
</style>

background-position 속성

background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정한다.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: top right;
    }
</style>

이 속성에서 사용할 수 있는 키워드의 조합은 다음과 같다.

  1. left top
  2. left top
  3. left center
  4. left bottom
  5. right top
  6. right center
  7. right bottom
  8. center top
  9. center center
  10. center bottom

또한, 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있다.
이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 된다.

다음 예제는 배경 이미지의 상대 위치를 픽셀 단위로 직접 명시한 예제이다.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: 100px 200px;
    }
</style>

background-attachment 속성

background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있다.
이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않는다.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: left bottom;
        background-attachment: fixed;
    }
</style>

background 속성 한 번에 적용하기

위에서 언급한 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }
</style>

CSS3 배경

CSS3에서는 배경의 크기뿐만 아니라 위치까지도 마음대로 설정할 수 있다.
또한, 하나의 HTML 요소에 여러 개의 배경 이미지를 적용할 수도 있다.

CSS3에서 새롭게 추가된 background 속성은 다음과 같다.

속성 설명
background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
background-size 배경 이미지의 크기를 설정함.
background-origin 배경 이미지의 위치를 결정할 기준을 설정함.
background-clip 해당 요소의 배경을 어느 영역까지로 설정할지를 결정함.
background-image 하나의 요소에 여러 개의 배경 이미지를 설정함.

CSS3 배경(background) 속성 지원 버전

CSS3 배경(background) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성 ie chrome firefox safari opera
background-size 9.0 4.0 / 1.0 -webkit- 4.0 / 3.6 -moz- 4.1 / 3.0 -webkit- 10.5 / 10.0 -o-
background-origin 9.0 1.0 4.0 3.0 10.5
background-clip 9.0 4.0 4.0 3.0 10.5
여러 개의 배경 이미지 9.0 4.0 3.6 3.1 11.5

background-size 속성

background-size 속성은 배경 이미지의 크기를 설정한다.

CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같다. 하지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있다.

background-size 속성의 문법은 다음과 같다.

background-size: 너비 높이 contain|cover ;

배경 이미지의 너비와 높이를 명시할 때는 CSS 크기 단위를 사용한다.
CSS 크기 단위에는 픽셀 단위(px), 배수 단위(em), 백분율 단위(%) 등이 있다.

<style>
    #origin { background: url(/examples/images/img_monitor.png); background-repeat: no-repeat; }
    #resize {
        background: url(/examples/images/img_monitor.png);
        background-size: 200px 110px;
        background-repeat: no-repeat;
    }
</style>

background-size 속성값은 contain과 cover 중에서 선택할 수 있다.

속성값을 contain으로 설정하면 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절한다.
단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않는다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있다.

속성값을 cover로 설정하면 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절한다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있다.

다음 예제는 background-size 속성값에 따른 차이점을 보여주는 예제이다.

<style>
    #contain { background-size: contain; }
    #cover { background-size: cover; }
</style>

background-size 속성을 사용하여 이미지의 비율을 유지하지 않고, 해당 요소의 전부를 가리도록 설정할 수도 있다.

<style>
    html {  background: url(/examples/images/img_flower.png) no-repeat center fixed;  background-size: cover; }
</style>

background-origin 속성

background-origin 속성은 배경 이미지의 위치를 결정할 기준을 설정한다. 이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있다.

  1. border-box : 배경 이미지를 테두리(border) 영역의 왼쪽 위에 맞춘다.
  2. padding-box : 기본 설정이며, 배경 이미지를 패딩(padding) 영역의 왼쪽 위에 맞춘다.
  3. content-box : 배경 이미지를 내용(content) 영역의 왼쪽 위에 맞춘다.

다음 예제는 background-origin 속성값에 따른 차이점을 보여주는 예제이다.

<style>
    #border { background-origin: border-box; }
    #content { background-origin: content-box; }
</style>

background-clip 속성

background-clip 속성은 해당 요소의 배경을 어느 영역까지 설정할지를 결정한다. 이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있다.

  1. border-box : 기본 설정이며, 배경을 테두리(border) 영역의 끝부분까지 설정한다.
  2. padding-box : 배경을 패딩(padding) 영역의 끝부분까지 설정한다.
  3. content-box : 배경을 내용(content) 영역까지만 설정한다.

다음 예제는 background-clip 속성값에 따른 차이점을 보여주는 예제이다.

<style>
    #padding { background-clip: padding-box; }
    #content { background-clip: content-box; }
</style>

background-image 속성 - 여러 개의 배경 이미지 설정

background-image 속성을 사용하면 하나의 요소에 여러 개의 배경 이미지를 설정할 수 있다.

각각의 배경 이미지는 쉼표(,)로 구분되며, 스택(stack)처럼 차례대로 쌓이게 된다. 배경 이미지들 간의 순서는 가장 처음 명시된 이미지가 가장 위에 나타난다. 즉 가장 나중에 명시된 이미지가 가장 아래쪽에 위치하게 된다.

다음 예제는 background-image 속성을 이용하여 여러 개의 배경 이미지를 설정하는 예제이다.

<style>
    #origin {
        background-image: url(/examples/images/img_man.png), url(/examples/images/img_background_good.png);
        background-position: right top, left;
        background-repeat: no-repeat, repeat;
        background-size: 100px 233px, auto;
    }
</style>

2.2.3 - CSS 입문 | CSS 기본 속성 | CSS 텍스트 (text)

CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같다.

속성 설명
color 텍스트의 색상을 설정함.
direction 텍스트가 쓰이는 방향을 설정함.
letter-spacing 텍스트 내에서 문자 사이의 간격을 설정함.
word-spacing 텍스트 내에서 단어 사이의 간격을 설정함.
text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정함.
text-align 텍스트의 수평 방향 정렬을 설정함.
text-decoration 텍스트에 여러 가지 효과를 설정하거나 제거함.
text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정함.
line-height 텍스트의 줄 간격을 설정함.
text-shadow 텍스트에 그림자 효과를 설정함.
unicode-bidi direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함.
vertical-align HTML 요소 내의 수직 방향 정렬을 설정함.
white-space HTML 요소 내의 여백을 설정함.

color 속성

color 속성은 텍스트의 색상을 설정한다.

웹 페이지에서 텍스트의 기본 색상은 검정색이다. <body> 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용된다. 하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 <body> 태그에 명시된 속성값보다 우선 적용된다.

<style>
    body { color: red; }
    p { color: maroon; }
</style>

direction 속성

direction 속성은 텍스트가 써지는 방향을 설정한다.

웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향으로 써진다. direction 속성이 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향으로 써진다. 하지만, direction 속성이 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써진다.

<style>
    .rightToLeft { direction: rtl; }
</style>

letter-spacing 속성

letter-spacing 속성은 텍스트 내에서 글자 사이의 간격을 설정한다.

<style>
    .decLetterSpacing { letter-spacing: -3px; }
    .incLetterSpacing { letter-spacing: 10px; }
</style>

word-spacing 속성

word-spacing 속성은 텍스트 내에서 단어 사이의 간격을 설정한다.

letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정한다.

<style>
    .decWordSpacing { word-spacing: -3px; }
    .incWordSpacing { word-spacing: 10px; }
</style>

text-indent 속성

text-indent 속성은 단락의 첫 줄에 들여쓰기 할지 안할지를 설정한다.

웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않다.

<style>
    .paraIndent { text-indent: 30px; }
</style>

text-align 속성

text-align 속성은 텍스트의 수평 방향 정렬을 설정한다.

text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용된다.

<style>
    h2 { text-align: left; }
    h3 { text-align: right; }
    h4 { text-align: center; }
</style>

text-decoration 속성

text-decoration 속성은 텍스트를 몇가지 형태로 꾸밀 수 있다.

<style>
    h2 { text-decoration: overline; }
    h3 { text-decoration: line-through; }
    h4 { text-decoration: underline; }
    a { text-decoration: none; }
</style>

text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용한다.

text-transform 속성

text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정한다.

이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시켜 줍니다.
또한, 단어의 첫 문자만을 대문자로 변경시킬 수도 있다.

<style>
    h2 { text-transform: uppercase; }
    h3 { text-transform: lowercase; }
    h4 { text-transform: capitalize; }
</style>

text-transform 속성은 한글에는 영향을 주지 않으며, 오직 영문자에만 적용된다.

line-height 속성

line-height 속성은 텍스트의 줄 간격을 설정한다.

<style>
    .narrowLineHeight { line-height: 0.8; }
    .wideLineHeight { line-height: 1.8; }
</style>

text-shadow 속성

text-shadow 속성은 텍스트에 간단한 그림자 효과를 설정한다.

<style>
    h2 { text-shadow: 2px 1px #3399CC; }
</style>

CSS3 텍스트

CSS3에서는 HTML 문서 내에 존재하는 텍스트를 더욱 다양한 방법으로 조작할 수 있게 되었다. CSS3에서 새롭게 추가된 텍스트에 관한 속성은 다음과 같다.

속성 설명
text-overflow 콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정함.
word-wrap 길이가 긴 단어가 콘텐츠(content) 영역을 벗어나면 그 단어를 다음 줄에 나누어 표현할 수 있도록 함.
word-break 긴 단어를 나누어 표현해야 할 때 해당 단어가 나뉘는 기준을 설정함.
text-emphasis 사용자가 강조 표현을 설정할 수 있도록 함.
text-align-last 텍스트의 마지막 줄의 정렬 방법을 설정함.
text-justify 텍스트의 정렬이 양끝 맞춤으로 되어 있을 때 그 정렬 방법을 설정함.

CSS3 텍스트 속성 지원 버전

CSS3 텍스트 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성 ie chrome firefox safari opera
text-overflow 6.0 4.0 7.0 3.1 11.0 / 9.0 -o-
word-wrap 5.5 23.0 3.5 6.1 12.1
word-break 5.5 4.0 15.0 3.1 15.0

text-overflow 속성

text-overflow 속성은 콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정한다.
영역을 벗어난 텍스트 부분을 자를 수도 있으며, 생략 부호(…)를 사용하여 표현할 수도 있다.

<style>
    p { white-space: nowrap; width: 250px; overflow: hidden; }
    #p_01 { text-overflow: clip; }
    #p_02 { text-overflow: ellipsis; }
</style>

overflow 속성값을 visible로 설정하면, 사용자에게 콘텐츠 영역을 벗어나 생략된 텍스트까지 보여줄 수 있다.

<style>
    #p_01:hover, #p_02:hover { overflow: visible; }
</style>

word-wrap 속성

word-wrap 속성은 콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현할 수 있도록 해준다.

<style>
    p { border: solid 1px black; width: 130px; }
    #p_01, #p_03 { word-wrap: break-word; }
</style>

word-wrap 속성은 영문자로 구성된 단어에만 적용되며, 한글에는 적용되지 않는다.

word-break 속성

word-break 속성은 길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준을 설정한다.
단어를 문자별로 나눌 수도 있으며, 하이픈(-)을 기준으로 나눌 수도 있다.

<style>
    p { border: solid 1px black; width: 130px; }
    #p_02 { word-break: break-all; }
    #p_03 { word-break: keep-all; }
</style>

위의 예제에서 word-wrap 속성과 word-break 속성의 차이를 확인할 수 있다.

word-break 속성은 영문자로 구성된 단어에만 적용되며, 한글은 자동으로 속성값이 break-all로 적용된다.

2.2.4 - CSS 입문 | CSS 기본 속성 | CSS 글꼴 (font)

CSS를 사용하면 웹 페이지에 나타나는 글꼴(Font)을 다양하게 설정할 수 있다.

CSS font 속성

CSS에서 사용할 수 있는 font 속성은 다음과 같다.

속성 설명
font 모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
font-family 텍스트의 글꼴 집합(font family)을 설정함.
font-style 주로 이탤릭체를 사용하기 위해 사용함.
font-variant 텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴.
font-weight 텍스트를 얼마나 두껍게 표현할지를 설정함.
font-size 텍스트의 크기를 설정함.

CSS 글꼴 집합(font-family)

CSS에는 두 가지의 글꼴 집합(font family)이 존재한다.

  • generic family : 비슷한 모양을 가지는 글꼴 집합 (“Serif”, “Monospace” 등)
  • font family : 특정 글꼴 집합 (“Times”, “Courier” 등)

font-family 속성

font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있다. font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들인다.
만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 된다.
이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 된다.

글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 한다.
또한, 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 짓는다.

<style>
    .serif { font-family: "Times New Roman", Times, serif; }
    .sansserif { font-family: Arial, Helvetica, sans-serif; }
</style>

font-style 속성

font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 다음과 같이 3가지의 속성값을 가진다.

  • normal : 텍스트에 어떠한 스타일도 적용하지 않는다.
  • italic : 텍스트를 이탤릭체로 나타낸다.
  • oblique : 텍스트를 기울인다. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없다.
<style>
    .normal { font-style: normal; }
    .italic { font-style: italic; }
    .oblique { font-style: oblique; }
</style>

font-variant 속성

font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킨다.
이때 영문자 중 대문자는 기존 크기 그대로 출력한다.
작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미한다.

<style>
    .normal { font-variant: normal; }
    .smallCaps { font-variant: small-caps; }
</style>

font-variant 속성은 한글에는 적용되지 않으며, 영문자에만 적용됩니다.

font-weight 속성

font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정한다.
사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있다.
또한, 100, 200, 300, … , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있다.

<style>
    .normal { font-weight: normal; }
    .bold { font-weight: 600; }
    .bolder { font-weight: bolder; }
</style>

font-size 속성

font-size 속성은 텍스트의 크기를 설정한다.

웹 디자인에서 텍스트의 크기는 매우 중요한 표현 요소이긴, 하지만 제목을 표현하기 위해서 텍스트의 크기만을 크게 해서는 안 된다. 이때에는 HTML 요소인 <h1> - <h6>태그를 제목을 표현해야 한다.

font-size 속성값

font-size 속성값은 다음과 같이 두 가지 방식으로 표현할 수 있다.

  1. 절대적 크기
  2. 상대적 크기

절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용한다. 절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현된다.

상대적 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식이다. 또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있다.

font-size의 크기 단위

font-size 속성값에 자주 사용되는 대표적인 크기 단위는 다음과 같다.

백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다. 배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다. 픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정한다.

<style>
    body { font-size: 100%; }
    #large { font-size: 2.5em; }
    #small { font-size: 0.7em; }
    #fixed { font-size: 20px; }
</style>

배수 단위(em)로 설정된 텍스트는 사용자가 웹 브라우저를 통해 크기를 재조정할 수 있다.

2.2.5 - CSS 입문 | CSS 기본 속성 | CSS 링크 (link)

CSS를 사용하면 링크에 다양한 효과를 설정할 수 있다.

링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있다.
또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있다.

<style>
    a {
        background-color: #FFFFE0;
        color: darkslategray;
        font-size: 1.3em;
        text-decoration: none;
    }
</style>

링크(link)의 상태

링크는 총 5가지의 상태를 가지며, 각 상태마다 다른 스타일을 적용할 수 있다.

  1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태이다.
  2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태이다.
  3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태이다.
  4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태이다.
  5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태이다.
<style>
    a:link { color: olive; }
    a:visited { color: brown; }
    a:hover { color: coral; }
    a:active { color: khaki; }
</style>

링크를 활용한 버튼(Button)

CSS를 이용하면 간단하게 링크를 버튼처럼 만들 수 있다.

<style>
    a:link, a:visited {
        background-color: #FFA500;
        color: maroon;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    a:hover, a:active { background-color: #FF4500; }
</style>

2.2.6 - CSS 입문 | CSS 기본 속성 | CSS 리스트 (list)

CSS를 이용하면 리스트에 다양한 효과를 적용할 수 있다.

CSS에서 사용할 수 있는 list-style 속성은 다음과 같다.

  1. list-style-type
  2. list-style-image
  3. list-style-position

list-style-type 속성

리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 한다.
list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있다.

<style>
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .upperAlpha { list-style-type: upper-alpha; }
    .lowerRoman { list-style-type: lower-roman; }
</style>

사용할 수 있는 마커(marker)에 대한 더 자세한 사항은 HTML 리스트 수업에서 확인할 수 있다.

list-style-image 속성

list-style-image 속성을 이용하면 마커(marker)로 자신만의 이미지를 사용할 수 있다.

<style>
    .imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }
</style>

list-style-position 속성

list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있다.
list-style-position 속성의 기본 속성값은 outside로 설정되어 있다.

<style>
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
</style>

list-style 속성 한 번에 적용하기

위에서 언급한 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    ul { list-style: square inside url("/examples/images/img_list_marker.png"); }
</style>

리스트에 배경색 적용

CSS를 사용하면 리스트 전체뿐만 아니라 리스트 요소별로도 각각의 배경색을 설정할 수 있다.

<style>
    ul { background: #D2691E; padding: 15px; }
    ol { background: #6495ED; padding: 15px; }
    ul li { background: #DEB887; margin: 5px; }
    ol li { background: #00FFFF; margin-left: 15px; }
</style>

CSS list-style 속성

속성 설명
list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
list-style-type 리스트 요소의 마커(marker)를 설정함.
list-style-image 리스트 요소의 마커로 사용할 이미지를 설정함.
list-style-position 리스트 요소의 위치를 설정함.

2.2.7 - CSS 입문 | CSS 기본 속성 | CSS 테이블 (table)

CSS를 이용하면 다양한 형태의 테이블을 만들 수 있다.

테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있다.

속성 설명
border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함.
border-spacing 테이블 요소(th, td)간의 여백을 설정함.
caption-side 테이블의 캡션(caption)을 설정함.
empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함.
table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정함.

border 속성

border 속성으로 테이블의 테두리(border)를 설정할 수 있다.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 된다.

<style>
    table, th, td { border: 2px solid orange; }
</style>

위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <th> 태그와 <td> 태그가 각각 자신만의 테두리를 가지고 있기 때문이다. 위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 한다.

border-collapse 속성

border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현된다. 이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현하게 된다.

<style>
    table, th, td { border: 2px solid orange; }
    table { border-collapse: collapse; }
</style>

border-spacing 속성

border-spacing 속성은 테이블 요소(th, td)간의 여백을 설정해 준다.

<style>
    table, th, td { border: 1px solid black; }
    table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }
</style>

text-align 속성

text-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정한다.
<th> 태그 내부는 가운데 정렬이, <td> 태그 내부는 왼쪽 정렬이 기본 설정이다.

<style>
    table, th, td { border: 1px solid black; }
    table { border-collapse: collapse; width: 100%; }
    th { text-align: left; }
    td { text-align: center; }
</style>

vertical-align 속성

vertical-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정한다. <th> 태그와 <td> 태그 모두 가운데 정렬이 기본 설정이다.

<style>
    table, th, td { border: 1px solid black; }
    table { border-collapse: collapse; width: 100%; }
    th { vertical-align: top; height: 50px; }
    td { vertical-align: bottom; height: 50px; }
</style>

다양한 형태의 테이블 예제

CSS를 이용하면 HTML 기본 테이블을 훨씬 더 다양한 모습으로 설정할 수 있다.

다음 예제는 <th>태그와 <td> 태그에 border-bottom 속성을 사용하여 수평 나눔선만으로 만든 테이블이다.

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
</style>

다음 예제는 :hover 선택자를 이용하여 <tr> 태그에 마우스를 올리면 행 전체가 하이라이트 되도록 만든 테이블이다.

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
    tr:hover { background-color: #F5F5F5; }
</style>

다음 예제는 background-color 속성과 :nth-child 선택자를 사용하여 얼룩무늬 효과를 설정한 테이블이다.

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; }
    tr:nth-child(odd) { background-color: #F3F3F3; }
</style>

2.2.8 - CSS 입문 | CSS 기본 속성 | CSS 컨텐트(content)

a:after {
    content: " (" attr(href) ")";
}

Browser Support The numbers in the table specify the first browser version that fully supports the property.

Property
content 1.0 8.0 1.0 1.0 4.0

2.2.9 - CSS 입문 | CSS 기본 속성 | CSS 카운터(counter)

내용 준비중…

2.2.10 - CSS 입문 | CSS 기본 속성 | CSS 마우스 커서(cursor)

cursor 속성을 이용하면 마우스 커서의 형태를 지정할 수 있다. 글자위에 마우스를 올리면 모양이 변한다.

<p style="cursor:auto">Auto</p>
<p style="cursor:crosshair">Crosshair</p>
<p style="cursor:default">Default</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:move">Move</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>

2.3 - CSS 입문 | CSS 박스 모델

2.3.1 - CSS 입문 | CSS 박스 모델 | 크기 (height/width)

CSS 크기(Dimension)

CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있다.
CSS에서 크기 조절을 위해 사용할 수 있는 속성은 다음과 같다.

속성 설명
height 해당 HTML 요소의 높이를 설정함.
width 해당 HTML 요소의 너비를 설정함.
max-width 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함.
min-width 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함.
max-height 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함.
min-height 해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함.

height와 width 속성

height와 width 속성은 HTML 요소의 높이와 너비를 각각 설정한다.
이 속성의 기본 설정값은 auto이며, 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정해 준다.

<style>
    div { height: 200px; width: 500px; }
</style>

max-width 속성

max-width 속성은 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정한다.
이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미이다.

width 속성으로 너비를 설정하면, 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성하게 된다.
하지만 max-width 속성으로 너비를 설정하면 다음과 같이 좀 더 유연한 결과를 얻을 수 있다.
max-width 속성으로 너비를 설정하면 줄어드는 웹 브라우저의 크기에 맞춰 해당 HTML 요소의 너비도 자동으로 줄어든다.

<style>
    div.maxWidth { max-width: 500px; }
</style>

min-width 속성

min-width 속성은 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정한다. 이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미이다.

min-width 속성이 설정된 요소에 width 속성값을 따로 설정하지 않으면 초기 너비(width)는 100%를 가지게 된다. 이때 웹 브라우저의 크기가 줄어들면 거기에 맞춰 HTML 요소의 너비도 자동으로 줄어든다. 하지만 웹 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면, HTML 요소의 너비는 더는 줄어들지 않고 수평 스크롤 바를 생성하게 된다.

<style>
    div.minWidth { min-width: 500px; }
</style>

max-height 속성

max-height 속성은 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정한다. 이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 크기에 따라 높이가 자동으로 설정된다.

max-height 속성으로 최대 높이를 설정하면, 해당 HTML 요소의 높이를 설정된 높이 이하로 제한한다. 만약 해당 요소의 높이가 설정된 최대 높이보다 클 경우에는 수직 스크롤 바를 생성하게 된다.

<style>
    p { max-height: 50px; overflow: auto; }
</style>

min-height 속성

min-height 속성은 지정된 HTML 요소가 가질 수 있는 최소 높이(height)를 설정한다.
이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 높이에 제한을 두지 않겠다는 의미이다.

min-height 속성을 설정하면 해당 HTML 요소의 높이를 설정된 높이 이하로 제한한다.
즉 height 속성값이 min-height 속성값 이하로 낮아지지 않도록 한다. 이러한 min-height 속성값은 max-height 속성값과 height 속성값보다 먼저 적용된다.

<style>
    p { min-height: 100px; }
</style>

2.3.2 - CSS 입문 | CSS 박스 모델 | 크기 단위(units)

CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있다.

그 중에서도 가장 많이 쓰이는 크기 단위는 다음과 같다.

  1. 백분율 단위(%)
  2. 배수 단위(em)
  3. 픽셀 단위(px)

백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다.
배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다.
픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정한다.

<style>
    #large { font-size: 200%; }
    #small { font-size: 0.7em; }
    #fixed { font-size: 20px; }
</style>

NOTE
1배 = 1em = 100%를 의미합니다.

2.3.3 - CSS 입문 | CSS 박스 모델 | 박스 모델(box model)

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.

CSS Box Model

  1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다.
  2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않는다.
  3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리이다.
  4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않는다.
<style>
    div {
        background-color: red;
        padding: 50px;
        border: 20px solid maroon;
        margin: 50px;
    }
</style>

height와 width 속성의 이해

모든 웹 브라우저에서 정확하게 HTML 요소들을 표현하려면 이러한 박스 모델이 어떻게 동작하는지 정확히 알아야 한다. CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다. HTML 요소의 height와 width 속성으로 설정된 높이와 너비에 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않는다.

<style>
    div {
        width: 320px;
        padding: 10px;
        border: 5px solid maroon;
        margin: 0;
    }
</style>

HTML 요소의 높이와 너비 구하기

[css box size]

위의 그림에서 전체 너비(width)를 계산해 보면,
width(70px) + left margin(10px) + left padding(5px) + right padding(5px) + right margin(10px) = 100px 이 된다.

즉, HTML 요소의 전체 너비(width)를 계산하는 공식은
width + left padding + right padding + left border + right border + left margin + right margin 이다.

또한, HTML 요소의 전체 높이(height)를 계산하는 공식은
height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 이다.

이때 마진(margin) 영역의 크기는 눈으로 바로 확인할 수는 없을 것이다.
왜냐하면 마진이란 테두리(border)와 이웃하는 요소 사이의 간격이면서, 배경색의 영향을 받지 않기 때문이다. 하지만 HTML 요소가 차지하는 크기에는 포함된다.

익스플로러 8과 그 이전 버전에서는 width나 height 속성으로 설정한 너비나 높이에 패딩과 테두리의 크기까지 포함된다. 이러한 차이점을 없애기 위해서는 반드시 HTML 문서에 <!DOCTYPE html>태그를 삽입해야만 한다.

2.3.4 - CSS 입문 | CSS 박스 모델 | 패딩(padding)

padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다.
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받는다.
CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있다.

패딩(padding) 속성

CSS에서는 HTML 요소의 패딩 영역을 설정하기 위해 다음과 같은 속성을 제공한다.

속성 설명
padding 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
padding-top 윗쪽의 패딩(padding) 값을 설정함.
padding-right 오른쪽의 패딩(padding) 값을 설정함.
padding-bottom 아래쪽의 패딩(padding) 값을 설정함.
padding-left 왼쪽의 패딩(padding) 값을 설정함.

 

<style>
    div.pad {
        padding-top: 50px;
        padding-right: 10px;
        padding-bottom: 30px;
        padding-left: 100px;
    }
</style>

패딩 축약 표현(padding shorthand)

모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    div.four { padding: 20px 50px 30px 50px; }
    div.three { padding: 20px 50px 30px; }
</style>

4개의 padding 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.
ex) padding: 10px 20px 30px 40px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

3개의 padding 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.
ex) padding: 10px 20px 30px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

2개의 padding 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.
ex) padding: 10px 20px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

1개의 padding 속성값을 가질 때는 모든 패딩값을 같게 설정한다.
ex) padding: 10px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

2.3.5 - CSS 입문 | CSS 박스 모델 | 테두리(border)

border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리(border)의 스타일을 설정할 수 있게 해준다.

CSS border 속성은 다음과 같다.

속성 설명
border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-style 테두리(border)를 다양한 모양으로 설정함.
border-width 테두리(border)의 너비를 설정함.
border-color 테두리(border)의 색상을 설정함.
border-top 테두리(border)의 top 부분 속성을 한 번에 설정함.
border-top-style 테두리(border)의 top 부분의 스타일을 설정함.
border-top-width 테두리(border)의 top 부분의 너비를 설정함.
border-top-color 테두리(border)의 top 부분의 색상을 설정함.
border-right 테두리(border)의 right 부분 속성을 한 번에 설정함.
border-right-style 테두리(border)의 right 부분의 스타일을 설정함.
border-right-width 테두리(border)의 right 부분의 너비를 설정함.
border-right-color 테두리(border)의 right 부분의 색상을 설정함.
border-bottom 테두리(border)의 bottom 부분 속성을 한 번에 설정함.
border-bottom-style 테두리(border)의 bottom 부분의 스타일을 설정함.
border-bottom-width 테두리(border)의 bottom 부분의 너비를 설정함.
border-bottom-color 테두리(border)의 bottom 부분의 색상을 설정함.
border-left 테두리(border)의 left 부분 속성을 한 번에 설정함.
border-left-style 테두리(border)의 left 부분의 스타일을 설정함.
border-left-width 테두리(border)의 left 부분의 너비를 설정함.
border-left-color 테두리(border)의 left 부분의 색상을 설정함.

border-style 속성

border-style 속성을 이용하면 테두리(border)를 다양한 모양으로 설정할 수 있다.

  • dotted : 테두리를 점선으로 설정함.
  • dashed : 테두리를 약간 긴 점선으로 설정함.
  • solid : 테두리를 실선으로 설정함.
  • double : 테두리를 이중 실선으로 설정함.
  • groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
  • ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
  • inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
  • outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
  • none : 테두리를 없앰.
  • hidden : 테두리가 존재하기는 하지만 표현되지는 않음.
<style>
    .dotted {border-style: dotted;}
    .dashed {border-style: dashed;}
    .solid {border-style: solid;}
    .double {border-style: double;}
    .groove {border-style: groove;}
    .ridge {border-style: ridge;}
    .inset {border-style: inset;}
    .outset {border-style: outset;}
    .none {border-style: none;}
    .hidden {border-style: hidden;}
    .mix {border-style: solid dashed dotted double;}
</style>

border-width 속성

border-width 속성은 테두리(border)의 두께를 설정한다.
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있다.
또한, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있다.

<style>
    .dottedA { border-style: dotted; border-width: 2px; }
    .dottedB { border-style: dotted; border-width: 5px; }
    .dashedA { border-style: dashed; border-width: thin; }
    .dashedB { border-style: dashed; border-width: thick; }
    .doubleA { border-style: double; border-width: 5px; }
    .doubleB { border-style: double; border-width: thick; }
    .mix { border-style: solid; border-width: 1px 2px 10px thick; }
</style>

border-color 속성

border-color 속성은 테두리(border)의 색상을 설정한다.
기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있다.
border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받는다.

<style>
    .red { border-color: red; }
    .green { border-color: rgb(0,255,0); }
    .blue { border-color: #0000FF; }
    .mix { border-color: red green blue maroon; }
    .color { color: teal; }
</style>

테두리(border)의 개별 설정

CSS를 사용하면 테두리의 위쪽, 오른쪽, 아래쪽, 왼쪽 부분에 대하여 개별적으로 스타일을 적용할 수 있다.

<style>
    .mixA {
        border-top-style: dotted;
        border-right-style: double;
        border-bottom-style: dotted;
        border-left-style: double;
    }
    .mixB { border-style: dotted double; }
</style>

4개의 border-style 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.
ex) border-style: dotted dashed solid double;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid; 
border-style-left: double;

3개의 border-style 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.
ex) border-style: dotted dashed solid;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid;
border-style-left: dashed;

2개의 border-style 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.
ex) border-style: dotted dashed;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: dotted; 
border-style-left: dashed;

1개의 border-style 속성값을 가질 때는 모든 테두리의 스타일을 같게 설정한다.
ex) border-style: dotted;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;  
border-style-right: dotted;  
border-style-bottom: dotted;  
border-style-left: dotted;  

테두리 축약 표현(border shorthand)

모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    .good { border: 3px solid teal; }
    .wrong { border: 5px teal; }
</style>

border 속성을 설정하기 위해서는 반드시 border-style 속성이 먼저 설정되어 있어야 한다.

CSS3 테두리

CSS3에서는 테두리의 모서리를 둥글게 만들거나, 테두리에 이미지를 사용할 수 있다.

CSS3에서 새롭게 추가된 border 속성은 다음과 같다.

속성 설명
border-radius 모든 border-radius 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-top-left-radius 테두리(border)의 top-left 부분 모서리의 스타일을 설정함.
border-top-right-radius 테두리의 top-right 부분 모서리의 스타일을 설정함.
border-bottom-right-radius 테두리의 bottom-right 부분 모서리의 스타일을 설정함.
border-bottom-left-radius 테두리의 bottom-left 부분 모서리의 스타일을 설정함.
border-image 모든 border-image 속성을 이용한 스타일 설정이 한 줄에 가능함.
border-image-source 테두리로 사용할 이미지를 설정함.
border-image-slice 테두리로 사용할 이미지를 자르는 방법을 설정함.
border-image-width 테두리로 사용할 이미지의 너비를 설정함.
border-image-outset 테두리 영역 너머로 테두리로 사용할 이미지가 얼마만큼 넘어갈지를 설정함.
border-image-repeat 테두리로 사용할 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지를 설정함.

CSS3 테두리(border) 속성 지원 버전

CSS3 테두리(border) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성 ie chrome firefox safari opera
border-radius 9.0 5.0 4.0 -webkit- 4.0 / 3.0 -moz- 5.0 / 3.1 -webkit- 10.5
border-image 11.0 16.0 / 4.0 -webkit- 15.0 / 3.5 -moz- 6.0 / 3.1 -webkit- 15.0 / 11.0 -o-

border-radius 속성

CSS3에서는 모든 HTML 요소에 border-radius 속성을 설정하여 모서리를 둥글게 만들 수 있다.

<style>
    #p_01 { height: 150px; width: 200px; border-radius: 25px; }
    #div_01 { height: 150px; width: 200px; border-radius: 25px; }
    #p_02 {
        background: url(/examples/images/img_background_good.png);
        background-position: left top;
        background-repeat: repeat;
        border-radius: 25px;
    }
</style>

border-radius 속성은 실제로 다음 네 가지 속성의 스타일을 한 줄에 설정한 것이다.
따라서 다음 속성들을 각각 사용하면 모서리별로 따로 스타일을 설정할 수 있다.

  1. border-top-left-radius
  2. border-top-right-radius
  3. border-bottom-right-radius
  4. border-bottom-left-radius

다음 예제는 모서리별로 다른 크기의 둥근 모서리를 설정하는 예제이다

<style>
    #p_01 {
        border-top-left-radius: 20px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 60px;
        border-bottom-left-radius: 80px;
    }
</style>

또한, border-radius 속성을 이용해도 모서리별로 다른 크기의 둥근 모서리를 설정할 수 있다.

<style>
    #p_01 { border-radius: 20px 40px 60px 80px; }
    #p_02 { border-radius: 20px 40px 60px; }
    #p_03 { border-radius: 20px 40px; }
    #p_04 { border-radius: 20px; }
</style>

4개의 border-radius 속성값을 가질 때는 top-left, top-right, bottom-right, bottom-left 순으로 설정된다.
ex) border-radius: 20px 40px 60px 80px; (위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.) border-top-left-radius: 20px; border-top-right-radius: 40px; border-bottom-right-radius: 60px; border-bottom-left-radius: 80px;

3개의 border-radius 속성값을 가질 때는 top-left, top-right와 bottom-left, bottom-right 순으로 설정된다.
ex) border-radius: 20px 40px 60px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-top-left-radius: 20px;  
border-top-right-radius: 40px;  
border-bottom-right-radius: 60px;  
border-bottom-left-radius: 40px;  

2개의 border-radius 속성값을 가질 때는 top-left와 bottom-right, top-right와 bottom-left 순으로 설정된다.
ex) border-radius: 20px 40px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-top-left-radius: 20px;  
border-top-right-radius: 40px;  
border-bottom-right-radius: 20px;  
border-bottom-left-radius: 40px;

1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 같은 값으로 설정된다.
ex) border-radius: 20px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-top-left-radius: 20px;  
border-top-right-radius: 20px;  
border-bottom-right-radius: 20px;  
border-bottom-left-radius: 20px;  

border-image 속성

CSS3에서는 요소를 둘러싸는 테두리(border)에 이미지를 사용할 수 있다.

border-image 속성은 다음과 같은 순서로 동작한다.

  1. 테두리(border)로 사용할 이미지를 결정한다.
  2. 이미지의 어느 부분을 자를 것인지 결정한다.
  3. 테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정한다.

우선 테두리로 사용할 이미지를 결정한다.

devkuma Border

border-image 속성은 설정된 이미지를 바둑판처럼 9조각으로 나눈다.

그 후에 top, right, bottom, left에 해당하는 영역의 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정하게 된다.

다음 예제는 round 속성값을 사용하여 테두리 중간 부분의 처리를 반복으로 설정한 예제이다.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round;
    }
</style>

border-image 속성을 설정하기 위해서는 반드시 border 속성이 먼저 설정되어 있어야 한다.

다음 예제는 stretch 속성값을 사용하여 테두리 중간 부분의 처리를 늘리는 것으로 설정한 예제이다.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
    }
</style>

위의 예제에서 볼 수 있듯이 border-image 속성값으로 전달되는 인수의 기본 단위는 %이다.

또한, 수직 테두리와 수평 테두리의 처리 방식을 다르게 설정할 수도 있다.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
    }
</style>

border-image 속성은 실제로 다음 5가지 속성의 스타일을 한 줄에 설정한 것이다.

  1. border-image-source
  2. border-image-slice
  3. border-image-width
  4. border-image-outset
  5. border-image-repeat

2.3.6 - CSS 입문 | CSS 박스 모델 | 마진(margin)

마진(margin)

margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다.
이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않는다.
CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있다.

마진(margin) 속성

CSS에서는 HTML 요소의 마진 영역을 설정하기 위해 다음과 같은 속성을 제공한다.

속성 설명
margin 모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
margin-top 윗쪽의 마진(margin) 값을 설정함.
margin-right 오른쪽의 마진(margin) 값을 설정함.
margin-bottom 아래쪽의 마진(margin) 값을 설정함.
margin-left 왼쪽의 마진(margin) 값을 설정함.

margin 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹치게 할 수도 있다.

<style>
div.mar {
    margin-top: -25px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-left: 100px;
}
</style>

margin 속성값을 inherit로 설정하면, 부모(parent) 요소의 margin 속성값을 그대로 물려받는다.

<style>
    div.parent { height: 100px; margin-left: 100px; }
    div.child { background-color: #FFF8DC; margin-left: inherit; }
</style>

마진 축약 표현(margin shorthand)

모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    div.four { margin: 20px 50px 30px 50px; }
    div.three { margin: 20px 50px 30px; }
</style>

4개의 margin 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.
ex) margin: 10px 20px 30px 40px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

margin-top: 10px;  
margin-right: 20px;  
margin-bottom: 30px;  
margin-left: 40px;  

3개의 margin 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.
ex) margin: 10px 20px 30px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

margin-top: 10px;  
margin-right: 20px;  
margin-bottom: 30px;  
margin-left: 20px;

2개의 margin 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.
ex) margin: 10px 20px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

margin-top: 10px;  
margin-right: 20px;  
margin-bottom: 10px;  
margin-left: 20px;

1개의 margin 속성값을 가질 때는 모든 마진값을 같게 설정한다.
ex) margin: 10px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

margin-top: 10px;  
margin-right: 10px;  
margin-bottom: 10px;  
margin-left: 10px;

maring 속성값에 auto를 사용하는 이유

margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정한다.
즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 된다.
그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 된다.

<style>
    div {
        border: 2px solid teal;
        width: 300px;
        margin: auto;
    }
</style>

2.3.7 - CSS 입문 | CSS 박스 모델 | 아웃라인(outline)

아웃라인(outline)

outline 속성은 HTML 요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일을 설정한다.
이 속성은 border 속성과 마찬가지로 style, width, color 속성을 가진다.

하지만 outline 속성은 border 속성과는 달리 HTML 요소의 전체 크기에는 포함되지 않는다.
HTML 요소의 높이나 너비는 outline의 두께에 전혀 영향을 받지 않는다.

CSS outline 속성

속성 설명
outline 모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
outline-style 아웃라인(outline)를 다양한 모양으로 설정함.
outline-width 아웃라인(outline)의 너비를 설정함.
outline-color 아웃라인(outline)의 색상을 설정함.
outline-offset 테두리(border)와 아웃라인(outline) 사이의 여백을 설정함.

outline-style 속성

outline-style 속성을 이용하면 아웃라인(outline)을 다양한 모양으로 설정할 수 있다.

  1. dotted : 아웃라인을 점선으로 설정함.
  2. dashed : 아웃라인을 약간 긴 점선으로 설정함.
  3. solid : 아웃라인을 실선으로 설정함.
  4. double : 아웃라인을 이중 실선으로 설정함.
  5. groove : 아웃라인을 3차원인 입체적인 선으로 설정하며, outline-color 속성값에 영향을 받음.
  6. ridge : 아웃라인을 3차원인 능선효과가 있는 선으로 설정하며, outline-color 속성값에 영향을 받음.
  7. inset : 3차원인 내지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
  8. outset : 3차원인 외지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
  9. none : 아웃라인(outline)을 없앰.
  10. hidden : 아웃라인(outline)이 존재하기는 하지만 표현되지는 않음.
<style>
    p.dotted {outline-style: dotted;}
    p.dashed {outline-style: dashed;}
    p.solid {outline-style: solid;}
    p.double {outline-style: double;}
    p.groove {outline-style: groove;}
    p.ridge {outline-style: ridge;}
    p.inset {outline-style: inset;}
    p.outset {outline-style: outset;}
    p.none {outline-style: none;}
    p.hidden {outline-style: hidden;}
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야 outline 속성이 제대로 표현됩니다.

outline-width 속성

outline-width 속성은 아웃라인(outline)의 두께를 설정한다.
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있다.
또한, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있다.

<style>
    p.solidA { outline-style: solid; outline-color: violet; outline-width: 2px; }
    p.solidB { outline-style: solid; outline-color: coral; outline-width: 7px; }
    p.dashedA { outline-style: dashed; outline-color: violet; outline-width: thin; }
    p.dashedB { outline-style: dashed; outline-color: coral; outline-width: thick; }
</style>

outline-color 속성

outline-color 속성은 아웃라인(outline)의 색상을 설정한다.
기본적인 color 속성값들뿐만 아니라 색반전을 나타내는 invert 속성값을 사용할 수 있다.
또한, invert 속성값은 배경색과 상관없이 아웃라인을 보여주기 위한 색반전을 설정한다.

<style>
    p { border: 1px solid black; outline-style: dashed; }
    p.red { outline-color: red; }
    p.green { outline-color: rgb(0,255,0); }
    p.blue { outline-color: #0000FF; }
    p.invert { outline-color: invert; }
</style>

아웃라인 축약 표현(outline shorthand)

모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    p { border: 1px solid black; }
    p.none { border-style: none; }
    p.good { outline: 3px solid teal; }
    p.wrong { outline: 5px teal; }
</style>

outline 속성을 설정하기 위해서는 반드시 outline-style 속성이 먼저 설정되어 있어야 합니다.

2.4 - CSS 입문 | CSS 위치 속성

2.4.1 - CSS 입문 | CSS 위치 속성 | 디스플레이 (display)

CSS 디스플레이 (display)

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.

대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가진다.

  1. 블록(block)
  2. 인라인(inline)

블록(block)

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<div?>, <h1>, <p>, <ul>, <ol>, <form> 요소는 대표적인 블록(block) 요소이다.

인라인(inline)

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

<span>, <a>, <img> 요소는 대표적인 인라인(inline) 요소이다.

display 속성의 기본 설정값의 변경

HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있다.

하지만 display 속성값이 블록인 요소의 속성값을 인라인으로 바꿀 수 있다.
또한, 반대로 display 속성값이 인라인인 요소의 속성값을 블록으로 바꿀 수도 있다.

이렇게 HTML 요소의 display 속성값을 변경함으로써 웹 페이지를 개발자가 원하는 모양으로 변경할 수 있다.

<style>
    li { display: inline; }
</style>

위의 예제에서 블록 요소인 <li>요소의 display 속성값을 인라인으로 변경하고 있다.
display 속성값이 인라인으로 변경된 <li>요소는 해당 라인의 모든 너비를 차지하는 블록 요소의 특징을 잃어버리게 된다.

display 속성값을 변경해도, 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아니다.
즉, display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 포함할 수 없다.
왜냐하면, 처음부터 display 속성값이 블록인 요소만이 내부에 다른 요소를 포함할 수 있기 때문이다.

인라인-블록(inline-block)

인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있다.
display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작한다.
하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작한다.

이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다.
또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 된다.

다음 예제는 다양한 display 속성값의 동작을 보여주는 예제이다.

<style>
    div { width: 100px; height: 50px; }
 
    .first { background-color: aqua; }
    .second { background-color: green; }
    .third { background-color: yellow; }
 
    .inline { display: inline; }
    .inline-block { display: inline-block; }
</style>

위의 예제처럼 display 속성값이 인라인-블록으로 설정된 요소들은 인라인 요소처럼 한 줄로 늘어서게 된다.
하지만 블록 요소처럼 너비와 높이를 설정할 수 있게 된다.
따라서 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용된다.

visibility 속성

visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정한다.
따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재하게 된다.
visibility 속성을 자바스크립트와 함께 사용하면 매우 복잡한 메뉴나 레이아웃을 손쉽게 만들 수 있다.

visibility 속성에 사용할 수 있는 속성값은 다음과 같다.

  1. visible : 해당 HTML 요소를 웹 페이지에 나타낸다.
  2. hidden : HTML 요소를 웹 페이지에 나타내지 않습니다. 하지만 여전히 웹 페이지의 레이아웃에는 존재한다.
  3. collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여준다.

HTML 요소 숨기기

HTML 요소를 숨기기 위해서는 display 속성값을 none으로 설정하면 된다. 이렇게 하면 해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않는다.

또한, visibility 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있다. 하지만 display 속성값을 none으로 설정한 것과는 달리, 눈에 보이지만 않을 뿐 여전히 웹 페이지의 레이아웃에는 존재하게 된다.

<style>
    p.none { display: none; }
    p.hidden { visibility: hidden; }
</style>

따라서 민감하거나 귀중한 데이터를 visibility 속성을 이용하여 감추는 것은 바람직하지 않다.

opacity 속성

opacity 속성을 이용하면 HTML 요소의 투명도를 간단히 조절할 수 있다. opacity 속성값은 0.0부터 1.0까지 설정할 수 있으며, 속성값이 0에 가까울수록 투명한 상태가 된다.

익스플로러 8과 그 이전 버전에서는 투명도를 표현하기 위해 다음과 같은 문법을 사용한다.

문법

filter:alpha(opacity=x)

여기서 x값은 0부터 100까지 설정할 수 있으며, x값이 0에 가까울수록 투명한 상태가 된다.

다음 예제는 대부분의 웹 브라우저뿐만 아니라 익스플로러 8과 그 이전 버전에서도 투명도를 정확하게 표현하는 예제이다.

<style>
    img { opacity: 0.4; filter: alpha(opacity=40); }
    img:hover { opacity: 1.0; filter: alpha(opacity=100); }
</style>

2.4.2 - CSS 입문 | CSS 위치 속성 | 포지션 (position)

position 속성

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정한다.
CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있다.

  1. 정적 위치(static position) 지정 방식
  2. 상대 위치(relative position) 지정 방식
  3. 고정 위치(fixed position) 지정 방식
  4. 절대 위치(absolute position) 지정 방식

정적 위치(static position) 지정 방식

HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식이다.

position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다.
정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.

<style>
    div { position: static; }
</style>

모든 HTML 요소의 position 속성의 기본 설정값은 static이다.

상대 위치(relative position) 지정 방식

상대 위치(relative position) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식이다.

HTML 요소의 기본 위치란 해당 요소가 정적 위치(static position) 지정 방식일 때 결정되는 위치를 의미한다.

<style>
    div.relative { position: relative; left: 30px; }
</style>

고정 위치(fixed position) 지정 방식

고정 위치(fixed position) 지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식이다.

즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.

<style>
    div.fixed { position: fixed; top: 0; right: 0; }
</style>

절대 위치(absolute position) 지정 방식

절대 위치(absolute position) 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작한다. 단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 된다.

하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 된다.

<style>
    div.absolute { position: absolute; top: 50px; right: 0; }
</style>

위치가 설정된 요소라는 것은 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미한다.

정적 위치(static position) 지정 방식과 다른 방식들과의 차이점

정적 위치(static position) 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식이다.

  • 상대 위치(relative position) : 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치함.
  • 고정 위치(fixed position) : 뷰포트(viewport)에 상대적으로 위치함.
  • 절대 위치(absolute position) : 위치가 설정된 바로 상위의 조상(ancestor) 요소에 상대적으로 위치함.
<style>
    .static { position: static; }
    .relative { position: relative; }
    .fixed { position: fixed; }
    .absolute { position: absolute; }
</style>

z-index 속성

HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있다.
z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다.
스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 된다.

<style>
    .last {
        position: fixed;
        top: 180px; 
        left: 120px; 
        z-index: -1; 
    }
</style>

CSS position 속성

속성 설명
position HTML 요소의 위치를 결정하는 방식을 설정함.
top 위치가 설정된 조상 요소의 위로부터의 여백을 설정함.
right 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정함.
bottom 위치가 설정된 조상 요소의 아래로부터의 여백을 설정함.
left 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정함.
z-index 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정함.
clip 절대 위치(absolute position) 지정 방식으로 위치한 요소를 자름.
cursor 표시되는 마우스 커서의 모양을 설정함.
overflow 내용(content)의 크기가 해당 요소의 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
overflow-x 내용(content)의 크기가 해당 요소의 수평 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
overflow-y 내용(content)의 크기가 해당 요소의 수직 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.

2.4.3 - CSS 입문 | CSS 위치 속성 | 오버플로어(overflow)

오버플로우(overflow) 속성은 요소의 내용이 너무 커서 지정한 영역에 맞지 않을 때 내용을 클립할지(자를지) 또는 스크롤 막대를 추가할지 여부를 지정한다

오버플로 속성은 지정된 높이의 블록 요소에 대해서만 작동한다.

설명
visible 오버플로우가 되면 잘리지 않는다. 오버된 내용은 요소의 상자 밖에 렌더링된다. 이것은 기본값이다.
hidden 오버플로우가 되면 잘리지만, 잘린다. 나머지 컨텐트는 보이지 않는다.
croll 오버플로우가 되면 잘리지만, 스크롤 막대가 추가되어 나머지 내용을 볼 수 있다.
auto 오버플로우가 되다면, 스크롤 막대를 추가되어 나머지 내용을 볼 수 있다.
initial 이 속성을 기본값으로 설정한다.
inherit 상속 부모 요소에서이 속성을 상속받는다.

overflow-x

overflow-x 속성은 요소의 콘텐츠 영역을 오버플로우가 되면, 내용의 왼쪽/오른쪽 가장자리를 어떻게 처리할지 지정한다.

overflow-y

overflow-x 속성은 요소의 콘텐츠 영역을 오버플로우가 되면, 내용의 위쪽/아래쪽 가장자리를 어떻게 처리할지 지정한다.

2.4.4 - CSS 입문 | CSS 위치 속성 | 플로트 (float)

CSS float 속성

속성 설명
float HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함.
clear float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정함.
overflow 내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함.
overflow-x 내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
overflow-y 내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.

float 속성

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.
이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.

다음 예제는 이미지와 글자를 함께 출력하는 예제이다.

<style>
    img { float: left; margin-right: 20px; }
</style>

clear 속성

clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다.
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.

<style>
    .left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
    .right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
</style>

따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 한다.

<style>
    .left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
    .right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
    p { clear: both; }
</style>

overflow 속성

float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다.
이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.

<style>
    div { border: 3px solid #73AD21; padding: 5px;}
    img { float: left; }
    .good { overflow: auto; }
</style>

float 속성을 이용한 레이아웃

현재 웹 페이지의 레이아웃은 대부분 float 속성을 이용하여 작성되고 있다.

다음 예제는 float 속성을 이용해 작성된 레이아웃을 보여준다.

<style>
    div.page { border: 3px solid #CD5C5C; overflow: auto; }
    h2 { text-align: center; }
    header{ border: 3px solid #FFD700; }
    nav { border: 3px solid #FF1493; width: 150px; float: left; }
    section { border: 3px solid #00BFFF; margin-left: 156px; }
    footer{ border: 3px solid #00FA9A; }
</style>

2.4.5 - CSS 입문 | CSS 위치 속성 | 정렬 (align)

정렬(align)

블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용할 수 있다.

  1. margin 속성을 이용한 가운데 정렬
  2. position 속성을 이용한 좌우 정렬
  3. float 속성을 이용한 좌우 정렬

margin 속성을 이용한 가운데 정렬

margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다.

이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어진다.
따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 한다.

<style>
    div { width: 300px; margin: auto; }
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 태그가 삽입되어 있어야 margin 속성이 제대로 표현된다.

position 속성을 이용한 좌우 정렬

절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 된다. 따라서 이 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다.

position 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다.
이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

<style>
    div { width: 300px; padding: 10px; margin: 0; position: absolute; right: 0; }
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야 position 속성이 제대로 표현된다.

float 속성을 이용한 좌우 정렬

float 속성을 이용하면 수평 방향으로 좌우 정렬할 수 있다.

float 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다. 이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

<style>
    div { width: 350px; padding: 10px; margin: 0; }
    div.left { float: left }
    div.right { float: right }
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html> 태그가 삽입되어 있어야 float 속성이 제대로 표현된다.

2.5 - CSS 입문 | CSS 선택자

2.5.1 - CSS 입문 | CSS 선택자 | 선택자(selector)

선택자(selector)

CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용한다.

대표적인 선택자는 다음과 같다.

  • 전체 선택자
  • HTML 요소 선택자
  • 아이디(id) 선택자
  • 클래스(class) 선택자
  • 그룹(group) 선택자

전체 선택자

CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택한다.

<style>
    * { color: red; }
</style>

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있다.

<style>
    h2 { color: teal; text-decoration: underline; }
</style>
...
<h2>이 부분에 스타일을 적용합니다.</h2>

아이디(id) 선택자

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.

<style>
    #heading { color: sandybrown; text-decoration: line-through; }
</style>
...
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다.
하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생한다.
따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.

클래스(class) 선택자

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택해 준다.

<style>
    .headings { color: deepskyblue; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

그룹 선택자

그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용한다.
그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결한다.
이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 준다.

<style>
    h2 { color: navy; }
    h2, h3 { text-align: center; }
    h2, h3, p { background-color: lightgray; }
</style>

CSS3 선택자(selector) Level 3

CSS3에서는 다양한 기능을 하는 많은 선택자가 새롭게 정의되었다.

선택자 설명
일반 형제 선택자 해당 요소와 형제 관계에 있으며, 문서의 위치에서 해당 요소보다 뒤에 위치한 모든 특정 요소를 선택함.
[속성이름^=“속성값”] 선택자 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 선택함.
[속성이름$=“속성값”] 선택자 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 선택함.
[속성이름 *=“속성값”] 선택자 특정 속성의 속성값이 특정 문자열로 시작하는 하나의 단어로 된 요소를 선택함.
:root 문서의 루트(root) 요소를 선택함.
:nth-child 모든 자식(child) 요소들 중에서 앞에서부터 n번째에 위치한 자식(child) 요소를 모두 선택함.
:nth-last-child 모든 자식(child) 요소들 중에서 뒤에서부터 n번째에 위치한 자식(child) 요소를 모두 선택함.
:nth-of-type 모든 자식(child) 요소들 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:nth-last-of-type 모든 자식(child) 요소들 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:last-child 모든 자식(child) 요소들 중에서 맨 마지막에 위치한 자식(child) 요소를 모두 선택함.
:first-of-type 모든 자식(child) 요소들 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택함.
:last-of-type 모든 자식(child) 요소들 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택함.
:only-child 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:only-of-type 자식(child)  요소로 특정 타입의 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택함.
:target 현재 활성화된 target 요소를 모두 선택함.
:checked 체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled 사용할 수 있는 input 요소를 모두 선택함.
:disabled 사용할 수 없는 input 요소를 모두 선택함.
:not(선택자) 모든 선택자와 함께 사용할 수 있으며, 해당 선택자의 의미를 반대로 적용함.

2.5.2 - CSS 입문 | CSS 선택자 | 결합 선택자

결합 선택자(Combinators)

CSS 선택자는 하나 이상의 선택자를 포함할 수 있다. 결합 선택자는 연관된 선택자들 간의 관계를 설정해 준다.

하위 선택자(descendant selector)

하위 선택자는 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div>태그의 하위 요소 중에서 <p>태그를 모두 선택하는 예제이다.

div p {스타일;}

위의 예제처럼 하위 선택자는 div와 p 사이에 한 칸의 띄어쓰기를 반드시 명시해야 한다.

<style>
    div p { background-color: #FFEFD5; }
</style>

자식 선택자(child selector)

자식 선택자는 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div> 태그의 바로 밑에 존재하는 하위 요소 중에서 <p>태그를 모두 선택하는 예제이다.

div > p {스타일;}
<style>
    div > p { background-color: #FFEFD5; }
</style>

2.5.3 - CSS 입문 | CSS 선택자 | 형제 선택자

형제 선택자(sibling selector)

행제 선택자는 형제 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

형제 관계란 HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미한다. 이러한 형제 관계에 있는 요소들을 형제(sibling) 요소라고 한다.

일반 형제 선택자(general sibling selector)

일반 형제 선택자는 해당 요소와 형제 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div>태그와 형제 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p>태그를 모두 선택하는 예제이다.

div ~ p {스타일;}
<style>
    div ~ p { background-color: #FFE4E1; }
</style>

인접 형제 선택자(adjacent sibling selector)

영어로 adjacent는 인접한, 가까운 이라는 의미가 있다. 인접 형제 선택자는 해당 요소와 형제 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div>태그와 형제 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그를 모두 선택하는 예제이다.

div + p {스타일;}