자세한 내용은 생코 사이트를 방문 하시면 됩니다.
=======================
HTML이란?
=======================
웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.
HT - HyperText, 문서와 문서가 링크로 연결되어 있다.
M - Markup, 태그로 이루어져 있다.
L - Language
=======================
태그란?
=======================
Tag
태그란 정보를 정의 하는 형식
태그의 형식
<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>
태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의 한다.
열리는 태그가 있으면 닫히는 태그가 있어야 한다.
닫히는 태그는 태그 명 앞에는 '/'가 붙는다.
속성은 태그의 부가적인 정보가 들어온다. 아래 예제에서 href는 속성명, httP://l-ht.com은 속성값이다.
href 속성은 컨텐츠인 생활코딩이 opentutorials.org와 연결되어 있다는 것을 의미한다.
<a href="http://l-ht.com">리하이테크</a>
닫히는 태그가 필요 없는 태그도 있다. 이런 경우 <태그명 />의 형식을 갖는다.
<br />
<input type="button" value="버튼" />
=======================
문서의 구조
=======================
HTML 문서는 파일의 확장자가 html 혹은 htm으로 끝난다.
최상위 태그로 <html>을 사용한다. 그 하위에 <head> 태그와 <body> 태그를 컨텐츠로 가지고 있다.
<head> 태그는 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담는다.
<body> 태그에는 문서의 내용이 위치한다.
<html>
<head>
문서를 정의하는 데이터가 위치함
</head>
<body>
문서에 표시되는 컨텐츠가 위치함
</body>
</html>
참고. 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미한다. 이를테면 태그가 대표적인 메타데이터이다.
HTML 파일
HTML 코드를 파일에 저장하고 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 파일은 텍스트를 편집할 수 있는 에디터로 만들 수 있고,
확장자명으로 html 혹은 htm을 사용한다.
예제
example1. 아래 예제는 <a> 태그를 이용해서 링크를 만들고 <img> 태그를 이용해서 이미지를 출력하는 방법에 대한 사례다.
!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<img alt="보안으로접속" src="https://l-ht.com" />
<br />
<a href="http://l-ht.com">홈페이지접속</a>
</body>
</html>
=======================
개발도구란?
=======================
개발도구란? 개발을 하는데 필요한 도구와 개발된 결과를 실행할 환경을 의미한다.
HTML 수업에서 개발도구란 웹페이지의 소스를 만드는 에디터와 웹페이지를 실행할 웹브라우저와 같은 일련의 도구를 의미한다.
=======================
개발도구
=======================
웹브라우저
구글 크롬을 사용
구글 크롬 사용
=======================
크롬에서의 디버깅 툴
=======================
인스팩터 (inspector)
웹페이지의 코드를 분석하고, 조작할 수 있는 도구
구글 개발자 도구 (Elements) 사용
테크를 분석 할때 사용한다.
리소스
HTML 분석
프레임 분석
클라이언트 측(브라우저에 저장되는 기능)
SQL, DB, 스토리지등등
네트워크 감시
클라이언트와 서버가 주고 받는 데이터를 열람하고 분석하는 도구
구글 개발자 도구 (Network) 사용
네트워크 모니터링,
서버와 클라이언트간에 흐름
클라이언트는 웹브라우저라 함.
소스
소스코드가 문제가 있을때. 사용한다.
코드에 왼쪽 클릭을 하면은 브래킹포인터가 생성이 된다.
브라우저의 입력테크(마우스, 테스트)
메세지로 받아서 처리
디버깅 해야 하는 소스 코드로 이동후 왼쪽 마우스 클릭시 디버깅 포인터가 생김.
디버깅 오른쪽 창에 브레이크포인터 메뉴에 코드가 추가 되는걸 확인 할 수 있다.
선택한 소스를 다시 한번 선택을 하면 디버깅 해제가 된다.
디버깅 활성화 오른쪽 메뉴설명(흐름제어)
브레크포인터라는 말을 우리말로 표현하자면 멈춰진 것을 의미한다.
여기서 머춤다는 의미는 내가 구현한 함수의 위치가 거기서 멈추는 것이다.
프로그램이란건 무한 루프로 계속 진행을 하기 때문에 문제가 발생하는 부분이나, 코드를 더욱 간격하게 만들여고 하면,
소스코드의 흐름 제어를 해야한다. 그 흐름제어를 담당하는걸 디버깅 및 디버깅포인터라고한다.
F8키 함수 단위로 실행 한다.(실행한다, 즉, 다음 브레크포인터까지 실행한다)
F10키 함수가 한줄씩 움직이며, 그 내용을 확인 할 수 있다.
F11키 함수안으로 진입해 그 안쪽 함소의 로직을 실행한다.
Shift + F11 함수의 밖가쪽으로 나간다.
검사하고 싶은 변수 감시 방법
Watch Expressions 디버깅 창을 활용한다.
+아이콘을 클릭하고 변수명을 입력하면 그 변수명에 대입된 값을 감시한다.
전역변수만 감시가 가능한것 같다.
요소(Elements) 변수 감시
DOM Breackpointers 디버깅 창을 활요한다.
Elements 탭으로 이동 후 value값이 이는 소스 코드를 선택한 다음 오른쪽 마우스 클릭후 Break on attributes modifications 선택
한 다음, Break on node removal을 선택 하면은, 이 요소값이 삭제가 되었을 경우 디버깅을 하는 명령어이며,
Break on subtree modifications을 선택 하면은 하위 요소가 변경되면 디버깅을 한다.
즉, 동적이며, 사용자에 의해서 입력된 값들을 의미 한다.
정의된 값은 프로토콜이며, 정의되지 않는 값은 사용자에 의해서 입력을 받는다.
XHR Breakpoints
클라이언트와 서버가 에이젝스 통신을 하는경우
에이젝스 통신이란
실제로 페이지를 바꾸지 안으면소 내부적 통신을해 그 내용을 가지고 오는 통신 방식을 말한다.
디버깅창에 +를 누구고, URL을 추가 하는데 그 URL이 특성이 에이젝스 통신일 경우에 그 URL 주소를 써주면 된다.
Event Listener Breakpoints
이벤트가 걸여 있으며, 그 이벤트가 호출시 그 시점 부터 디버깅을 한다.
디버깅 창 하단 아랫 메뉴얼 정의
회색: 브레크 포인터 명식적으로(소스코드) 지정
파란색: 예외사항이 발생시 디버깅(브레이크 포인터 발생)
빨간색: 오류가 발생한 부분에 디버깅(브레이크 포인터 발생)
프로파일
프로그램 및 서비스를 측정 후 성능에 대한 결과 값을 확인후
더 낮은 성능을 만들기 위해 도우주는 도구를 프로파일이라고 한다.
이 코드를 이용해 로드를 많이 잡는 소스를 튜닝한다.
Audits(감사)
웹페이지의 병목형상 부분(레더링 체크후 완화 작업)
Console
쉘이라고 생각 하면된다.
즉, 양방향통신.
콘솔이란?
실시간으로 자바스크립트를 실행하고, 에러 메시지등을 출력해주는 기능이다.
크롬 개발자 도구 콘솔은 firefox의 플러그인인 firebug의 콘솔 API를 그대로 사용하고 있기 때문에 아래 파이어버그 문서를 통해서 API 목록을 열람 할 수 있다.
http://getfirebug.com/wiki/index.php/Command_Line_API
> 자바스크립트를 바로 입력 할 수 있다.
> arert('리하이테크');
즉 자바 스크립트를 이용해 명령을 입력하여 코딩하지 않고 바로 확인할 수 있다.
>$('root');
$는 환경변수를 가지고 온다.
$(의 으미는 요소를 가지고 온다.
$의 명령어 정리
https://getfirebug.com/wiki/index.php/Command_Line_API
$$('.course');
css문법때문에 점을 찍고 난 다음에 변수를 입력한다.
가장 만니 사용하는 디버깅
console.log(1);
console.log(win);
리모팅 디버깅
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
http://opentutorials.org/course/580/4152
에디터 (editor)
소스코드를 작성하는데 필요한 도구
Aptana 사용, 생활코딩 개발 도구 중 Aptana 편 참고
=======================
DTD(Doctype)
=======================
요약
Document Type Definition. 문서의 형식을 지정한다.
인터넷은 30년의 역사, 웹의 역사는 10년.
즉 시간이 흐르면서 웹프라우저 프로토콜의 변화 됨.
예전에 정의한 약속을 지키면서, 그 약속보다 더 낮은 방법을 정의하여 약속을 만드는 과정.
이 약속을 프토토콜이라하며, 웹에서는 이 약속에 이름을 HTML로 지정함.
www.w3.org 국제 규격.
인터넷은 서로 다른 위치에 있는 컴퓨터들이 데이터 통신을 하기 위한 통신 규약임.
웹통신은 HTML 통신을 사용하는 방법(웹페이지)
즉, HTML 프로토콜을 보고 웹브라우저 업체들은 자사에 맛는 브라우저를 만든다.
파이워폭스, 크롬(파이워폭스), 애플(사파리), 마이크로 소프트사(익스플로러)
HTML은 문서의 형식을 가지고 프로토콜을 적용하였으나, HTML5에서는 어플리케이션 프로그램으로 발전을 했다.
즉 문서의 웹 중심에서, 기능성 중심의 웹으로 발전했음.
웹 기술의 진보에 따라 HTML도 변화 되는데, 변화에 따라 브라우져가 HTML을 해석하는 방식도 변화가 생겼다.
이를 극복하기 위해서 브라우져에게 해당 HTML이 어떤 표준에 따른 것인지를 알려주는 것을 DTD(Document Type Definition)이라고 한다.
DTD는 문서의 제일 위에 위치한다.
HTML5의 doctype를 적용한 웹페이지.
<!DOCTYPE html>
<html>
<head>
<title>DTD</title>
</head>
<body>
Hello, HTML5!
</body>
</html>
HTML 3.2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML Basic 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
XHTML Basic 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">
HTML5
<!DOCTYPE html>
=======================
Body 태크란?
=======================
body 태그란 웹페이지의 내용들이 위치하는 태그다. 주로 브라우저의 분문에 표시되는 항목들이 나타난다.
<head> 태그가 문서의 내용이 아니라, 그 문서의 제목이나 키워드와 같은 요소들이 위치하는 것과 대비된다.
문서의 내용을 담는다.
=======================
링크
=======================
요약(Summary)
문서에서 다른 문서로 이동할 수 있는 수단을 의미한다.
문법(Syntax)
<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>
href : 링크이름과 연결되어 있는 리소스(resource)의 주소
title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.
target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.
_self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐
_blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드
_parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드
프래임의 이름
설명(Description)
하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.
문서에서 문서로 이동하는 수단
태그명 a(anchor)을 사용함
href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능
target을 지정해서 문서가 로드될 위치를 지정할 수 있다.
예제(Example)
example1. 아래 예제는 여러가지 형태의 링크를 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<p>
<a href="http://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다.
</p>
<p>
<a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a> : 새창에서 생활코딩 홈페이지를 연다.
</p>
<p>
<a href="http://opentutorials.org" target="_self">생활코딩</a> : 현재 프래임에서 생활코딩 홈페이지를 연다.
</p>
<p>
<a href="http://opentutorials.org" title="생활코딩 홈페이지">생활코딩</a> : 링크에 부가 설명을 추가한다. 링크에 툴팁을 표시한다.
</p>
<p>
<a href="http://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개 참조</a> : 생활코딩의 HTML소개 페이지 중 참조 부분으로 문서를 이동한다
</p>
</body>
</html>
example2. 아래 예제는 링크에 연결된 문서를 아이프래임으로 로드한다.
<!DOCTYPE html>
<html>
<body>
<iframe id="sample" src="http://w3c.org/" width="100%" height="300"></iframe>
<a href="http://opentutorials.org/" target="sample">아이프래임</a>
</body>
</html>
=======================
문단(paragraph), 줄바꾸기, 띄어스기
=======================
문단 (paragraph)
문단이란 글에서 하나로 묶을 수 있는 짧은 단위를 의미한다. HTML에서는 <p> 태그를 사용한다.
문법(Syntax)
<p>문단</p>
설명(Description)
P는 paragraph의 약자
문단을 구분할 때 사용함
문단과 문단 사이에 공백라인이 들어감
예제(Example)
example1.
<p>앞으로 제가 준비하는 생활코딩 강의를 몇번 더 할까합니다. 어제는 jQuery를 다루지 못해서 무척 아쉬웠었습니다. JQuery는 별도의 강의로 스핀오프하는게 좋겠다는 생각입니다.</p>
<p>다만 자바스크립트 자체의 강의는 하루동안 프로그래밍 전체에 대한 개념을 (학습이 아니라) 체험? 한다는 취지이기 때문에 분산하지는 않을 생각입니다. 대신 강의를 좀 더 간결하게 진행하고 수강생들이 익숙해져야 <p>하는 것들은 (개념에 대한 설명 없이 걍무조건) 빽빽이라도 요구할까 생각 중입니다. ㅋ 그래서 두시간안에 모두 끝내는 것를 목표로 생각하고 있습니다.</p>
아쉬운 것이 실전사례를 두가지밖에 발표하지 못했다는 점, 실습해 보지 못했다는 점입니다. 더 많은 케이스를 통해서 프로그래머들은 어떻게 문제를 해결하는가를 가감없이 전달해드리고 싶었는데 말이죠. 그런 점에서 저는 개발자로는 별로지만 강사로는 괜찮은 것 같습니다. 영어와 수학을 잘 못하거든요.</p>
<p>기회가 되면 브라우저 밖의 자바스크립트도 꼭 보여드리고 싶군요. 이를테면 HTML/CSS/자바스크립트만으로 이루어진 크롬익스텐션, 웹페이지를 사용자 마음대로 수정해주는 그리스몽키, (PHP, ASP, JSP 와 같은 언어처럼 서버쪽 언어지만 자바스크립트의 문법을 하고 있는) node.js 같은 것들 말입니다. 제가 수업내내 자바스크립트와 HTML은 완전히 다른 언어고 서로 독립되어 있다고 말씀 드렸죠? 자바스크립트로 할수 있는 것은 무궁무진 합니다. 자바스크립트는 자비스크립트입니다. ㅎㅎ</p>
<p>그리고 생활코딩은 '가난한 자들의 컨퍼런스를 지향합니다' 장소스폰이 가장 절실한데 참석자의 직장내 강의공간을 빌려주시는 것이 가장 굿케이스입니다. 강의에 필요한 A-Z를 강사와 학생들이 십시일반으로 조달하는 독립수업! 제가 꿈꾸는 모델입니다. 저는 아쉬운 소리 하는 걸 세상에서 두번째로 싫어하거든요;; 또 다른 스폰으로는 음식이 있을 것 같고, 나머지는 여러분이 창의력을 발휘해 보아요. :) </p>
요약(Summary)
엔터를 입력하면 줄바꿈이 된다.
이것은 줄바꿈에 해당되는 문자가 입력되기 때문인데, 이런 문자를 개행문자라고 한다.
개행문자는 줄바꿈을 의미하는 것이기 때문에 눈에는 보이지 않는다. (ascii 코드 중 10, 13번) 그런데 HTML에서는 개행문자를 무시한다.
대신 <br /> 태그를 사용해야 한다.
문법(Syntax)
문장<br />
예제(Example)
example2. 아래 예제는 개행문자의 사용법을 보여준다.
엔터를 쳐서 소스에서는 줄바꿈이 됐을지라도 실제로 브라우저에서는 줄바꿈이 되지 않는데 이런 때 <br /> 태그를 사용한다.
앞으로 제가 준비하는 생활코딩 강의를 몇번 더 할까합니다. <br />
어제는 jQuery를 다루지 못해서 무척 아쉬웠었습니다. JQuery는 별도의 강의로 스핀오프하는게 좋겠다는 생각입니다.<br />
다만 자바스크립트 자체의 강의는 하루동안 프로그래밍 전체에 대한 개념을 (학습이 아니라) 체험? 한다는 취지이기 때문에 분산하지는 않을 생각입니다.<br /><br /><br /><br />
대신 강의를 좀 더 간결하게 진행하고 수강생들이 익숙해져야 하는 것들은 (개념에 대한 설명 없이 걍무조건) 빽빽이라도 요구할까 생각 중입니다.<br />
띄어쓰기
스페이스 키를 누르면 눈에 보이지는 않지만 space 문자가 입력된다.
(ascii 코드 중 32번) HTML에서는 스페이스 문자는 한번만 인정된다. 그래서 한번 이상 스페이스를 입력해도 한 칸만 띄어쓰기가 된다. 이럴 때 기호를 사용한다.
문법(Syntax)
문장 문장
설명(Description)
HTML의 코드 상에서 스페이스로 공백을 주어도 공백이 하나 이상 만들어지지 않는다.
를 이용하면 여러개의 공백을 만들 수 있다.
예제(Example)
example3. 아래 예제는 기호를 사용했을 때와 스페이스를 사용했을 때의 차이점을 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<p>
test1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test1 의 결과 :
test1 test1
</p>
<p>
test1 test1의 결과 :
test1 test1
</p>
</body>
</html>
=======================
이미지
=======================
이미지의 표현
HTML에서 이미지를 표현하기 위해서는 <img> 태그를 사용한다.
문법(Syntax)
<img src="이미지가 위치하는 URL" alt="대체텍스트" width="폭" height="높이" longdesc="링크" />
src : source의 약자로 이미지가 위치하는 URL을 기술한다.
alt : alternative의 약자로 한국어로는 대체 텍스트라고 부른다.
이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시된다.
시각장애인을 위한 장치와 검색엔진에서도 사용된다.
width, height : 이미지의 크기
longdesc : 이미지와 관련된 링크
설명(Description)
이미지를 로드해서 화면에 표시함
alt는 대체 텍스트를 활용해서 시각장애인, 저사양,저속도 사용자, 이미지가 유실되는 상황에 대비해야 함.
example1. 이미지 태그를 사용하는 다양한 방법
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
이미지 로딩 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" /><br /><br /><br />
대체 텍스트 사용 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" alt="생활코딩 로고" /><br /><br /><br />
대체 텍스트 사용, 존재하지 않는 이미지 로딩 : <br /><img src="http://farm7.staticflickr.com/6234/empty.jpg" alt="생활코딩 로고" /><br /><br /><br />
이미지의 크기 지정 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" width="50" /><br /><br /><br />
</body>
</html>
=======================
목록
=======================
목록이란?
목록이란 연관된 항목들을 열거할 때 사용한다. 리스트 전체는 <ol>이나 <ul> 태그로 감싸고 각각의 항목들은 <li> 태그로 표현한다.
문법(Syntax)
순서가 없는 리스트 (Unordered List)
<ul>
<li>항목</li>
</ul>
순서가 있는 리스트 (Ordered List)
<ol>
<li>항목</li>
</ol>
설명(Description)
연관되어 있는 항목들을 나열할 때 사용
순서가 없는 항목은 ul(unordered list), 순서가 있는 항목은 ol(ordered list)를 사용한다.
CSS와 함께 사용해서 메뉴로도 사용된다.
예제(Example)
example1. 순서가 없는 리스트
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<ul>
<li>table</li>
<li>ol</li>
<li>body</li>
<li>img</li>
</ul>
</body>
</html>
example2. 순서가 있는 리스트
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>os</li>
<li>php</li>
<li>database</li>
</ol>
</body>
</html>
example3. 아래 예제는 리스트와 리스트를 중첩해서 사용한 예를 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<ol>
<li>html
<ol>
<li>수업</li>
<li>사전</li>
<li>쿡북</li>
</ol>
</li>
<li>css</li>
<li>javascript</li>
<li>os</li>
<li>php</li>
<li>database</li>
</ol>
</body>
</html>
=======================
아이프레임과 프레임
=======================
iframe이란?
페이지안에 페이지를 삽입하는 방법이다.
예를들어 생활코딩 홈페이지인 opentutorials.org에는 유튜브가 삽입되어 있는데, 유튜브를 삽입하는 방법이 바로 iframe을 이용한 것이다.
문법
<iframe src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes|no|auto)">
iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공
</iframe>
src : 불러올 페이지의 URL
scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정
auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)
yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출
no : 스크롤 하지 않음
참고. width, height, frameborder(프레임의 테두리 사용여부) 등의 속성이 더 있지만, 디자인에 대한 부분은 CSS를 통해서 제어하는 것이 권장된다.
예제
example1.html
<!DOCTYPE html>
<html>
<body>
<iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>
</body>
</html>
하나의 화면에서 여러개의 페이지를 분할해서 보여줌
문법
<frameset (cols | rows)="열 혹은 행의 크기(콤마로 구분)">
<frame src="frame_a.htm" name="프레임의 이름" />
</frameset>
예제
example2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<frameset cols="40%, 60%">
<frameset rows="25%, 75%">
<frame src="contents_of_frame1.html" />
<frame src="contents_of_frame2.html" />
</frameset>
<frame name="content" src="contents_of_frame3.html" />
<noframes>
<body>
<p>This frameset document contains:</p>
<ul>
<li><a href="contents_of_frame1.html">contents_of_frame1.html</a></li>
<li><a href="contents_of_frame2.html">contents_of_frame1.html</a></li>
<li><a href="contents_of_frame3.html">contents_of_frame1.html</a></li>
</ul>
</body>
</noframes>
</frameset>
</html>
contents_of_frame1.html
<html>
<head>
<style type="text/css">
body{
background-color: red;
}
</style>
</head>
<body>
contents_of_frame1.html<br />
<a href="http://opentutorials.org" target="content">http://opentutorials.org</a>
</body>
</html>
contents_of_frame2.html
<html>
<head>
<style type="text/css">
body{
background-color: green;
}
</style>
</head>
<body>
contents_of_frame2.html<br />
<a href="http://w3c.org" target="content">http://w3c.org</a>
</body>
</html>
contents_of_frame3.html
<html>
<head>
<style type="text/css">
body{
background-color: blue;
}
</style>
</head>
<body>
contents_of_frame3.html
</body>
</html>
=======================
이스 케이핑
=======================
이스케이핑이란?
HTML 코드는 브라우저에 의해서 해석되는 약속된 문자들이다.
예를들어 줄바꿈을 의미하는 <br /> 태그를 줄바꿈의 용도가 아니라 화면에 표시하려면 어떻게 해야 할까? 아래와 같이 하면 어떻게 될까?
<!DOCTYPE html>
<html>
<body>
<br />은 줄바꿈을 의미하는 태그입니다.
</body>
</html>
<br /> 태그는 줄바꿈으로 해석되기 때문에 화면에 표시되지 않을 것이다. 이럴 때 사용하는 방법이 이스케이핑(escaping)이다. 아래와 같이 하면 된다.
<!DOCTYPE html>
<html>
<body>
<br />은 줄바꿈을 의미하는 태그입니다.
</body>
</html>
'<'는 '<'를 의미하고, '>'는 '>'를 화면에 표시한다.
따라서 `<br />'는 화면에 <br />을 표시하면서 HTML 문법에 맞는 코드가 아니기 때문에 해석되지 않는 것이다.
코드 리스트
http://en.wikipedia.org/wiki/Character_encodings_in_HTML
이스케이핑 도구
아래는 온라인 이스케이핑 도구다. 이 도구를 이용해서 문자를 이스케이핑 할 수 있다. 사용법은 동영상을 참고하자.
http://www.htmlescape.net/htmlescape_tool.html
=======================
표
=======================
표란?
table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.
문법(Syntax)
<table>
<tr>
<th>제목</th>
</tr>
<tr>
<td>데이터</td>
</tr>
</table>
설명(Description)
데이터를 구조화할 때 사용됨
레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용
th는 데이터 그룹의 제목에 해당함 (header cells)
td는 th에 속하는 데이터 그룹 (standard cells)
예제(Example)
example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다.
아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<table border="1">
<tr>
<td>이름</td><td>성별</td><td>나이</td>
</tr>
<tr>
<td>최진혁</td><td>남</td><td>6</td>
</tr>
<tr>
<td>최유빈</td><td>여</td><td>2</td>
</tr>
</table>
</body>
</html>
example2.html - <th>는 제목을 의미한다. 아래 예제는 이름, 성별, 나이를 제목으로 표현하는 방법을 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<table border="1">
<tr>
<th>이름</th><th>성별</th><th>나이</th>
</tr>
<tr>
<td>최진혁</td><td>남</td><td>6</td>
</tr>
<tr>
<td>최유빈</td><td>여</td><td>2</td>
</tr>
</table>
</body>
</html>
example3.html - 행을 병합하고 싶다면 rowspan 속성을 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<table border="1">
<tr>
<th>이름</th><th>성별</th><th>나이</th>
</tr>
<tr>
<td>최진혁</td><td>남</td><td rowspan="2">비공개</td>
</tr>
<tr>
<td>최유빈</td><td>여</td>
</tr>
</table>
</body>
</html>
example4.html - 열을 병합하고 싶다면 colspan을 사용한다.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>이름</th><th>성별</th><th>나이</th>
</tr>
<tr>
<td>최진혁</td><td colspan="2">비공개</td>
</tr>
<tr>
<td>최유빈</td><td>여</td><td>2</td>
</tr>
</table>
</body>
</html>
=======================
HEAD
=======================
HEAD 태그란?
<head> 태그는 문서를 설명하는 태그들이 위치하는 태그다.
<body> 태그가 웹페이지가 담아내려는 정보 그 자체라면 head 태그는 body 태그의 정보를 설명하는 메타 정보라고 할 수 있다.
=======================
Meta
=======================
Meta란?
문서에 대한 정보를 기술하는 태그
문법(Syntax)
<meta name="" content="" />
<meta http-equiv="" content="" />
예제(Example)
example1.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="생활코딩은 일반인에게 프로그래밍을 알려주는 온라인 수업" />
<meta name="keywords" content="생활코딩, HTML, HEAD, META" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
</html>
example2.html - 2초 후에 opentutorials.org로 페이지를 이동함
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="2;url=http://opentutorials.org/">
</head>
</html>
=======================
Title
=======================
요약
문서의 제목을 정의하는 마크업. 제목을 제목 표시줄에 출력해서 문서를 찾는데 도움을 준다. 검색엔진에서 중요한 정보로 취급된다.
예제
example1.html
<!DOCTYPE html>
<html>
<head>
<title>생활코딩</title>
</head>
<body>
생활코딩은....
</body>
</html>
=======================
FORM
=======================
서버, 클라이언트
폼을 이해하기 위해서는 우선 서버와 클라이언트라는 개념을 이해해야 한다. 서버는 정보를 제공하는 쪽이고,
클라이언트는 정보를 제공 받는 쪽을 의미한다.
웹브라우저의 주소창에 생활코딩의 홈페이지인 http://opentutorials.org를 입력하면 웹브라우저는 opentutorials.org에 해당하는 컴퓨터에게
생활코딩 컨텐츠를 요청한다.
이 맥락에서 웹브라우저는 정보를 요청하는 쪽 다시 말해서 제공 받는 쪽이기 때문에 클라이언트가 되고,
opentutorials.org의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기 때문에 서버가 된다.
폼 (form)
폼이란 사용자의 데이터를 서버에 전송하는 방법이다. 일반적으로 아래와 같은 작업을 하기 위해서는 폼을 이용한다.
로그인을 위해서 아이디/비밀번호를 입력할 때
회원가입을 하기 위해서 개인정보를 입력할 때
블로그나 게시판에 글을 작성하거나, 파일을 전송할 때
문법
form의 문법은 아래와 같다. <form> 태그 안쪽에 텍스트를 입력 받는 텍스트 필드나,
원하는 항목을 선택 할 수 있는 라디오 버튼등이 위치한다.
이러한 요소들을 컨트롤 (control)이라고 부른다.
사용자가 컨트롤을 조작한 후에 전송 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송한다.
서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행하게 된다.
<form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">
텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그
</form>
action : 사용자가 입력한 데이터를 전송할 서버의 URL
method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다.
get : action에 입력한 URL에 파라미터의 형태로 전송
post : header의 body에 포함해서 전송
GET과 POST의 차이점
GET
URL에 정보가 담겨서 전송된다.
전송할 수 있는 정보의 길이가 제한되어 있다.
퍼머링크로 사용될 수 있다.
POST
header의 body에 담겨서 전송된다.
URL 상에 전달한 정보가 표시되지 않는다.
GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다)
전송할 수 있는 데이터의 길이 제한이 없다.
퍼머링크로 사용할 수 없다.
서버 쪽에 어떤 작업을 명령할 때 사용한다.
(데이터의 기록, 삭제, 수정 등)
예제
example1.html - 사용자가 입력한 정보를 서버로 전송하는 예제
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<fieldset>
<legend>
GET
</legend>
<form action="./example2.php" method="GET">
<p>
닉네임 :
<input type="text" name="nickname" />
<br />
</p>
<p>
직업 :
<select name="job">
<option value="designer">디자이너</option>
<option value="programmer">프로그래머</option>
<option value="planner">기획자</option>
</select>
</p>
<input type="submit" value="전송"/>
</form>
</fieldset>
<fieldset>
<legend>
POST
</legend>
<form action="./example2.php" method="POST">
<p>
닉네임 :
<input type="text" name="nickname" />
<br />
</p>
<p>
직업 :
<select name="job">
<option value="designer">디자이너</option>
<option value="programmer">프로그래머</option>
<option value="planner">기획자</option>
</select>
</p>
<input type="submit" value="전송"/>
</form>
</fieldset>
</body>
</html>
example2.php - 사용자가 전송한 데이터를 받아서 화면에 표시해주는 예제
html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<?php
echo $_REQUEST['nickname'].'님의 직업은 '.$_REQUEST['job'].'이군요!';
?>
</body>
</html>
다들 아시다시피 GET과 POST는 HTTP프로토콜을 이용해서 서버에 무언가를 전달할 때 사용하는 방식입니다.
웹개발자라면 당연히 알고 있어야 하는 사항이고 이걸 모르면 웹개발자체를 할 수가 없습니다.
상당히 기초적인 부분이긴 한데 잘 모르시는 분들도 있고 해서 미루고 미루던 포스팅을 이제야 합니다.
GET과 POST 얘기를 하니까 예전 생각이 납니다.
예전이라고 해봤자 불과 2년밖에 되지 않았군요.
졸업을 앞두고 어떤 회사에 면접을 봤었는데 거기 이사님이 저에게 GET과 POST의 차이점이 뭐냐고 물었었는데 전 그땐 그게 무슨말인지도 몰랐죠.
떨어진 이유가 아마 그거이지 싶네요.. ㅎㅎㅎ(지금 생각하면 창피하군요)
어쨌든 처음 웹개발을 하게 되면 한번쯤은 생각하게 되는 문제 입니다.
GET과 POST는 머가 다를까.... 하는.... 저도 처음엔 이게 상당히 궁금했습니다.
흔히 얘기하는 GET과 POST의 차이는 다음과 같습니다.(배울때 당시 이해하던 수준정도로만 적습니다.)
GET은 주소줄에 값이 ?뒤에 쌍으로 이어붙고 POST는 숨겨져서(body안에) 보내진다.
GET은 URL에 이어붙기 때문에 길이제한이 있어서 많은양의 데이터는 보내기 어렵고 POST는 많은 양의 보내기에도 적합하다.(역시 용량제한은 있지만)
즉 http://url/bbslist.html?id=5&pagenum=2 같이 하는 것이 GET방식이고 form을 이용해서 submit을 하는 형태가 POST입니다.
처음 배울때 배운건 이정도뿐이었던 것 같습니다.
위 내용은 맞는말이긴 하지만 이로썬 해결안되는 문제가 있습니다.
그건 언제 GET을 쓰고 언제 POST를 써야 하는가에 대한 문제였습니다.
이건 신입일때 꽤 오랫동안 생각하고 있었던 문제이기도 하는데 딱히 가르쳐 주는 곳은 없었습니다.
지금와서 보면 책에 이에 대해 나와있는 책들이 상당히 많이 있습니다만 웹표준에서도 그러하듯이 현업의 개발에서는 "원래의 목적에 맞게 기술을 사용하고 있는가?"에
대해서는 크게 관심이 없고 "어떤 기술이든 기능을 구현할 수 있는가?"에만 관심을 가지는 것이 전반적으로 깔려있기 때문에 이런 부분에 대해서 관심을 가지는
개발자는 빈도수로 봤을때 그리 많지 않은 듯 합니다.
어쨌든 쉽게 말하면 클라이언트에서 서버로 데이터를 전송하려면 GET 아니면 POST밖에 없습니다.
(사실 HTTP에는 PUT, DELETE등등 몇가지 더 있지만 그건 이글의 범주에서 벗어나서 언급하지 않습니다. 사실은 잘 몰라서 ㅡ..ㅡ HTTP 1.1 스펙 참조)
여기서 위의 언급한 차이점 외에 GET과 POST의 중요한 개념이 있습니다.
GET은 가져오는 것이고 POST는 수행하는 것입니다.
이 개념만 잘 생각하고 있으면 상황에 따라서 어느정도 선택을 할 수 있습니다.
(물론 그래도 좀 고민되는 예외상황들은 있게 마련이죠.) 좀 자세히 설명하면 GET은 Select적인 성향을 가지고 있습니다.
GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이지 서버의 값이나 상태등을 바꾸지 않습니다.
게시판의 리스트라던지 글보기 기능 같은 것이 이에 해당하죠.(방문자의 로그를 남긴다거나 글읽은 횟수를 올려준다거나 하는건 예외입니다.)
반면에 POST는 서버의 값이나 상태를 바꾸기 위해서 사용합니다.
글쓰기를 하면 글의 내용이 디비에 저장이 되고 수정을 하면 디비값이 수정이 되죠. 이럴 경우에 POST를 사용합니다.
이 얘기를 하면 어느곳에서곤 반드시 예시로 나오는 것이 Google의 Accelerator 사건입니다.(대표적으로 예를 들게 이거밖에 없나봅니다. 항상 거론되는걸 보면...)
Accelerator라는 것은 그이름대로 웹서핑의 속도를 향상시킬 목적으로 구글이 발표한 것이었습니다.
어떤 웹사이트에 갔을때 페이지에 있는 URL등을 Accelerator가 미리 모두 클릭해봐서 사용자가 해당 URL로 이동하기 전에 이미지등의 미리 받아놓을 수 있는
것들을 받아놓는 역할을 해서 웹서핑의 체감속도를 높여주는 것이 목적이었습니다. 캐시때문에 한번 방문한 사이트는 더 빨리 뜨는 것을 이용한 것이죠.
구글러들은 위에서 언급한 GET과 POST의 개념을 확실히 이해하고 이를 당연하다고 생각하는 사람들이었을 테니 이것이 문제가 될꺼라고는 전혀 생각지 못한듯 합니다.
하지만 현실은 그렇지 않죠. 실제 많은 개발자들은 GET과 POST를 용도구분없이 혼용해서 사용했고 Delete같은 곳에도 GET방식을 편의대로 이용한 것입니다.
Accelerator는 이것을 구분하지 못하니 URL만 보였다 싶으면 냅다 클릭을 해댄 것이고 사용자가 클립한 것이 아닌 Bot이 직접 URL로 접근해버리자
해당 데이터들은 Delete를 수행해버려서 메일이나 게시글이 마구 지워지는 사태가 발생하였습니다.
좋은 의도였는데 상당히 안좋은 결과가 되었죠. 우리가 모두 이걸 지켰다면 훨씬 좋은 웹 환경이 됐을 텐데요.
id를 넘겨서 게시판의 리스트를 가져온다고 하면 당연히 GET을 쓸 것이고 글을 작성한다고 하면 POST를 작성하는 것이 일반적입니다.
전달해야 될 양이 많을 경우에는 고민없이 POST를 쓰게 되지만 양이 많지 않은 경우에는 GET도 되고 POST도 되기 때문에 고민이 시작됩니다.
GET을 써야하나 POST를 써야하나. GET을 쓰면 URL이 깔끔해 지는 효과도 있기 때문에 작은 양을 여러개 전달해야 할 경우에는
POST를 써야하는가 하는 고민을 하게됩니다.(상당히 명백한 차이인듯 하면서 실제로 개발하다보면 고민하게 되는 경우가 좀 있더군요. 저만 그런지 모르겠지만...)
그리고 가져오는 곳에 GET을 사용해야 하는 이유가 하나 더 있습니다.
얼마전에도 관련해서 포스팅한 적이 있지만 웹의 핵심이라고 할 수 있는 Link문제입니다.
기본적으로 웹에서 모든 리소스는 Link할 수 있는 URL을 가지고 있어야 합니다.(퍼머링크(permalink)1퍼머링크라면 더 좋겠지만 꼭 퍼머링크가 아니라고 하더라도)
그래야 Link를 할 수 있으니까요.
쉽게 말하면 어떤 페이지를 보고 있을때 다른 사람한테 그 주소를 주기 위해서 주소창의 URL을 복사해서 줄 수 있어야 한다는 것입니다.
POST를 할 결우에는 값이 내부적으로 전달되기 때문에 URL만 전달할 수 없죠.
글을 저장하는 경우에는 URL을 제공할 필요가 없기 때문에 POST를 해도 상관이 없는 것이고요.
다른 것들에서도 그렇듯이 GET과 POST도 그냥 만들어진 것이 아니기 때문에 스펙에 정의된 용도대로 사용한다면 위에 언급한대로
부가적으로 얻을 수 있는 이익이 많이 있고 전체 웹을 생각해도 올바르다고 생각합니다.
permalink는 인터넷에서 특정 페이지의 고유한 URL 주소를 뜻한다.
이 주소는 어떤 상황에도 관계없이 항상 동일한 내용을 가지는 페이지로 링크된다는 의미에서,
고유(permanent)한 주소라는 뜻의 permanent link를 줄여 만든 말이다.
한국어로 고유링크, 고유주소 등으로 부르기도 한다. - Wikipedia 발췌
GET과 POST 차이점
GET은 주소줄에 값이 ?뒤에 쌍으로 이어붙고 POST 는 숨겨져서(BODY 안에) 보내진다.
GET은 URL에 이어붙기 때문에 길이 제한이 있어서 많은 양의 데이터는 보내기 어렵고 POST는 많은 양의 보내기에도 적합하다.
(용량제한은 여전함) 즉, http://url/bbslist.html?id=5&pagenum=2 같이 하는 것이 GET방식이고 form을 이용해서 submit을 하는 형태가 POST입니다.
1. 언제 GET을 쓰고 언제 POST를..
======================
파일 업로드
=======================
업로드할 파일을 선택할 수 있는 컨트롤을 생성
문법
<input type="file" name="서버쪽에서 파일을 식별하기 위한 이름" />
example1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="example_receive.php" method="POST" enctype="multipart/form-data">
<input type="file" name="image" />
<input type="submit" />
</form>
</body>
</html>
example_receive.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<?php
$uploaddir = '/var/www/codingeverybody_html_tutorial/upload_75/';
$uploadfile = $uploaddir . basename($_FILES['image']['name']);
move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile);
?>
<img src="<?=$_FILES['image']['name']?>" />
</body>
</html>
======================
URL
======================
URL(Uniform Resource Locator)이란 웹페이지, 이미지, 동영상과 같은 정보가 위치하는 유니크한 위치 정보
URL의 구성
http://codingeverybody.com/codingeverybody_html_tutorial/url_72/example2.html?mode=view#bookmark
http:// 통신에 사용되는 방식, 프로토콜
codingeverybody.com 호스트, 자원이 위치하고 있는 웹서버의 이름, 도메인이나 IP가 사용된다.
/url_72/example2.htm url-path, 루트 디렉토리부터 자원이 위치한 장소까지의 디렉토리와 파일명
?mode=view query, 웹서버에 넘기는 추가적인 질문
#bookmark bookmark, 하이퍼링크를 클릭했을 때 특정 위치로 이동하기 위해서 사용
======================
검색엔진 최적화(SEO)
======================
검색엔진 최적화란?
검색엔진에 잘 노출될수 있도록 하는 활동
HTML과 검색엔진 최적화의 관계
검색은 정보를 찾는 행위이고, 웹에서 정보를 표현하는 언어는 HTML이기 때문에 의미에 맞는 HTML 코딩은 자연스럽게 검색엔진 최적화에 기여한다.
https://support.google.com/webmasters/answer/35291?hl=ko
https://support.google.com/webmasters/answer/35769
http://www.slideshare.net/slideshow/embed_code/10463925
댓글 없음:
댓글 쓰기