Tag Archives: 웹프로그래밍

2장 HTML5 개요

2.1 HTML5 문서의 기본구조

Posted on by admin
 
 2장 HTML5 개요 

2-1 HTML5 문서의 기본구조

  • HTML5 문서는 순수한 텍스트로 이루어진 태그(tag)라는 요소(element)들로 구성되는데 기본적인 구조는 <그림 2.1.1>과 같다.

<그림 2.1.1> HTML5 문서의 기본 구조, <body> 태그 안의 본문이 브라우저에 보임

  • HTML5 문서는 <!doctype html> 지시어로 시작되는데 이 문서가 HTML5 문서임을 브라우저에 알려주는 것으로서 반드시 첫줄에 나와야 한다. 이것은 HTML 태그는 아니며 소문자나 대문자 어떠한 것을 사용해도 된다.<그림 2.1.1> HTML5 문서의 기본 구조, <body> 태그 안의 본문이 브라우저에 보임.
  • 그 다음은 대개 HTML5 문서의 내용을 설명하는 주석문을 적는다. 주석문은 <!– 로 시작하고 –> 로 끝나는데 반드시 필요하지는 않다. 문서 내의 어느 곳에 위치해도 좋다.
  • HTML5 문서는 <html> 태그로 시작되어 </html>이라는 태그로 끝이 난다. 이 사이에 웹페이지 제목 등을 적을 수 있는 <head> </head>, 문서의 내용을 적는 <body> </body> 등이 위치한다.
  • <head> </head> 태그는 문서의 머리말에 해당되는 부분을 작성하는데 대개 웹페이지의 제목을 지정하는 <title> </title> 태그를 포함한다. 본문을 설명하는 메타 태그, JavaScript 코드, CSS 스타일을 포함할 수 있다.
  • <body> </body> 태그는 문서의 본문 내용을 작성한다. 이 <body> </body> 태그는 제목을 지정하는 <h1> </h1> 이나 문단의 지정을 의미하는 <p> </p> 와 같은 여러 개의 태그를 포함한다. 여기에는 JavaScript 코드를 포함할 수 있다.
  • <head>와 <body> 사이에는 아무것도 넣어서는 안 된다.
  • HTML5 문서는 간단히 모든 PC에 설치되어 있는 메모장(Notepad)을 이용하여 작성할 수 있다. ᄒᆞᆫ글, MS Word 등의 워드 프로세서에서 작성하여 텍스트 파일 형태로 작성할 수 있다. 이때 파일명의 확장자는 htm 또는 html을 사용한다.
  • htm 확장자 파일을 클릭하면 기본으로 설정되어있는 웹브라우저에 파일 내용이 나타난다.
  • 전문적인 HTML 편집기로는 MS사의 WebMatrix, 에디트 플러스(EditPlus), 아크로 에디터(AcroEditor), 크림슨 에디터(Crimson Editor), 아톰(Atom) 등이 있는데 이러한 HTML 편집기는 HTML 명령문의 문법이 맞는지 체크해주고, 태그/일반 문자열/주석/숫자 등을 서로 다른 색깔로 표현하여 읽기 좋게 만들어 주어 편리하다.
  • [예제 2.1.1] 노트패드를 이용하여 ‘EX020101.htm’ 문서를 만들고 이를 크롬과 익스플로러 웹브라우저를 이용하여 살펴보자.

<그림 2.1.2> EX020101.htm 파일의 저장

  • 파일을 만든 후 ‘EX020101.htm’ 파일을 더블 클릭하면 (또는 파일이 있는 디렉토리(예 C:웹데이터시각화EX020101.htm)를 브라우저의 주소창에 입력) 기본으로 설정된 웹브라우저에 이 파일의 내용이 나타난다. 모든 태그는 보이지 않고, 웹브라우저 왼쪽 상단에 제목이 나타나며, <body> </body> 태그 사이에 있는 내용이 화면에 나타난다. <그림 2.1.3>은 익스플로러에서 본 EX020101.htm 파일이고 <그림 2.1.4>는 크롬에서 본 같은 파일이다.
EX020101.htm
<!DOCTYPE html>

<html>

<head>

<title> 나의 첫 HTML 문서 </title>

</head>

<body>

<h1> 작성자: 이정진 </h1>

<p> 내용 : HTML 문서 양식을 소개하기 위한 예제입니다.

</body>

</html>

<풀이>

  • 이 파일의 첫 행은 HTML5 문서의 시작을 알리는 <!DOCTYPE html>으로 시작한다.
  • 그 후에는 기호 < > 으로 시작하고 </ > 끝나는 한 쌍의 명령어 조합(이를 태그(tag)라 함)으로 이루어져 있다.
  • 시작 태그와 끝 태그 사이에 웹문서에 적고자 하는 내용(제목, 작성자, 내용)이 들어있다. <html>과 </html> 태그 사이에는 HTML 문서의 전체 내용이 설명된다.
  • <head>와 </head> 태그 사이에는 문서의 제목(<title>과 </title> 태그)을 넣는 태그가 위치하여 문서가 설명된다.
  • <head> 태그보다 <title> 태그를 들여쓰기 하였는데 이는 구조체 형식으로 보기 좋게 한 것으로 반드시 이렇게 할 필요는 없고 이 방법을 사용하면 에러를 줄일 수 있다. 
  • <body>와 </body> 태그 사이에는 브라우저에 보이는 본문의 내용이 설명되는데 <h1> </h1> 및 <p> </p> 태그를 이용하여 제목 글자의 크기를 지정하고 문단형식에 대한 지정을 한다. 이러한 명령어의 자세한 설명은 다음 절부터 연구한다.
  • 파일에서 빈 행은 큰 의미 없이 보기 좋게 띄어 놓은 것이어서 없어도 좋다.
  • HTML 파일을 만든 후 주메뉴의 파일 ⇒ 다른 이름으로 저장(A) 를 선택하면 <그림 2.1.2>와 같은 화면이 나타나는데, 파일이름(N): 을 EX020101.htm 으로 하고 인코딩(E): 방식은 여러 웹브라우저에서 사용하는 UTF-8을 선택한 후 저장한다. 기본인 ANSI나 유니코드 방식을 사용하면 어느 웹브라우저에서는 글자가 깨져서 보일 수 있다.

<그림 2.1.3> 익스플로러에서 본 EX020101.htm 파일

<그림 2.1.4> 크롬에서 본 EX020101.htm 파일

 

⇒ 텍스트 파일의 문자저장 방식 UTF-8, ANSI, 유니코드

  • UTF-8 (Universal Coded Character Set + Transformation Format – 8-bit)은 파일의 문자 저장 방식 중 하나이다. 웹 작업시나 데이터베이스 작업에는 UTF-8 방식이 많이 이용된다.

  • ANSI는 영어문자 작업시 많이 이용한다.

  • 유니코드는 한글과 같은 2 바이트 문자의 표준이다.

2.5 태그들의 블록

2.5.1

Posted on by admin
 
 2장 HTML5 개요 

2-1 HTML5 문서의 기본구조

  • <div> 태그는 다른 HTML5 요소들의 컨테이너로 사용되기도 하는데 style과 class 속성을 가질 수 있다. CSS와 같이 사용하면 요소들의 블록에 대한 스타일을 지정할 수 있다.

[예제 2.5.1] <div> 태그를 이용한 다음 EX020501.htm 문서를 분석하라.

EX020501.htm
<!DOCTYPE html>

<html>

<body>

<div style=”background-color:blue;color:white;padding:20px;”>

<h1>HTML이란?</h1>

<p title = “HTML이란?”>

HTML은 Hyper Text Markup Language 라는 문서 형식을 의미한다.

Hyper Language는 프로그램을 순차적으로 실행하는 Linear Language에 상대되는 언어를

뜻하는데 링크(link)를 통해 실행 순서가 자유로운 언어라는 뜻이다.

Markup은 문서의 형식을 지정하는 명령문을 의미한다.

즉 HTML은 텍스트 문장이나 이미지 등에 실행순서가 자유로운 적당한 명령문을 주어

전체 문서를 웹 브라우저에서 잘 보일 수 있도록 꾸며주는 언어이다.

웹브라우저는 HTML로 작성된 문서를 번역하여 화면에 보여준다.

</p>

</div>

</body>

</html>

<풀이>

  • 위의 HTML5 문서를 실행하면 <그림 2.5.1>과 같은 화면이 나타난다. 여러 가지 태그를 포함하는 <div> 블록을 설정하고 이 블록의 배경을 파랑색, 글자를 흰색으로 지정하였다.

<그림 2.5.1> <div> 태그를 이용한 문서 실행 화면

2장 HTML5 개요

2.2 HTML5 기본 태그

Posted on by admin
 2장 HTML5 개요 

2-2 HTML5 기본 태그

  • HTML5 문서는 <그림 2.1>에서 설명한 <html> </html>, <head> </head>, <body> </body> 등의 태그와 기타 태그들 그리고 본문으로 이루어져 있다. 한 태그는 시작을 나타내는 <tagname>과 그 태그의 끝을 의미하는 </tagname>의 한 쌍으로 이루어져 있고 그 사이에 수행될 다른 태그나 명령문이 위치할 수 있다.
<tagname> 수행될 다른 태그나 명령문 </tagname>
  • 태그이름은 대소문자를 구분하지 않는데 대개 소문자를 많이 이용한다. 태그에 사용된 공백은 인정되지 않는다. 시작 태그와 끝 태그 사이에 위치한 명령문에서 하나의 공백은 인식되지만 두 개 이상의 공백은 특수문자(&nbsp)를 사용하여야 한다.
☞ 태그 사용 팁

– 태그에 사용된 공백이나 문자열의 공백은 인정되지 않는다.

– 명령문에서 하나의 공백은 인식되지만 두 개 이상의 공백은 특수문자(&nbsp)를 사용한다.

– 태그 명령이 잘못된 경우 에러가 발생하지 않고 그냥 지나가게 되어 주의하여야 한다.

– 태그 이름은 대소문자를 구분하지 않는데 대개 소문자를 많이 이용한다.

– 태그 시작과 끝을 잘 볼 수 있도록 구조체 형식의 들여쓰기를 하여야 실수가 없다.
  • 대개의 태그는 시작 태그와 끝 태그의 쌍으로 이루어져 있지만 <br>, <hr> 등은 끝 태그가 없다. 끝 태그가 있는 경우 이를 생략하면 오류가 되어 정상적으로 브라우저 화면에 출력되지 않는다.
☞ 태그 중에는 <br> <hr> 과 같이 끝나는 태그가 없는 것도 있고, 주석과 같이 기호 ‘/’를 사용하지 않는 태그도 있다.
☞ 문단 태그 <p> … </p> 안에 있는 명령문에 빈칸을 여러 개 넣거나, 여러 줄로 나누어도

단지 빈칸 하나로 간주한다. 두 칸 이상의 공백은 ‘&nbsp’를 반복하여 사용한다.

<pre> … </pre> 태그를 이용하면 명령문안의 공란이나 줄바꿈을 유지할 수 있다.
  • 주석문 태그는 시작과 끝이 <!– … –> 와 같은 예외적인 태그로서 주의하여야 한다.

2.2.1 HTML5 기본 태그

  • HTML5 문서는 <그림 2.1>에서 설명한 <html> </html>, <head> </head>, <body> </body> 의 태그와 대략 100여개의 기타 중요 태그를 사용하여 만드는데 편집에 사용되는 기본 태그는 [표 2.2.1]과 같다.
[표 2.2.1] HTML5 문서의 편집에 사용되는 기본 태그
태그 종류 태그 설명
페이지 제목 <title> </title> 페이지의 제목으로 <head> </head> 사이에 위치
문단 제목 <h1> </h1>

<h2> </h2>

<h6> </h6>

 문단의 제목(장, 절, 소제목 등)을 지정하는데 사용되는 6개의 태그.

h는 heading에서 따온 글자로서 폰트 크기를 1 ~ 6까지 조절,

숫자가 커질수록 글자의 크기는 작아진다.

실제 폰트의 크기는 브라우저가 결정한다.
문단 <p> </p> 문단의 시작과 끝, </p>는 생략가능

한 줄을 띄고 다음 명령문을 시작

여러 개의 <p>가 같이 있으면 하나만 인식함
문단내의

줄 편집

 <br> 줄을 바꾼 후 공백이 없이 바로 다음 줄 시작

끝나는 태그가 없음
<hr> 수평선(horizontal)을 그림, 문단을 나눌 때 사용

<hr width=선길이 size=선높이 align=정렬 noshade>

선길이: %나 픽셀, 선높이: 1.0 등

정렬: LEFT, RIGHT, CENTER
<pre> </pre> 이 태그를 이용하면 사용자가 입력한 형태로 웹브라우저에 출력.

명령문안의 공란이나 줄바꿈을 유지하여 준다.
☞ 문서 제목(heading)에서 charset=“UTF-8”을 <meta> 태그를 이용하여 다음과 같이 지정할 수도 있다

<head>

<title>My First HTML</title>

<meta charset=”UTF-8″>

</head>

[예제 2.2.1] [표 2.2.1]의 여러 태그를 사용하는 EX020201.htm 파일을 작성하여 실행시켜 보자.

EX020201.htm
<!DOCTYPE html>

<!– 이 문서는 여러 태그의 사용 예입니다. –>

<html>

<head>

<title> 예제2.2.1 </title>

</head>

<body>

<h1> 1장 문서 폰트 크기 h1 </h1>

<h2> 1절 문서 폰트 크기 h2 </h2>

<h3> 1.1 소제목 문서 폰트 크기 h3 </h3>

<h4> 1.1.1 소제목문서 폰트 크기 h4 </h4>

<hr>

<h5> 본문 강조 문서 폰트 크기 h5 </h5>

<h6> 본문 문서 폰트 크기 h6 </h6>

<p> 기본 폰트의 한 문단 시작입니다.

이 문단이 끝나면 자동으로 한 줄이 첨가 됩니다. </p>

<br>새로운 줄에 문장이 시작됩니다. 끝나는 태그가 없습니다.

</body>

</html>

 

 

<풀이>

  • 메모장을 이용하여 EX020201.htm 파일을 만들어 크롬으로 보면 <그림 2.2.1>과 같다.

<그림 2.2.1> EX020201.htm을 크롬 브라우저로 본 화면

 

2-2-2 태그의 속성 지정

  • HTML5 문서를 구성하는 각각의 태그는 다음과 같이 시작 태그 안에 속성(attribute)을 가질 수 있다.
  • <img src=“jjlee.jpg” width=“80” height=“60”>(이미지 파일 속성) (이미지 가로 속성) (이미지 세로 속성)
  • 이 태그는 문서에 jjlee.jpg라는 사진 파일을 가로 80픽셀 세로 60픽셀로 포함하라는 명령어이다.
  • 태그의 속성도 대소문자를 구별하지 않는다. 그러나 속성값에 불필요한 공백이 들어가면 오류가 된다.
  • HTML5에서 태그의 속성값은 대개 이중인용부호 ”안에 지정하는데 단일인용부호 ’를 사용하거나 인용부호를 전혀 사용하지 않아도 된다. 다만 속성값에 공백이 있는 경우는 인용부호를 사용하여야 한다.

<h1 style=”color:blue;”>

<p style=”font-family:verdana;“>

<img src=”JJLEE.jpg”>

<a href=”http://www.w3schools.com”>

☞ 각 태그의 속성 지정은 반드시 시작 태그에서 한다.
☞ 태그의 속성값은 대개 이중인용부호 ”안에 지정하는데 단일인용부호 ’를 사용하거나
인용부호를 전혀 사용하지 않아도 된다. 다만 속성값에 공백이 있는 경우는 인용부호를
사용하여야 한다. 인용부호를 사용하든 아니든 일관성이 중요하다.
  • [표 2.2.2]는 HTML5의 여러 가지 태그에 많이 사용되는 속성을 정리한 것이다.
  • [표 2.2.2] HTML5 문서의 태그에 사용되는 기본 속성
    속성(Attribute) 설명
    alt 이미지 태그에 다른 텍스트를 지정
    disabled HTML 입력 요소(input element)가 작동하지 않도록 지정
    href 태그 <a>에서 링크의 URL (web address) 지정
    height HTML 요소의 높이
    id HTML 요소의 고유 id 지정
    src 이미지 파일의 URL (웹주소) 지정
    style HTML 요소의 폰트, 색 등을 지정
    title HTML 요소의 툴팁 등의 정보를 지정
    width HTML 요소의 너비
  • [표 2.2.2]에서 alt 속성은 <img> 태그에서 이미지가 혹 안보일 경우 대신 지정해주는 속성이다. 이미지의 너비를 width 높이를 height 속성으로 다음과 같이 지정할 수 있다.
  • HTML 코드 크롬 출력
    <img src=”smiley.gif” alt=”Smiley face” width=”42″ height=”42″>  
  • title 속성은 요소에 툴팁(tool tip: 마우스를 대면 설명이 나타남)을 지정해 준다.
  • HTML 코드 크롬 출력
    <p title = “Hyper Text Markup Language”> HTML </p>  
  • disabled 속성은 3장에서 배우는 <input> 태그를 필요시 작동하지 않게 하여준다. 다음은 두 개의 텍스트 입력창에서 이름을 입력하기 전까지는 주소 입력창을 입력할 수 없도록 지정한 것이다.
  • HTML 코드 크롬 출력
    이름: <input type=”text” name=”fname”><br>

    주소: <input type=”text” name=”lname” disabled><br>

    		  
  • href 속성은 HTML 문서에서 다른 홈페이지 링크에 사용되는 태그 <a>에서 링크의 URL (web address)을 지정한다. 태그 <a>에 대해서는 2.4.3절에서 자세히 설명한다.
  • HTML 코드 크롬 출력
    <a href=”https://www.w3schools.com”>Visit W3Schools.com!</a>  
  • id 속성을 이용하여 HTML 모든 요소에 고유 이름을 지정해 준다. 이 고유 이름을 이용하여 JavaScript에서 각 요소에 적당한 동작을 지정해 줄 수 있다. 다음 예제는 <h1> 태그에 id를 준 후 버튼을 누르면 <h1> 태그의 내용이 바뀌는 JavaScript 프로그램이다.
  • HTML 코드 크롬 출력
    <html>

    <body>

    <h1 id=”myHeader”>Hello World!</h1>

    <button onclick=”displayResult()”>Change text</button>

    <script>

    function displayResult() {

    document.getElementById(“myHeader”).innerHTML = “Have a nice day!”;

    }

    </script>

    </body>

    </html>

    		  
     

    [예제 2.2.2] EX020202.htm과 같은 HTML5 문서에서 태그 <p>의 title 속성과 태그 <a>의 href 속성, 그리고 style 속성을 살펴보라.

    EX020202.htm
    <!– 이 문서는 여러 태그의 속성(attribute) 사용 예입니다. –>

    <!DOCTYPE html>

    <html>

    <body>

    <h1 style=”color:blue” title=”Hyper Text Markup Language”>HTML</h1>

    <p style=”font-family:verdana; font-size:70%; text-align:right;”> 글쓴이 JJ LEE</p>

    <img src=”JJLEE.jpg” width=”80″ height=”100″ align=right>

    <p style=“background-color: lightgrey; color:green”>

    Hyper Language는 프로그램을 순차적으로 실행하는 Linear Language에 상대되는 언어를

    뜻하는데 링크(link)를 통해 실행 순서가 자유로운 언어라는 뜻이다.

    Markup은 문서의 형식을 지정하는 명령문을 의미한다.

    <p>

    <p style=”color:green”>

    즉 HTML은 텍스트 문장이나 이미지 등에 실행순서가 자유로운 적당한 명령문을 주어

    전체 문서를 웹 브라우저에서 잘 보일 수 있도록 꾸며주는 언어이다.

    웹브라우저는 HTML로 작성된 문서를 번역하여 화면에 보여준다.

    </p>

    <hr>

    <p style=”color:red; font-family:굴림; font-size:20px”>

    <b> !! 마우스를 HTML 단어에 위치하면 툴팁이 보입니다. </b>

    </p>

    <a href=”http://www.w3schools.com”>

    여기를 클릭하면 HTML5에 공부에 유용한 사이트 www.w3schools.com으로 이동

    </a>

    </body>

    </html>

  • <풀이>

  • 각 태그의 속성 지정은 반드시 시작 태그에서 한다. 예를 들면 문단의 시작을 하는 <p> 태그에는 style 속성을 이용하여 폰트 종류(style=font-family: ), 폰트 크기(style=font-size: ), 폰트 색(style=color: ), 문장의 정렬(style=“text-align: )을 지정할 수 있다.
  • title 속성을 이용하여 문단 전체에 툴팁(tool tip: 마우스를 대면 설명이 나타남)을 지정해줄 수 있다.
  • <h1 style=”color:blue;”>HTML</h1><p style=”font-family:verdana; font-size:70%; text-align:right;”> 글쓴이 JJ LEE</p><p title = “HTML이란?”>
  • 다른 웹사이트를 링크시키는 <a> 태그에는 href 속성을 이용하여 링크되는 웹사이트 주소를 지정할 수 있다.
  • <a href=”http://www.w3schools.com”>
  • 이미지를 삽입하는 <img> 태그에는 src 속성을 이용하여 이미지 파일명을 지정하고, width 속성을 이용하여 이미지 너비를 지정하며, height 속성을 이용하여 이미지 높이를 지정하고, align 속성을 이용하여 이미지의 위치를 지정할 수 있다.
  • <img src=”JJLEE.jpg” width=”80″ height=”100″ align=right>
  • 크롬 브라우저로 EX020202.htm 파일을 실행하면 <그림 2.2.2>와 같다.

<그림 2.2.2> EX020201.htm을 크롬 브라우저로 본 화면

 

2.5 태그들의 블록

2.5.2 태그

Posted on by admin
 
 2장 HTML5 개요 

2-5-2 태그

  • <span> 태그는 한 문장의 일부 텍스트에 대한 컨테이너로 사용되기도 하는데 style과 class 속성을 가질 수 있다. CSS와 같이 사용하면 HTML5 요소들의 블록에 대한 스타일을 지정할 수 있다.

[예제 2.5.2] <span> 태그를 이용한 다음 HTML5 문서를 분석하라.

EX020502.htm
<!DOCTYPE html>

<html>

<body>

<div style=”background-color:blue;color:white;padding:20px;”>

<h1>HTML이란?</h1>

<p title = “HTML이란?”>

HTML은 <span style=“color:red”>Hyper Text Markup Language</span> 라는

문서 형식을 의미한다.

Hyper Language는 프로그램을 순차적으로 실행하는 Linear Language에 상대되는 언어를

뜻하는데 링크(link)를 통해 실행 순서가 자유로운 언어라는 뜻이다.

Markup은 문서의 형식을 지정하는 명령문을 의미한다.

즉 HTML은 텍스트 문장이나 이미지 등에 실행순서가 자유로운 적당한 명령문을 주어

전체 문서를 웹 브라우저에서 잘 보일 수 있도록 꾸며주는 언어이다.

웹브라우저는 HTML로 작성된 문서를 번역하여 화면에 보여준다.

</p>

</div>

</body>

</html>

<풀이>

  • 위의 HTML5 문서를 실행하면 <그림 2.5.2>와 같이 텍스트 문단의 일부분만 span style=“color:red”>Hyper Text Markup Language</span> 로 빨강색으로 지정하였다.

 

<그림 2.5.2> <span> 태그를 이용한 문서 실행 화면

2.4 HTML5 고급 태그

2.4.3 하이퍼링크와 내비게이션

Posted on by admin
 
 2장 HTML5 개요 

2-4-3 하이퍼링크와 내비게이션

  • 웹문서는 여러 개의 HTML 페이지를 상호 연결하는 방식으로 구성한다. 한 HTML 페이지에서 다른 HTML 페이지의 연결을 하이퍼링크(hyperlink), 간단히 링크(link)라고 부른다.
  • 하이퍼링크는 텍스트나 이미지에 다른 웹페이지 주소를 달아서 만든다. 하이퍼링크는 같은 웹사이트의 여러 개의 HTML 페이지를 연결하는 것은 물론이고 다른 웹사이트의 페이지를 연결하기도 한다.
  • 이렇게 하이퍼링크된 웹 문서들을 따라 이동하는 것을 항해 또는 내비게이션(navigation)이라 부른다. 하이퍼링크는 [표 2.4.4]의 태그 <a>와 href 속성을 이용하여 만든다.
[표 2.4.4] 하이퍼링크를 만드는 <a> 태그와 href 속성
<a href=“이동위치URL” target=“윈도우명” download> 텍스트 또는 이미지 </a>
속성 설명
href 이동할 HTML 페이지의 URL 또는 페이지 내의 앵커 이름
target 하이퍼링크가 연결된 HTML 페이지가 출력될 윈도우 이름

_blank 새 윈도우에 출력

_self 현재 윈도우에 출력

_parent 부모 윈도우에 출력

_top 제일 위에 있는 윈도우에 출력

윈도우명 윈도우명으로 지정된 윈도우에 출력
download 하이퍼링크가 클릭되면 href에 지정된 파일이 다운로드 됨
  • 다음은 href 속성의 여러 가지 예이다.
href 속성의 예 설명
<a href = “C:/sample.html” > Test </a>

<a ref=“https://www.w3schools.com”>W3Schools</a>

<a href = “http://www.kplot.com“

<img src=“jjlee.jpg”</img>

</a>

<a href = “MAILTO:jjlee@ssu.ac.kr”> </a>

 – 현재 웹사이트에 있는 파일은 파일 경로를 지정

– 다른 웹사이트의 연결은 “http://”로 시작하는 웹주소 지정하면 해당 주소로 이동

– 사진을 클릭하면 지정된 웹사이트로 이동

– 연결된 이메일 프로그램(outlook 등)으로 이동
  • 어느 웹사이트나 가장 기본이 되는 웹페이지가 존재한다. 예를 들면 www.ssu.ac.kr/index.htm 과 같은 것인데 다른 웹사이트를 지정하는 것은 그 웹사이트의 기본 HTML 페이지를 지정하는 것과 같다.
  • 하이퍼링크 된 웹주소는 3가지 색으로 변경된다. 처음 만들어져 있을 때는 밑줄과 함께 파란색으로 표시되며(standard link), 이 하이퍼링크를 이용하여 다른 웹주소로 이동하면 자주색으로 변한다(visited link). 마우스로 하이퍼링크를 누르고 있으면 빨강색으로 출력된다(active link)l. 이러한 하이퍼링크의 색은 CSS3를 이용하여 바꿀 수 있다.
  • target 속성은 하이퍼링크에 연결된 웹페이지가 출력될 윈도우를 지정한다. target 속성은 3.3절에서 다시 설명한다.
  • download 속성은 사진, pdf, mp3, html 파일, hwp 파일, ppt 파일 등 모든 파일을 다운로드할 수 있는 링크를 만든다. 이때 다운로드 할 파일명은 href 속성에 지정하는데 다음 예는 jjlee.jpg 파일을 다운로드하는 링크이다.
HTML 코드 크롬 출력
<a href=“jjlee.jpg” download>사진 다운로드</a>
  • HTML5는 웹페이지에서 파일을 쉽게 다운로드 할 수 있도록 이 기능을 도입하였다. 익스플로러나 사파리에서도 작동하지만 약간 다르게 처리된다.
  • 한 HTML 문서가 너무 길면 사용자가 브라우저 화면을 위 아래로 이동하면서 살펴야 되어서 불편할 수 있다. 태그 <a>의 href를 이용하면 문서 내 특정위치로 이동하는 하이퍼링크를 만들 수 있는데 이 특정위치를 앵커(anchor)라 부른다. 이동할 위치에 있는 태그의 id 속성을 정의한 후 현재 페이지의 특정 위치로 이동할 수 있다.

<a href = “#1절”>1절 HTML </a>

…

<a name=”1절“> 1절 HTML이란 </a>

…

[예제 2.4.3] 앵커를 만들어 하이퍼링크로 연결하는 다음 HTML 문서를 분석하라.

EX020403.htm
<!DOCTYPE html>

<html>

<body>

<ul>

<li> <a href= “#section1”>HTML이란? </a>

<li> <a href= “#section2”>HTML의 기본 구조 </a>

<li> <a href= “#section3”>HTML의 주요 태그 </a>

</ul>

<h3 id=”section1″>HTML이란?</h3>

HTML은 Hyper Text Markup Language 라는 문서 형식을 의미한다.

Hyper Language는 프로그램을 순차적으로 실행하는 Linear Language에 상대되는 언어를

뜻하는데 링크(link)를 통해 실행 순서가 자유로운 언어라는 뜻이다.

Markup은 문서의 형식을 지정하는 명령문을 의미한다.

즉 HTML은 텍스트 문장이나 이미지 등에 실행순서가 자유로운 적당한 명령문을 주어

전체 문서를 웹 브라우저에서 잘 보일 수 있도록 꾸며주는 언어이다.

웹브라우저는 HTML로 작성된 문서를 번역하여 화면에 보여준다.

<h3 id=”section2″>HTML의 기본 구조</h3>

HTML5 문서는 첫 줄에 <!doctype html>을 적고 그 다음 <html> … </html>

태그가 위치한다. 그 사이에 <head> … </head> 태그와 <body> … </body> 태그가

위치한다.

<h3 id=”section3″>HTML의 주요 태그</h3>

HTML 문서의 편집에 많이 사용되는 폰트 형태/색, 사진 삽입, 목록, 표 등의

태그들을 살펴보자.

</body>

</html>

<풀이>

  • 위의 HTML 문서를 실행하면 <그림 2.4.6>의 왼쪽과 같은 화면이 나타난다. 특정 위치로 이동하는 것을 보여주기 위하여 브라우저의 화면을 축소하였다.
  • 여기서 리스트의 두 번째 “HTML의 기본구조” 링크를 누르면 <그림 2.4.4>의 오른쪽 화면과 같이 section2의 id를 가진 앵커 부분으로 브라우저 화면이 이동한다.

<그림 2.4.4> 앵커를 만들어 하이퍼링크로 연결한 화면

2.4 HTML5 고급 태그

2.4.4 메타데이터

Posted on by admin
 
 2장 HTML5 개요 

2-1 HTML5 문서의 기본구조

  • 메타데이터란 HTML5 문서를 설명해주는 데이터를 의미하는 것으로 <base>, <link>, <script>, <style>, <title>, <meta> 등 여러 가지 태그가 이에 해당한다.
  • <base> 태그는 웹문서들이 담겨 있는 기본 URL과 출력될 윈도우를 지정하기 위해 사용된다. 예를 들어 내가 만든 HTML5 문서 myfirst.htm 이 http://www.jjlee.org/page1/ 에 저장되어 있다면 <base> 태그를 이용하여 다음과 같이 지정한다.

<head>

<base href=“http://www.jjlee.org/page1”>

</head>
  • 이후 <a> 태그에서 내 문서에 myfirst.htm 대한 경로는 다음과 같이 지정하면 된다.

<a href=“myfirst.htm”>
  • <base> 태그에서 target 속성을 이용하여 웹문서가 출력될 윈도우를 지정할 수도 있다.
  • <style>은 HTML5 문서에 CSS 스타일을 담는 태그로서 간단히 여러 문단의 모양을 내는데 사용되었다. 4장에서 자세히 설명한다.

<h1 style=”color:blue;”>HTML이란?</h1>
  • <title>은 HTML5 문서의 제목을 적거나 특정 요소에 대한 설명을 하는 툴팁 정보를 담든데 사용된다.

<head>

<title> 웹페이지 제목 (Page title) </title

</head>
  • <meta> 태그는 웹페이지의 저작자, 문자 인코딩 방식, 문서 내용 등을 다음과 같이 지정할 수 있다. 이렇게 문서의 정보를 입력하면 구글이나 네이버 같은 검색엔진이 이 웹페이지에 대한 정보를 가져가 쉽게 검색되게 하여 준다.

<meta name=“author”content=“이정진”>

<meta name=“description” content=“HTML 문서의 설명”>

<meta name=“key words” content=“computer, html, css3, javascript”>

<meta character=“UTF-8”>
  • HTML5에서는 UTF-8이 기본 문자 인코딩 방식이므로 <meta> 태그에서 생략해도 좋지만 호환성을 위해 두어도 된다.

 

2장 HTML5 개요

2.3 HTML5 텍스트 편집 및 멀티미디어 삽입 태그

Posted on by admin
 2장 HTML5 개요 

2-3 텍스트 편집 및 멀티미디어 삽입 태그

  • HTML5 문서의 편집에 많이 사용되는 텍스트 폰트/색 편집 및, 사진, 오디오 및 비디오 등의 멀티미디어 삽입 관련 태그에 대해서 살펴보자.

2-3-1 텍스트 폰트 형식 편집

  • HTML5 문서의 텍스트 형식(format) 지정에 사용되는 주요 태그는 [표 2.3.1]과 같다.
[표 2.3.1] HTML5 문서의 폰트 형식 편집에 사용되는 주요 태그
태그 설명
<b> … </b>

<strong> … </strong>

 굵은 글자
<i> … </i>

<em> … </em>

 이태리체

이태리체로 강조(emphasixed)
<small> … </small> 글자를 조금 작게
<mark> … </mark> 하이라이트 마크
<del> … </del> 글자 가운데 선을 그어 삭제된 글자 표시
<ins> … </ins> 글자 밑줄을 그어 삽입된 글자 표시
<sub> … </sub> 아래 첨자
<sup> … </sup> 위 첨자
<q> … </q>

<blockquote> … </blockquote>

 인용부호 “ ” 삽입

블록 인용문

[예제 2.3.1] 텍스트형식 태그를 사용한 EX020301.htm의 HTML5 문서를 살펴보라.

EX020301.htm
<!– 이 문서는 텍스트에 대한 형식(formatting) 태그 사용 예입니다. –>

<!DOCTYPE html>

<html>

<body>

<h1 style=”color:blue;”>HTML이란?</h1>

<p><i>글쓴이: JJ LEE </i> </p>

<p> <big> <b>HTML은 Hyper Text Markup Language </b> </big> 라는 문서 형식을 의미 </p>

<p> <small> Linear Language</small>는 프로그램을 순차적으로 실행하는 언어 </p>

<p> <mark><b>Hyper Language</b></mark>는 링크(link)를 통해 실행 순서가 자유로운 언어</p>

<p> Mark<sup>up</sup> 위첨자 데모 </p>

<p> Mark<sub>up</sub> 아래첨자 데모 </p>

<p> <del>전체 문서</del> 삭제데모 </p>

<p> <ins>웹브라우저</ins> 삽입데모</p>

<hr>

<a href=”http://www.w3schools.com”>

여기를 클릭하면 HTML5에 공부에 매우 유용한 사이트 www.s3schools.com으로 이동

</a>

</body>

</html>

<풀이>

  • 메모장을 이용하여 EX020301.htm과 같은 파일을 만든 후 크롬 브라우저로 실행하면 <그림 2.3.1>과 같다.

<그림 2.3.1> EX020301.htm을 크롬 브라우저로 본 화면

2-3-2 폰트색과 문서의 배경색

  • [예제 2.3.1]에서 <h1> 태그에 style=”color:blue; 속성을 주어 ‘HTML이란?’의 색을 파랑색으로 바꾸었다. HTML 문서 전체의 배경색과 폰트색을 지정하려면 <body> 태그에 bgcolor와 text 속성을 지정한다.
<body bgcolor=색상 text=폰트색>
  • 폰트색이나 문서의 배경색에 대한 속성으로 사용되는 색상명은 [표 2.3.2]와 같다.
[표 2.3.2] 폰트색과 문서의 배경색에 자주 사용되는 색상명
색상/폰트색 설명 색상/폰트색 설명
black

blue

brown

cyan

darkblue

gray

green

lime

magnenta

 검정색

파랑색

갈색

청록색

진청색

회색

초록색

오랜지색

자홍색

 maroon

olive

pink

purple

red

silver

white

yellow

 밤색

올리브색

분홍색

자주색

빨강색

온색

흰색

노랑색
  • <그림 2.3.2>는 EX020301.htm에서 <body> 태그를 <body bgcolor=silver text=green>로 하여 크롬으로 실행한 화면이다.

<그림 2.3.2> EX020301.htm에서 배경색을 회색, 폰트색을 초록으로 바꾼 화면

  • 만일 HTML5 문서의 일부분만 배경색/폰트색을 바꾸고 싶다면 다음 예와 같이 <div> 태그를 이용하여 블록을 지정한 후(2.4절 참조) <div> 시작 태그에 style 속성을 이용하여 색을 지정하면 된다.
<div style=”background-color; color:red”>

…

</div>

2-3-3 심볼 및 특수 문자

  • HTML5 문서에서 수학에서 많이 사용되는 여러 가지 심볼과 그리스 문자, ⓒ와 같은 특수문자(Copy Right 에 사용)도 여러 개의 문자의 조합으로 표현이 가능하다. [표 2.3.3]은 많이 이용되는 수학 심볼, 그리스 문자, 특수문자에 대한 표이다.
[표 2.3.3] 많이 이용되는 수학 심볼, 그리스 문자, 특수문자에 대한 표
수학 심볼 html 문자 그리스 문자 html 문자 특수문자 html 문자
∑ 합 &sum; Δ &Delta; 공백 &nbsp;
≤ 작거나 같음 &le; Θ &Theta; & &amp;
≥ 크거나 같음 &ge; α &alpha; “ &quot;
≠ 같지 않음 &ne; β &beta; ⓒ &copy;
√ 제곱근 &radic; γ &gamma; ® &reg;
∈ 집합에 포함 &isin; ε &epsilon;
∫ 적분 &int; σ &sigma;
≈ 근사 &asymp;
  • HTML5 문서에서 문장을 만들 때 공백을 여러 개 입력해도 하나의 공백만 보이는데 &nbsp: 를 사용하면 여러 개의 공백도 삽입할 수 있다. 다음 예는 그리스 문자와 아래첨자태그 <sub>를 이용하여 수학식을 적은 예이다.
HTML 코드 크롬 출력
H<sub>o</sub> : &mu; = &mu;<sub>o</sub>

2-3-4 이미지, 오디오, 비디오 삽입

  • HTML5 문서에는 쉽게 사진(<img> 태그), 오디오(<audio> 태그) 및 비디오(<video> 태그) 파일을 삽입할 수 있다.
  • HTML5 문서에는 BMP, JPG, GIF 등의 형식으로 만들어진 사진 파일을 삽입할 수 있는데 이와 같은 사진 파일을 이미지(image)라 부른다.
  • HTML5 문서에 이미지를 넣으려면 [표 2.3.4]와 같은 이미지(<img>) 태그를 사용한다. 이러한 이미지가 포함된 문서는 네트워크를 통해 전송될 때 속도가 걸릴 수 있으므로 적절한 수의 이미지만 사용하는 것이 좋다.
[표 2.3.4] <image> 태그와 속성
<img src=”파일명“ align=위치 width=너비 height=높이 hspace=왼쪽여백값 vspace=위쪽여백값 alt=”설명” >
속성 설명
src=”파일명“ 파일명은 디렉토리를 포함
align=위치 위치의 가능한 값

left : 이미지를 문장의 왼쪽에 정렬

right : 이미지를 문장의 오른쪽에 정렬

center : 이미지를 문장의 가운데 정렬

top : 문장을 이미지의 위쪽에 정렬

bottom : 문장을 이미지의 아래쪽에 정렬

middle : 문장을 이미지의 중간에 정렬

texttop : 이미지를 행에서 가장 위에 있는 문장에 맞추어 정렬

absbottom : 이미지의 하단에 맞추어 정렬

absmiddle : 이미지의 중간 지점을 가운데 줄에 정렬

baseline : 이미지의 하단을 현재 문자의 기준선에 맞추어 정렬
width=너비 이미지의 너비는 픽셀값이나 %
height=높이 이미지의 높이는 픽셀값이나 %
hspace=왼쪽여백값 왼쪽 여백 값 지정
vspace=위쪽여백값 위쪽 여백 값 지정
alt=”설명” 이미지 설명
border 이미지의 테두리 값 지정. 0이면 테두리 없음

[예제 2.3.2] EX020302.htm의 이미지 태그를 이용한 HTML5 문서를 분석하라.

EX020302.htm
<!– 이 문서는 이미지(image) 태그 사용 예입니다. –>

<!DOCTYPE html>

<html>

<body>

<img src=”C:/웹데이터시각화/JJLEE.JPG” align=bottom> 문장을 이미지 하단에 정렬 <p>

<img src=”C:/웹데이터시각화/JJLEE.JPG” align=top> 문장을 이미지 상단에 정렬 <p>

<img src=”C:/웹데이터시각화/JJLEE.JPG” align=middle> 문장을 이미지 중간에 정렬 <p>

<img src=”C:/웹데이터시각화/JJLEE.JPG” hspace=30> 왼쪽여백 30픽셀

<img src=”C:/웹데이터시각화/JJLEE.JPG” width=100 HEIGHT=150> 너비 100, 높이 150

<img src=”C:/웹데이터시각화/JJLEE.JPG” border=3> 테두리 3 <P>

</body>

</html>

<풀이>

  • 크롬 브라우저로 EX020302.htm 파일을 실행하면 <그림 2.3.3>과 같다.

<그림 2.3.3> EX020302.htm을 크롬 브라우저로 본 화면

  • HTML5 이전까지는 오디오나 비디오를 웹페이지에서 재생하기 위해 브라우저에 플러그인(plug-in) 소프트웨어를 설치하였는데 대표적인 것인 ActiveX이다. 이 플러그인 소프트웨어는 비표준 형식의 오디오나 비디오 데이터를 처리하여 주었다.
  • HTML5에서는 이러한 플러그인 소프트웨어 없이 <audio>와 <video> 태그를 이용하여 대부분의 오디오 비디오 파일을 재생할 수 있다. 하지만 아직 HTML5가 지원하지 않는 파일 형식은 플러그인의 설치가 필요하다.
  • [표 2.3.5]는 <audio> 태그와 그 속성에 대한 설명이다.
[표 2.3.5] 오디오 태그 <audio>와 속성
<audio src=”오디오 파일 위치 URL” controls autoplay loop>

브라우저가 이 태그를 지원 안한다는 메시지

</audio>
속성 설명
controls 재생, 시간, 중단, 음소거 등 제어 버튼 출력
autoplay 오디오 즉시 재생
loop 오디오 반복 재생
  • 다음은 <audio> 태그의 예이다. 이 태그를 실행하면 오디오 플레이어가 우측과 같이 나타나며 음량을 조절할 수 있고 파일을 다운로드할 수도 있다
<audio src=”horse.mp3″ controls>

브라우저가 이 태그를 지원 안함

</audio>
  • [표 2.3.6]은 <video> 태그와 그 속성에 대한 설명이다. 현재 HTML5에서 재생 가능한 비디오 타입은 mp4, webM, Ogg 등이 있다. mp4는 ISO/IEC에서 표준화한 MPEG-4의 멀티미디어 컨테이너 형식이다. WebM은 VP8 영상 코덱으로 인코딩된 비디오와 Xiph.org에서 개발하여 무료로 사용할 수 있는 Vorbis 오디오 코덱으로 인코딩한 오디오 데이터를 저장하는 형식이다. WebM은 구글에서 후원을 받아 개발된 로얄티 없는 고화질 압축 영상 형식이다. Ogg는 Xiph.org에서 개발한 멀티미디어 컨테이너 형식이다.
[표 2.3.6] 비디오 태그 <video>와 속성
<video src=”비디오 파일 위치 URL” width=”비디오 영역 너비” height=”비디오 영역 높이“

controls autoplay muted loop>

브라우저가 이 태그를 지원 안한다는 메시지

</audio>
속성 설명
width 비디오 영역 너비
height 비디오 영역 높이
controls 재생, 시간, 중단, 음소거 등 제어 버튼 출력
autoplay 오디오 즉시 재생
loop 오디오 반복 재생
  • 다음은 w3Schools에 있는 <video> 태그의 예이다. 여기서 <source> 태그로 두 개의 비디오 파일 형식을 적은 이유는 브라우저가 특정 비디오 파일만 인식할 수 있기 때문에 개발자가 하나의 비디오 타입을 여러 파일 형식으로 만들어 놓고 브라우저가 재생 가능한 파일을 선택하도록 한 것이다. 이 <video> 태그를 실행하면 비디오 플레이어가 우측과 같이 나타나며 음량을 조절할 수 있고 파일을 다운로드할 수도 있다.
HTML 코드 크롬 출력
<video width=”400″ controls>

<source src=”mov_bbb.mp4″ type=”video/mp4″>

<source src=”mov_bbb.ogg” type=”video/ogg”>

브라우저가 이 태그를 지원 안함

</video>

 

2.2 HTML5 기본 태그

2.2.2 태그의 속성 지정

Posted on by admin
 2장 HTML5 개요 

2-2-2 태그의 속성 지정

  • HTML5 문서를 구성하는 각각의 태그는 다음과 같이 시작 태그 안에 속성(attribute)을 가질 수 있다.
<img src=“jjlee.jpg” width=“80” height=“60”>

(이미지 파일 속성) (이미지 가로 속성) (이미지 세로 속성)
  • 이 태그는 문서에 jjlee.jpg라는 사진 파일을 가로 80픽셀 세로 60픽셀로 포함하라는 명령어이다.
  • 태그의 속성도 대소문자를 구별하지 않는다. 그러나 속성값에 불필요한 공백이 들어가면 오류가 된다.
  • HTML5에서 태그의 속성값은 대개 이중인용부호 ”안에 지정하는데 단일인용부호 ’를 사용하거나 인용부호를 전혀 사용하지 않아도 된다. 다만 속성값에 공백이 있는 경우는 인용부호를 사용하여야 한다.
<h1 style=”color:blue;”>

<p style=”font-family:verdana;“>

<img src=”JJLEE.jpg”>

<a href=”http://www.w3schools.com”>
  • 각 태그의 속성 지정은 반드시 시작 태그에서 한다.
  • 태그의 속성값은 대개 이중인용부호 ”안에 지정하는데 단일인용부호 ’를 사용하거나 인용부호를 전혀 사용하지 않아도 된다. 다만 속성값에 공백이 있는 경우는 인용부호를 사용하여야 한다. 인용부호를 사용하든 아니든 일관성이 중요하다.
  • [표 2.2.2]는 HTML5의 여러 가지 태그에 많이 사용되는 속성을 정리한 것이다.
[표 2.2.2] HTML5 문서의 태그에 사용되는 기본 속성
속성(Attribute) 설명
alt 이미지 태그에 다른 텍스트를 지정
disabled HTML 입력 요소(input element)가 작동하지 않도록 지정
href 태그 <a>에서 링크의 URL (web address) 지정
height HTML 요소의 높이
id HTML 요소의 고유 id 지정
src 이미지 파일의 URL (웹주소) 지정
style HTML 요소의 폰트, 색 등을 지정
title HTML 요소의 툴팁 등의 정보를 지정
width HTML 요소의 너비
  • [표 2.2.2]에서 alt 속성은 <img> 태그에서 이미지가 혹 안보일 경우 대신 지정해주는 속성이다. 이미지의 너비를 width 높이를 height 속성으로 다음과 같이 지정할 수 있다.
HTML 코드 크롬 출력
<img src=”smiley.gif” alt=”Smiley face” width=”42″ height=”42″>
  • title 속성은 요소에 툴팁(tool tip: 마우스를 대면 설명이 나타남)을 지정해 준다.
HTML 코드 크롬 출력
<p title = “Hyper Text Markup Language”> HTML </p>
  • disabled 속성은 3장에서 배우는 <input> 태그를 필요시 작동하지 않게 하여준다. 다음은 두 개의 텍스트 입력창에서 이름을 입력하기 전까지는 주소 입력창을 입력할 수 없도록 지정한 것이다.
HTML 코드 크롬 출력
이름: <input type=”text” name=”fname”><br>

주소: <input type=”text” name=”lname” disabled><br>
  • href 속성은 HTML 문서에서 다른 홈페이지 링크에 사용되는 태그 <a>에서 링크의 URL (web address)을 지정한다. 태그 <a>에 대해서는 2.4.3절에서 자세히 설명한다.
HTML 코드 크롬 출력
<a href=”https://www.w3schools.com”>Visit W3Schools.com!</a> Visit W3Schools.com!
  • id 속성을 이용하여 HTML 모든 요소에 고유 이름을 지정해 준다. 이 고유 이름을 이용하여 JavaScript에서 각 요소에 적당한 동작을 지정해 줄 수 있다. 다음 예제는 <h1> 태그에 id를 준 후 버튼을 누르면 <h1> 태그의 내용이 바뀌는 JavaScript 프로그램이다.
HTML 코드 크롬 출력
<html>

<body>

<h1 id=”myHeader”>Hello World!</h1>

<button onclick=”displayResult()”>Change text</button>

<script>

function displayResult() {

document.getElementById(“myHeader”).innerHTML = “Have a nice day!”;

}

</script>

</body>

</html>
  • [예제 2.2.2] EX020202.htm과 같은 HTML5 문서에서 태그 <p>의 title 속성과 태그 <a>의 href 속성, 그리고 style 속성을 살펴보라.
EX020202.htm
<!– 이 문서는 여러 태그의 속성(attribute) 사용 예입니다. –>

<!DOCTYPE html>

<html>

<body>

<h1 style=”color:blue” title=”Hyper Text Markup Language”>HTML</h1>

<p style=”font-family:verdana; font-size:70%; text-align:right;”> 글쓴이 JJ LEE</p>

<img src=”JJLEE.jpg” width=”80″ height=”100″ align=right>

<p style=“background-color: lightgrey; color:green”>

Hyper Language는 프로그램을 순차적으로 실행하는 Linear Language에 상대되는 언어를

뜻하는데 링크(link)를 통해 실행 순서가 자유로운 언어라는 뜻이다.

Markup은 문서의 형식을 지정하는 명령문을 의미한다.

<p>

<p style=”color:green”>

즉 HTML은 텍스트 문장이나 이미지 등에 실행순서가 자유로운 적당한 명령문을 주어

전체 문서를 웹 브라우저에서 잘 보일 수 있도록 꾸며주는 언어이다.

웹브라우저는 HTML로 작성된 문서를 번역하여 화면에 보여준다.

</p>

<hr>

<p style=”color:red; font-family:굴림; font-size:20px”>

<b> !! 마우스를 HTML 단어에 위치하면 툴팁이 보입니다. </b>

</p>

<a href=”http://www.w3schools.com”>

여기를 클릭하면 HTML5에 공부에 유용한 사이트 www.w3schools.com으로 이동

</a>

</body>

</html>

<풀이>

  • 각 태그의 속성 지정은 반드시 시작 태그에서 한다. 예를 들면 문단의 시작을 하는 <p> 태그에는 style 속성을 이용하여 폰트 종류(style=font-family: ), 폰트 크기(style=font-size: ), 폰트 색(style=color: ), 문장의 정렬(style=“text-align: )을 지정할 수 있다.
  • title 속성을 이용하여 문단 전체에 툴팁(tool tip: 마우스를 대면 설명이 나타남)을 지정해줄 수 있다.
<h1 style=”color:blue;”>HTML</h1>

<p style=”font-family:verdana; font-size:70%; text-align:right;”> 글쓴이 JJ LEE</p>

<p title = “HTML이란?”>
  • 다른 웹사이트를 링크시키는 <a> 태그에는 href 속성을 이용하여 링크되는 웹사이트 주소를 지정할 수 있다.
<a href=”http://www.w3schools.com”>
  • 이미지를 삽입하는 <img> 태그에는 src 속성을 이용하여 이미지 파일명을 지정하고, width 속성을 이용하여 이미지 너비를 지정하며, height 속성을 이용하여 이미지 높이를 지정하고, align 속성을 이용하여 이미지의 위치를 지정할 수 있다.
  • 크롬 브라우저로 EX020202.htm 파일을 실행하면 <그림 2.2.2>와 같다.

<그림 2.2.2> EX020202htm을 크롬 브라우저로 본 화면