http://www.jobtc.kr () HTML5 훈련교사 박원기 hipwg@naver.com http://www.jobtc.kr 1 / 64
http://www.jobtc.kr ( 1.인터넷과 HTML의 개요) 1. 인터넷과 HTML의 개요 1.1. 불의 사용과 웹의 전파 1.1.1. 불과 인류 인류 : 약 200만년전에 출현 인류의 불 흔적 : 약 100만년전 현인류 : 약 4만년전 지구는 4번의 빙하기와 3번의 간빙기를 거침 인류 문명 : 약 4~5천년전 4대 문명으로 부터 우리나라 : 약 70만년전 1.1.2. 인터넷과 인류 네트워크 : 약 50년전 웹 : 약 25년전 우리나라 : 약 20년전 1.2. 인터넷과 HTML의 역사 년도 인터넷 1967 ARPAnet 군사용 구축 1982 인터넷에 TCP/IP 적용 HTML 대한민국 대한민국 최초 네트워크 접속 (서울대-한국과학 기술원) 1983 미국과 최초 접속 1984 유럽과 최초 접속 1986 학술 연구용 네트워크 분 리(NSFnet) 1989 유럽 핵물리학 연구소(CERN)에 서 연구소 내의 논문 연람 시스템 으로 www고안 1991 www 공개. 폭발적인 보급효과. 1993 HTTML 1.0 등장 NCSA 웹브라우저 'Mosaic' 공개 1994 1995 한국통신 인터넷 계정 서비스 시작으로 인터넷이 본적적으로 일반인에게 보급되기 시작. NSFnet 민간으로 이관. 인터넷 보급 브라우저 전쟁. Netscape / Explorer 2 / 64
http://www.jobtc.kr ( 1.인터넷과 HTML의 개요) 1997 HTML4.01 W3C권고안. 1999 IE5 등장 2004 FireFox 등장. SNS 유행 2005 Ajax/Web2.0 주목 2006 Youtube가 google에 매수 2007 iphone 발매 2008 HTML5 초안공개. Android 스마트폰 발매 2013 ios, android 모바일 양대 산맥 으로 부상. 3 / 64
http://www.jobtc.kr ( 2.브라우저별 점유율 추이) 2. 브라우저별 점유율 추이 분석 관련 사이트 : http://gs.statcounter.com 2.1. 부라우저별 세계 추이 2.2. 브라우저별 국내 추이 4 / 64
http://www.jobtc.kr ( 2.브라우저별 점유율 추이) 2.3. 브라우저별 미국 추이 5 / 64
http://www.jobtc.kr ( 2.브라우저별 점유율 추이) 2.4. 브라우저별 일본 및 중국 추이 일본 중국 2.5. 브라우저별 인도 추이 6 / 64
http://www.jobtc.kr ( 2.브라우저별 점유율 추이) 2.6. 모바일 브라우저 세계 추이 2.7. 국내 모바일 브라우저 추이 7 / 64
http://www.jobtc.kr ( 2.브라우저별 점유율 추이) 8 / 64
http://www.jobtc.kr ( 3.HTML과 웹 표준) 3. HTML과 웹 표준 3.1. 등장 배경 1999년 IE5를 발표한 후 부터 MS사는 w3c의 웹표준 권고안 보다는 자사의 기술에만 의존하는 기 술을 채용(단적인 예, ActiveX) 2007년 아이폰이 발매되면서 모바일 브라우저 강세. 그간 군소 브라우저들로 치부되었던 사파리, 오페라, 파이어폭스 등의 브라우저들이 작고 빠른 처리 속도를 무기로 모바일 브라우저 점유. 2009년 IE8 버전을 발표하는 시점에 세계시장은 이미 사파리, 크롬, 오페라, 파이어폭스 등과 같은 브라우저들의 성장세 가속. 결국 MS는 IE의 차기 버전인 IE9에서는 w3c의 표준을 완벽하게 지원하겠다고 발표. 결국 모바일웹의 성장과 웹표준의 필요성이 맞아떨어지면서 웹표준의 일반화가 가속됨. 3.2. 웹표준의 필요성 HTML의 한계를 뛰어 넘는 리치 UI 등장 응용 프로그램 플랫폼으로 발전한 웹 브라우저 Flash, Silverlight, JavaFx, Google Gears YouTube, Facebook, Flicker(사진공유사이트), pixiv(일러스트 투고 사이트), Google Maps, 플러그인에서 벗어나고자 하는 HTML 3.3. html5 소개 HTML5는 웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로 MS, 모질라, 애플, 구글, 오페라등 거의 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이다. HTML5의 가장 큰 목적은 과거 HTML과 호환 성을 유지하면서 과거에서 발생하던 브라우저간의 비호환성을 해결하도록 하는 것이다. 과거의 브라우저들에게 나타났던 현상들은 HTML를 지원하되 자사에 특화된 비 표준 태그들을 난발하면서 호환성에 문제가 되었다. 이에 따라 거의 모든 웹 개발자들은 여러 가지의 브라우저를 대상으로 웹 프로그램 의 호환성을 테스트하기 위해 불필요한 자원을 소모하게 되었으며, 심지어는 MS의 독주로 인한 기형적인 웹 프로그램들이 나오기도 하였다. 이는 독주로 인한 패단은 HTML4버전 이후 새로운 버전이 나오기 까지 10년이 넘는 세월을 보내야 했다는 결과를 낳았다. 그만큼 혁식이 늦어졌다는 말이기도 하다. 다행스런운것은 이러한 혁신의 필요성이 모바일의 시장이 커지면서 시작되었다. 또한 HTML5가 인터넷 업 계에서 알려지게 된 계기는 2009년 구글의 웹개발자 컨퍼런스 와 스티브 잡스가 애플 아이폰에 플래시 탑 재를 거부하면서 대응 기술로 HTML5를 홍보하기 시작한 때 부터일 것이다. 9 / 64
http://www.jobtc.kr ( 3.HTML과 웹 표준) 3.4. HTML5 디자인 원칙 HTML5를 디자인 하면서 설계자들이 갖고 있는 원칙은 다음과 같다. 기존의 HTML 문법과 사용법을 최대한 지원하면서 단계적으로 축소한다. 웹 개발자들이 겪고 있는 가장 중요한 문제들을 우선 순으로 나누고 문제점을 분리해서 독립적으로 해결하려는 유연성의 원칙. 웹 브라우저간의 상호 호환성 유지와 오류 처리 방법을 명시하도록 한다. 3.5. HTML5의 작성 원칙 HTML5의 문서를 구분하기 위해 문서의 형식을 아래와 같이 지정한다. html특성상 대소문자는 구별하지 않 는다. <!doctype html> 기존 HTML4.x 버전대 에서는 문서의 형식을 지정할 때 보다 복잡한 구조를 갖고 있었다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 3.6. 브라우저별 사용 엔진 엔진 이름 브라우저의 종류 게코(Gecko) 모질라에서 제작. 파이어폭스, 썬더버드, 시몽키 등 트라이던트(Trident) 마이크로소프트제작. 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로 소프트 아웃룩, 그리고 윈앰프, 리얼플레이어의 미니 브라우저 등 프레스토(Presto) 오페라 소프트웨어의 사유엔진. 오페라 KHTML KDE의 컨커러 웹키트(WebKit) KHTML의 파생엔진. 사파리, 크롬 등 태즈먼(Tasman) 마이크로소프트 엔진. 맥용 인터넷익스플로러 [출처] http://blog.naver.com/toggri/140094908731 3.7. HTML4와의 차이점 3.7.1. 구조적인 요소 추가 구역을 나누는 div 태그를 대신하여 용도별로 요소들이 추가 됨. header 10 / 64
http://www.jobtc.kr ( 3.HTML과 웹 표준) nav article section aside footer 3.7.2. 멀티 미디어 요소 추가 외부 플러그인을 사용하지 않고 멀티 미디어를 실행할 수 있도록 추가. audio video 3.7.3. 편의성을 극대화한 요소 추가 command datalist details embed figure gifcaption 3.7.4. 요소의 의미를 변경 em : 강한 강조를 나타낼 때 hr : 각 section을 구분할 때 11 / 64
http://www.jobtc.kr ( 4.HTML 기본 골격) 4. HTML 기본 골격 4.1. html이란? html : Hyper Text Markup Language의 약자이다. SGML(Standard Generalized Markup Language)에 기반을 두고 있다. 표준화 기군인 W3C에 의해 관리된다. 현재 4.0이 일반적으로 사용된다. 4.2. html 특징 대소문자 구별이 없다. 태그(<>)로 이루어져 있다. 2칸 이상의 공백과 줄바꿈을 인식하지 못한다. 태그에는 쌍을 이루는 태그와 단독태그가 존재한다. 일반적으로 확장자는 "htm" 또는 "html"을 사용한다. 4.3. html 컨텐츠의 분류 12 / 64
http://www.jobtc.kr ( 4.HTML 기본 골격) 4.4. html문서의 주소 html문서의 의미를 알아보자. http://www.jobtc.kr/html/index.html http : Hyper Text Transfer Protocol로 대표적인 인터넷 프로토콜(통신규약)이다. www : Wold Wide Web을 나타내며 서버의종류이다. jobtc.kr : 도메인 /html/index.html : 브라우저에서 보여질 디렉토리와 파일을 나타낸다. 4.5. HTML기본 골격 <html> <head> <title> 타이틀 내용 </title> <meta> 내용 </meta> </head> <body> 브라우저에 표시될 내용 </body> 4.5.1. <html>... 웹 브라우저에게 html문서의 시작을 알려준다. 종료태그인 을 문서의 마지막에 기술한다. 4.5.2. <head>... </head> html문서의 헤드 부분을 나타내며 문서가 웹 브라우저에 표시되기전에 읽혀진다. 가장 많이 사용되 는 하위 태그로는 <title>과 <meta>태그가 있다. 4.5.3. <title>... </title> 문서의 제목을 나타내며 웹 브라우저의 제목표시줄에 표시된다. 4.5.4. <meta>... </meta> 일종의 HTML문서의 정보를 담아두는 요소를 정의할 때 쓰이는 태그 보통 HTML문서의 레이아웃에 직접적인 역할(즉 브라우저상에 보여지게 하는 역할을 하는 태그가 13 / 64
http://www.jobtc.kr ( 4.HTML 기본 골격) 아니다라는 뜻)을 하는 태그는 아님. HTML문서에 일정부분의 부가적 요소를 정의해두는 태그. 검색엔진에게 관련 정보 제공 문자 인코딩할 때 자동으로 새로고침하고자 할때 세부 내용 <meta name="author" content="소유자명"> <meta name="description" content="간단한 설명"> <meta name="keywords" content="키워드"> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <meta http-equiv="refresh" content="10;url=comic1.html"> meta 태그는 <title>태그 뒤에 써주는게 좋다. 5. html 요소 5.1. body 속성 웹 브라우저 상에 보이는 실제 내용들이 기술되는 부분이다. 1) 속성들 속성명 설명 background 문서 배경에 출력되는 이미지 bgcolor 문서 배경 색상 text 기본 글자 색 link 링크색 vlink 한번 방문한 링크의 색 alink 현재 클릭하고 있는 링크의 색 바탕색 및 기본 글자색 지정 <!doctype html> <html> <head> <meta charset='utf-8'> <meta> 내용 </meta> <title> 타이틀 내용 </title> </head> <body bgcolor='#ffff00' text='#ff0000'> 브라우저에 표시될 내용 </body> 14 / 64
브라우저 바탕에 이미지 표시하기 <!doctype html> <html> <head> <meta charset='utf-8'> <meta> 내용 </meta> <title> 타이틀 내용 </title> </head> <body background='back.png' text='#ffffff'> 바탕에 이미지 띄우기 </body> 5.2. 글꼴 태그 종류 h 15 / 64
font b i u s sub sup mark 5.2.1. <Hn>... </Hn> Head Line을 의미하며 일반적으로 문단의 제목을 표시할 때 사용한다. 구조 <H1 align="left center right"> Heading </H1> align : 문장의 정렬 방식. 특징 문자는 자동으로 굵게 처리된다. 문단을 분리하여 한줄의 빈 공백이 발생한다. n의 값의 범위는 1~6까지이고 1이 가장 큰 사이즈이다. 예 head line 예제 <!DOCTYPE html> <html> <head> <title>html 연습</title> <meta charset="utf-8"> </head> <body> <section> <h1>가장 큰 글씨</h1> 관련 기사 내용 입니다. </section> <section> <h6>가장 작은 헤드라인</h6> 관련 기사 내용 입니다. </section> <section> <h1 align="center">최대크기로 가운데</h1> <h6 align="right">최소크기로 오른쪽</h6> </section> </body> 16 / 64
5.2.2. <FONT>...</FONT> 글자의 크기와 색상,글꼴을 지정할 때 사용한다. 구조 <FONT size="n" face="글꼴" color="#rrggbb"> 문자 </FONT> size : 1~7까지 사용하고 1이 가장 작은 크기이다. face : 글꼴을 지정한다. color : 글자의 색상을 지정한다. 영어와 한글의 색상이름을 사용할 수도 있지만 모든 브라우저가 인 식한다는 보장이 없기 때문에 일반적으로 RGB색상 코드값을 사용한다. RR : red GG : green BB : blue 각각의 값은 16진수 00~ff까지 갖는다. 폰트 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font test</title> </head> <body> <font size=1> 최소 크기</font><br/> <font size=7> 최대 크기</font><br/> <font size=3 color="#009900">보통 초록</font><br/> <font size=7 face='궁서체' color='#ff0000'>빨강 궁서체</font><br/> </body> 17 / 64
5.2.3. <B>... </B> Bold체를 나타내며 문자를 굵게 표시한다. 5.2.4. <I>... </I> 이탤릭체를 나타내며 문자를 옆으로 기울려 표시한다. 5.2.5. <U>... </U> 문자에 밑줄을 그어 표시한다. 5.2.6. <S>... </S> 문자 중앙에 줄을 그어 표시한다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font test</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> <b>볼드(굵은체)</b><p> <i>기울임체</i><p> <u>밑즐 좌~악</u><p> <s>취소...</s> </body> 18 / 64
5.2.7. <SUB>...</SUB> 아래 첨자로 표시한다. 5.2.8. <SUP>... </SUP> 위 첨자로 표시한다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font test</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 물 : H<sub>2</sub>O <p> 원의 방정식 : X<sup>2</sup> * Y<sup>2</sup> = 1 </body> 5.2.9. mark 글자에 형광 효과를 준다. 19 / 64
5.3. 문단 모양 태그 종류 p div pre xmp hr br blockquote section article nav header aside footer 5.3.1. <P align = "left center right">... </P> 문단과 문단을 분리하여 표시한다. align : 문단의 정렬 방식을 정한다. 표함되어 있는 각종 태그는 번역되어 그 결과가 표시된다. <p/>만을 사용하여 단독으로 사용될 수 있다. 이때 주의할 사항은 반복사용하여도 하나밖에 인식하 지 않는다. p 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>p 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두 문단 위 아래에 여백이 있음을 유념하세요. <p>첫번째 문단</p> <p>두번째 문단</p> </body> 5.3.2. <DIV align = "left center right">... </DIV> <P>태그와 그 기능이 동일하지만 문단과 문단을 분리하여 빈 줄은 만들어 내지 않는다. 레이어 의미로 가장 많이 사용됨. 반복 사용하여도 인식하지 않는다. div 태그 예제 20 / 64
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두 문단 위 아래에 여백이 생기지 않습니다. <div>첫번째 문단</div> <div>두번째 문단</div> </body> 5.3.3. <PRE>... </PRE> 공백과 줄띄기를 입력한 그대로 인식한다. 한 줄이 너무 길면 브라우저상에 좌우 스크롤바가 생겨 사용자에게 불편함을 안겨 줄 수 있다. pre 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pre 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 일반 문서와 pre안의 문서를 비교해 보세요.<p> <div>첫번째 문단은 입력 한 모양이 아니군요. </div> <pre>두번째 문단 입력한 모양 그대로네... </pre> </body> 21 / 64
5.3.4. <XMP>... </XMP> 일반적으로 문단을 만드는 태그들의 안쪽 내용중에 태그가 존재하면 그 태그의 결과물이 브라우저 에 표시되는데 <XMP> 태그는 태그마저 해석하지 않고 그대로 화면에 표시해 준다. 비 표준 태그 xmp 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xmp 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두눈 크게 뜨고 비교하세요<p> <pre>모양이 <b>그대로라도</b> 할건 합니다. </pre> <xmp>모양도 그대로 <b>문자도</b> 그대로... </xmp> </body> 5.3.5. <HR> 수평선을 긋는 효과를 보이지만 html5에서는 section을 구분하는 역활로 그 의미가 바뀌었다. 22 / 64
속성 align= "left center right" : 수평선의 정렬상태 지정. size = n : 수평선의 굵기(픽셀단위) width = n : 수평선의 길이(픽셀단위) noshade : 음영이 없는 수평선. hr 태그 연습 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hr 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> <xmp><hr></xmp> <hr> <xmp><hr size=20></xmp> <hr size=20> <xmp><hr size=20 noshade></xmp> <hr size=20 noshade> <xmp><hr size=40 width="50%" noshade></xmp> <hr size=40 width="50%" noshade> </BODY> 5.3.6. <BR> 줄을 띄운다. 일반적으로 엔터기능 반복적으로 사용 가능. 23 / 64
5.3.7. <BLOCKQUOTE>... </BLOCKQUOTE> 한 블록을 들여쓰기 한다. blockquote 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>blockquote 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 일반적인 문단입니다. <blockquote>이 문단은 blockquote를 사용하여 들여쓰기된 곳입니다.</blockquote> 일반적인 문단입니다. </body> 5.3.8. section html5에서 추가된 태그. 문서나 어플리케이션의 영역을 구별하기 위한 태그. 하나의 section안에 여러 개의 article이 존재할 수 있음. section안에 nav, footer등의 요소를 사용할 수 있음. class나 id를 사용하여 보다 특정한 정보를 넣을 수 있음. h1~h6과 같이 사용할 수 있음. 하나의 섹션안에서는 묵시적으로 제목을 하나만 사용함. 스타일링이나 스크립트를 위해 영역을 나눌때는 사용할 수 없음. 만약 이를 위해 사용하려면 <div> 태그를 사용해야 함. section 예제 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>section</title> </head> <body> <article> 24 / 64
<section> <h1>우리나라 명산</h1> <ol> <li>백두산</li> <li>한라산</li> <li>설악산</li> <li>치악산</li> <li>금강산</li> </ol> </section> <section> <h1>우리나라 명천</h1> <ol> <li>한강</li> <li>두만강</li> <li>금강</li> <li>낙동강</li> <li>소금강</li> </ol> </section> </article> </body> 5.3.9. article 고유한 컨텐츠가 포함되어 있는 독립적인 글들을 나타낼 때 사용함. 하나의 article안에 여러 개의 section이 존재할 수 있음. article 예제 25 / 64
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>article 예제</title> </head> <body> <article> <header> 머릿글 </header> <section> 세상사는 이야기 </section> <footer> 바닥글 </footer> </article> </body> 5.3.10. nav 메인 내비게이션 블럭이 들어 있는 section에만 사용. nav 예제 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>nav 예제</title> </head> <body> <section> <h1>html5의 세계로</h1> <nav> <ul> <li><a href="www.jobtc.kr">job Training Center</a></li> <li><a href="www.naver.com">네이버</a></li> 26 / 64
<li><a href="www.daum.net">다음</a></li> </ul> </nav> </section> </body> 5.3.11. header 업체의 로고나, 상호등을 표시 할 때. 굳이 페이지의 상단에 오지 않아도 됨. section, header, footer, nav 요소는 사용해서는 안됨. 5.3.12. aside 주된 내용과 연관되어지는 부수적인 내용을 표시 할 때.(팁, 보충설명등) 속성 align = "left right center" : 내용을 정렬 5.3.13. footer 굳이 문서 끝에만 두는 법은 없다. header, section, 또 다른 footer등을 포함 할 수 있다. 27 / 64
5.3.14. html4와 html5의 구성 변화 출처 : http://html5doctor.com/designing-a-blog-with-html5/ 5.3.15. section과 article section과 article의 차이점 article은 대부분 독립적인 부분을 구성할 때 사용. 독립적인 부분이 하나의 컨텐츠로 만들어질 수 있음. sction은 메뉴, 컨텐츠의 일부분 등이 될 수 있음. 따라서 article과 다른게 독립적인 부분이 하 나의 컨텐츠가 될 수도 있지만 그렇지 않을 수도 있음. 5.3.16. fieldset 웹페이지의 내용을 그룹화하고 영역을 표시해 준다. <legend/>를 사용하여 그룹화된 내용의 제목을 표시할 수 있다. 28 / 64
legend의 주요 속성 align='top bottom left right' 구조 <fieldset> <legend> 제목 </legend> </fieldset> fieldset 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fieldset 예제</title> </head> <body> <h1>fieldset 예제</h1> <fieldset> <legend> fielset의 제목 </legend> fieldset으로 구분된 영역의 내용입니다. </fieldset> </body> </body> 5.4. 링크 태그 html언어의 특징중에 하이퍼링크라는 특징이 있다. 이는 현재 문서에서 특정 URL의 특정 문서나 자 29 / 64
기 자신의 특정 위치로 이동할 수 있는 기능을 뜻한다. html의 사용성을 폭발적으로 증가시켰던 가장 중요한 명령중 하나이다. 5.4.1. 구조 <a href="url" target="positon">설명</a> 5.4.2. 다른 페이지 링크하기 1) 현재 페이지에 다른 문서 링크하기 <a href="http://www.jobtc.kr">job training center cafe</a> 2) 새페이지에 링크하기 <a href="http://www.yahoo.co.kr target="_blank">야후</a> 3) 다른 프레임에 링크하기 <a href="http://www.yahoo.co.kr target="frame_name">야후</a> 5.4.3. 동일한 문서내 링크하기 4) 동일한 문서내에서 링크하기 - 호출하는 부분 <a href="#call_name">그곳으로</a> - 호출되는 부분 <a name="call_name">이곳입니다.</a> 5.4.4. 다른 문서의 특정한곳으로 링크하기 5) 다른 문서의 특정한 곳으로 링크하기 - 호출하는 부분 <a href="this.html#그곳으로 >그곳으로</a> - 호출되는 부분(this.html 문서) <a name="그곳으로 >이곳입니다.</a> 5.4.5. 다른 프레임 링크하기 6) 다른 프레임으로 링크하기 - <a href="url" target="frame_name"> frame_name : frame 태그내에 name="frame_name"을 반드시 명기하여야 한다. 5.4.6. 부모 프레임 유형으로 링크하기 현재 frame을 생성하기전 frame 상태로 연결한다. - <a href="url" target="_parent"> 30 / 64
- <a href="url" target="_top"> 5.4.7. 이메일 전송창으로 연결 7) 다른 사람의 E-Mail <a href="mailto:받는사람의 url">내용 </a> 5.5. 이미지 태그 웹 브라우저에 특정이미지를 특정 위치에 표시하거나 이미지의 특정 영역을 지정하여 Hyper Link로 연결할 수 있는 영역을 지정한다. 구조 <IMG src="이미지url" align = "top bottom middle left right" width=n height=n border=n vspace=n hspace=n lowsrc="이미지url" usemap="#맵이름"> 5.5.1. src="이미지 url" 표시할 이미지가 있는 위치를 지정한다. 절대 경로 : 일반적으로 웹상의 가상 디렉토리를 기준으로 한다. 상대경로 : 현재 디렉토리를 기준으로 상대 경로를 찾아 들어간다... : 한단계 상위 디렉토리부터 시작. : 현재 디렉토리부터 시작 [예] 특정 url src = "http://www.jobtc.kr/img/test.gif" 절대 경로 src = "/img/test.gif" 상대 경로 src = "../img/test.gif" 5.5.2. align align = "left right center" 텍스트나 화면과의 관계에서 이미지의 위치를 나타낸다. 5.5.3. width, height 이미지의 크기를 정하는데 픽셀 단위나 비율단위로 정할 수 있다.. 필셀단위 : width="100px" 이미지 넓이는 100 필셀로 비율단위 : width="50%" 화면크기의 50% 크기로 31 / 64
5.5.4. border 이미지의 테두리 두께를 정한다. 이미지의 넓이와 높이 조절 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image Test</title> </head> <body> <h1>이미지 넓이 높이 조절 예</h1> <h3>원본 이미지</h3> <img src="img.png"><p/> <h3>160 x 240</h3> <img src="img.png" width="160" height="240"><p/> <h3> 80 x 240</h3> <img src="img.png" width="80" height="240"><p/> <h3>border='40px'</h3> <img src="img.png" border="40px" > <p/> <h3>width='60%' height='200'</h3> <img src="img.png" width="60%" height="200"><p/> <hr/> </body> 5.5.5. vspace, hspace 이미지의 외부 여백을 정한다. vspace : 위 아래 여백 hspace : 좌 우 여백 이미지와 텍스트의 조합 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image Test</title> </head> 32 / 64
<body> <h1>이미지와 문단</h1> <h3>기본 유형</h3> <img src="img.png"> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. <hr/> <div style='height:300px'> <h3>이미지를 오른쪽 정렬</h3> <img src="img.png" align='right'> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. </div> <hr/> <div style='height:400px'> <h3>이미지 왼쪽 정렬 과 상하좌우여백 조절</h3> <img src="img.png" align="left" hspace="50" vspace="50" > 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 33 / 64
</div> <hr> <div style='height:300px'> <h3>이미지 오른쪽 정렬 과 좌우 여백 조절</h3> <img src="img.png" align="right" hspace="20" > 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. </div> <hr> </body> 34 / 64
5.5.6. lowsrc 이미지의 크기와 해상도를 줄여 미리보기 유형으로 서비스를 재공하기 사용. 35 / 64
5.6. usemap 이미지의 특정 부분을 나누어 하이퍼 링크로 사용하고자 할 때 사용한다. [구조] <img src="이미지 usemap="#맵이름 > : 이미지 맵 정의 <map name="맵이름 > <area shape="shape_type" coords="좌표 href="url"> </map> shape_type 범위지정을 어떤 모양으로 하는가를 결정한다. SHAPE=CIRCLE, RECT, POLY circle : 원형으로 rect : 사각형으로 poly : 다각형으로 coords 범위를 지정한다. SHAPE="RECT"(사각)일 경우는 COORDS="left-x,top-y,right-x,bottom-y"로 정해지며, SHAPE="CIRCLE"(원)은 COORDS="centre-x, centre-y, radius" SHAPE="POLY"(불규칙)는 COORDS="x1,y1,x2,y2,x3,y3... "로 정해진다. use map 예제 <!doctype html> <HTML> <HEAD> <TITLE>map</TITLE> <meta charset='utf-8'> </HEAD> <BODY style="font-size:30;line-height=12mm"> <h1 align=center>map Share</h1> <hr> <center><img src="zorro.jpg" usemap="#zorro"> </center> <map name="zorro" > <area shape="rect" coords="0,0,400,87" title='상단 부분' href="a.html"> <area shape="rect" coords="0,88,400,174" title="중앙 부분" href="b.html"> <area shape="rect" coords="0,175,400,260" title="하단 부분" href="c.html"> </map> </BODY> </HTML> 36 / 64
5.7. 목록 태그 목록테그를 사용하게되면 항목이 중간에 삽입되었을 경우 뒤번호 전체를 바꾸지 않아도 된다는 장점이 있다. [구조] <OL>목록에 번호가 붙여진다. <UL> 목록에 기호가 붙여진다. <OL> <LI>목록1 <LI>목록1 <LI>목록1 </OL> <UL> <LI>목록1 <LI>목록1 <LI>목록1 </UL> 5.7.1. OL <OL start=n type="type"> Ordered List 목록에 번호를 붙여 준다. 실제 목록은 <LI>태그를 사용하여 start 시작 번호를 정한다. type A : 영문자 대문자로 번호를 대신함. a : 영문자 소문자로 번호를 대신함. I : 로마자 대문자로 번호를 대신함. I : 로마자 소문자로 번호를 대신함. 1 : 숫자로 번호를 표시(기본값). 5.7.2. UL <UL type="type">unordered List type circle : 속이빈 동그라미 disk : 속이찬 동그라미 square : 속이찬 네모 37 / 64
OL/UL 예제 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>order/unorder List</title> </head> <body> <section> <header> <h1>order List</h1> </header> <article> <ol> <li>백두산 <li>금강산 <li>설악산 <li>지리산 <li>한라산 </ol> </article> <article> <ol start="5" type="a"> 산이름 <li>백두산 <li>금강산 <li>설악산 <li>지리산 <li>한라산 </ol> </article> <article> <ol start="5" type="i"> 산이름 <li>백두산 <li>금강산 <li>설악산 <li>지리산 <li>한라산 </ol> </article> </section> <hr/> <section> <header> <h1>unorder List</h1> </header> <article> <ul> 과일이름 <li> 수박 <li> 복숭아 <li> 자두 <li> 참외 <li> 사과 38 / 64
<li> 배 </ul> </article> <article> <ul type="circle"> 과일이름 <li> 수박 <li> 복숭아 <li> 자두 <li> 참외 <li> 사과 <li> 배 </ul> </article> <article> <ul type="square"> 과일이름 <li> 수박 <li> 복숭아 <li> 자두 <li> 참외 <li> 사과 <li> 배 </ul> </article> </section> </body> 39 / 64
5.7.3. DL [구조] <dl> Definition List <dt> ~ </dt> Definition Term(항목명) <dd> ~ </dd> Definition Description(항목설명) </dl> dl 예제 <!doctype html> <HTML> <HEAD> <TITLE> dl작성하기 </TITLE> <meta charset='utf-8'> </HEAD> <BODY> <center>dl 작성하기 </center><p> <dl> <dt>서울 <dd>대한민국의 수도. </dt> <dt>파리 <dd>여름에 매우 귀찮다. <dd>프랑스의 수도. </dt> </dl> </BODY> </HTML> 40 / 64