HTML (Hyper Text markup lang)
-markup language: 태그를 쓰는 언어
-hyper text: 클릭으로 다른페이지가 열림 link
>web을 표현하기위해서 만든 언어
>왜:
CERN 연구소 - 논문(온라인 공유)
*형식을 표현 - html
>마크업 언어(형식을 표현하는 방법)
<a>표현할 내용</a>
<> : html tag
태그를 규정하는 곳: world wide web 컨소시엄(w3c)
www.w3c.org
HTML규격에 대한 권고안을 만듬 (강제가 아님-브라우저 업체별로 해석 달리함)
>해석해서 보여주는 프로그램 : 브라우저
파편화 문제
>크로스 브라우징 문제 (똑같은 사이트를 크롬 익스로 봤을때 다르게 보임)
>웹표준 문제(익스9 익스10 익스11로 봤을 때 다르게 보임)
>Doctype- Document type
HTML5
<!doctype html>
HTML4.01
<!doctype HTML PUBLIC ~~>
>HTML은 에러가 없음, 디자인이 안 나옴
>HTML4.01 -> (XHTML -> HTML5) 공존하고 있음, HTML5 권고안 브라우저 업체에서 적용안함
www.html5test.com (얼마나 적용했는지 알수 있는 사이트)
코딩툴
>기본툴
>notepad
>editplus
>ms code
>sublime Text
>IDE (integrated development environment)
-개발속도 향상
-너무 tool에만 의존하면 안됨
>Dreamweaver
MS code (visualstudio개발툴을 경량화 한것)
https://code.visualstudio.com
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<!--페이지 전체에 영향 미치는 요소-->
<meta charset="utf-8">
<!--
meta 전체 적용
charactor set 문자 규정
-->
</head>
<body>
<!--페이지의 내용-->
내용1 내용1 내용1<br/>
<!--띄어쓰기 적용하려면 <br/> -->
내용1 내용1 내용1<br/><br/>
<!--스페이스바는 두칸이상 적용 안됨-->
<!--스페이스바 적용시 -->
내용2<br/>
내용3<br/>
</body>
</html>
<!--
<html> -tag
<meta charset="utf-8">
charset - attribute(속성)
* tag/ attribute 대소문자 구분 하지 않음
* attribute 값을 가짐 (="utf-8") 단/쌍(디폴트) 따옴표 닫거나 말거나
* 주석(comment) -설명글을 쓰기 위함
-->
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!-- heading: 제목글 <h1> ~<h6> <h7> 은 없기 때문에 일반 글자가 출력됨 오류가 발생하지 않음 제목글에는 엔터키가 자동으로 들어감 <hr />: horizontal 수평선 paragraph: 영역 나눔 - 나중에 효과를 줄때 영역별로 줄 수 있음 <p> : 엔터키 2번 <div>: 엔터키 1번 <span>: 엔터키 없는 단위만 표시 --> <h1>제목글</h1> <h2>제목글</h2> <h3>제목글</h3> <h4>제목글</h4> <h5>제목글</h5> <h6>제목글</h6> <h7>제목글</h7> <hr /> <p>중앙일보조사연구팀이 27~28일 양일간 설문해 중앙일보가 30일 보도한 차기 대권 주자 지지율 긴급 여론조사에 따르면, 반기문 유엔사무총장은 28.4%의 지지를 얻어 여타 경쟁 후보들을 오차범위 밖으로 따돌렸다.</p> <p>더민주 문재인 전 대표(16.2%)와 국민의당 안철수 대표(11.9%)는 오차범위 내에서 혼전 양상을 보이며 2위 그룹을 형성했다. 박원순 서울특별시장(7.2%)과 새누리당 김무성 전 대표최고위원(4.2%)이 그 뒤를 따랐다.</p> <p>친노·친문패권 이미지가 강한 문재인 전 대표가 지속적으로 차기 대권 주자 지지율에서 선두를 달림에 따라 동요하던 민심이, 대항마로 반기문 총장이 부상하자 급격히 귀부하는 모양새로 해석할 수 있다는 지적이다.</p> <div>중앙일보조사연구팀이 27~28일 양일간 설문해 중앙일보가 30일 보도한 차기 대권 주자 지지율 긴급 여론조사에 따르면, 반기문 유엔사무총장은 28.4%의 지지를 얻어 여타 경쟁 후보들을 오차범위 밖으로 따돌렸다.</div> <div>더민주 문재인 전 대표(16.2%)와 국민의당 안철수 대표(11.9%)는 오차범위 내에서 혼전 양상을 보이며 2위 그룹을 형성했다. 박원순 서울특별시장(7.2%)과 새누리당 김무성 전 대표최고위원(4.2%)이 그 뒤를 따랐다.</div> <div>친노·친문패권 이미지가 강한 문재인 전 대표가 지속적으로 차기 대권 주자 지지율에서 선두를 달림에 따라 동요하던 민심이, 대항마로 반기문 총장이 부상하자 급격히 귀부하는 모양새로 해석할 수 있다는 지적이다.</div> <span>중앙일보조사연구팀이 27~28일 양일간 설문해 중앙일보가 30일 보도한 차기 대권 주자 지지율 긴급 여론조사에 따르면, 반기문 유엔사무총장은 28.4%의 지지를 얻어 여타 경쟁 후보들을 오차범위 밖으로 따돌렸다.</span> <span>더민주 문재인 전 대표(16.2%)와 국민의당 안철수 대표(11.9%)는 오차범위 내에서 혼전 양상을 보이며 2위 그룹을 형성했다. 박원순 서울특별시장(7.2%)과 새누리당 김무성 전 대표최고위원(4.2%)이 그 뒤를 따랐다.</span> <span>친노·친문패권 이미지가 강한 문재인 전 대표가 지속적으로 차기 대권 주자 지지율에서 선두를 달림에 따라 동요하던 민심이, 대항마로 반기문 총장이 부상하자 급격히 귀부하는 모양새로 해석할 수 있다는 지적이다.</span> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <p> test1 test2 test3 </p> <!--pre 는 서식이 지정되어있어서 띄어쓰기 읽음--> <pre> test1 test2 test3 </pre> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!-- 글꼴 --> <p>Ths text is normal.</p> <p><b>Ths text is normal.</b></p> <p><strong>Ths text is normal.</strong></p> <p><i>Ths text is normal.</i></p> <p><em>Ths text is normal.</em></p> <p>Ths text is <small>normal.</small></p> <p>Ths text is <mark>normal.</mark></p> <p>Ths text is <del>normal.</del></p> <p>Ths text is <ins>normal</ins></p> <p>This text is <sub>normal.</sub></p> <p>This text is <sup>normal.</sup></p> </body> </html><!-- image jpg- 사진 gif- 일러스트레이터(그림) png- 중간(*) 경로: 이미지의 위치 절대경로- 드라이브명 부터 이미지의 위치 상대경로- html 파일로 부터 이미지의 위치 웹경로- 도메인으로 부터의 이미지의 위치 --> <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!--절대경로--> <img src="C:\html\images\image.gif" > <br/> <!--상대경로 . : 현재 위치 ..: 상위 위치 --> <img src="./images/image.gif"><br/> <!--웹경로--> <img src="http://special.dn.naver.net/www/u/2016/0531/nmms_125841439.gif"><br/> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <img src="./images/image.gif"><br/> <img src="./images/image.gif" width="327" height="125"><br/> <!--이미지 사이즈를 정함, 화면의 크기가 변해도 이미지크기를 보존--> <img src="./images/image.gif" width="327"><br/> <!--높이와 넓이중 하나를 생략하면 다른 것은 예측값을 반영--> <img src="./images/image.gif" width="654"><br/> <img src="./images/image.gif" width="654" height="125"><br/> <!--높이와 넓이를 둘다 잘못쓰면 이미지가 찌그러짐--> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <img src="./images/image1.gif" alt="새로운 이미지"><br/> <!--alt 이미지가 다운로드 되지 않을 상황에서 이미지 대신 말을 표현 함--> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <a href="./test.6.html">test6.html</a><br/> <!--링크를 통해서 다른 파일로 들어감--> <a href="./test.6.html" target="_blank">test6.html</a><br/> <!-- _blank, _top 새창을 열면서 링크를 엶--> <a href="./test.6.html"><img src="./images/image.gif"></a><br/> <!--이미지를 클릭해서 이동 가능--> <a href="http://www.naver.com"><img src="./images/image.gif"></a> <!--도메인주소로 링크 가능함--> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!--본문내에서 링크로 바로가기--> <a href="#t1">바로가기1</a><br/> <a href="#t2">바로가기2</a><br/> <a href="#t3">바로가기3</a><br/> <a href="#t4">바로가기4</a><br/> <p id="t1">국내 카드업계가 모바일 지불결제 근거리무선통신(NFC) 규격 제정에 착수한다. 이르면 하반기에 카드사 공통 NFC결제 인프라가 깔릴 전망이다. 카드사 공통 NFC 규격이 제정되면 비자·인롄 등 해외카드사의 기술 종속을 막을 수 있고, 저가형 NFC 결제 단말기를 전국에 보급할 수 있다.</p> <p id="t2">30일 금융권 및 정보기술(IT) 업계에 따르면 신한·삼성·KB국민·롯데·현대·NH농협카드 등 애플리케이션(앱)카드 진영과 하나카드, 비씨카드 등 유심 기반의 모바일카드 진영이 한국 독자 NFC 결제 규격 제정에 합의했다.</p> <p id="t3">조만간 모바일 협의체를 구성하고 한국결제 스펙을 탑재한 범용 NFC 결제 단말기 개발과 패드 보급에 나선다. 협의체 의장사는 KB국민카드가 맡았으며, NFC 규격 제정을 위한 협의는 빠른 시일 내에 시작된다.</p> <p id="t4">카드업계의 독자 NFC 결제 규격 제정은 각종 플랫폼사와 제조사, 외국 글로벌 기업이 NFC 제 인프라 확산에 빠르게 침투하고 있기 때문이다. 애플은 물론 중국 인롄 등이 NFC 인프라 보급에 막대한 자금을 쏟아붓고 있다. 반면에 한국은 인프라 보급 주체 문제로 NFC 결제 확산에는 몇 번의 시도가 있었지만 실패했다. 그럼에도 카드사가 NFC 기반 인프라 확장에 나선 데에는 조만간 모바일결제 생태계가 NFC 기반으로 급격히 확산될 가능성이 높기 때문이다. 앱카드 진영과 유심 진영 카드사는 기술상 우위 경쟁을 벌이면서 모바일카드 보급을 산발 추진해 왔다. 그러다 보니 NFC 결제 인프라는 공통 표준화를 이루지 못한 채 각자 보급에만 머무르며 시장 확산에 실패했다.</p> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!--다른페이지의 특정 위치로 바로가기: 단어사전 등의 웹에 쓰임--> <a href="./test.9.html#t1">바로가기1</a><br/> <a href="./test.9.html#t2">바로가기2</a><br/> <a href="./test.9.html#t3">바로가기3</a><br/> <a href="./test.9.html#t4">바로가기4</a><br/> <!--image map 이미지 위에다가 좌표를 걸어줌 어느 죄표를 클릭하면 링크페이지 이동--> <img src="./images/image.gif" usemap="#img"/> <map name="img"> <area shape="rect" coords="0,0,82,126" href="http://www.naver.com"> </map> </body> </html><!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <table border="1" width="400" height="300"> <tr> <th>1열</th> <th>2열</th> <th>3열</th> </tr> <tr> <td align="center">1열</td> <td align="left">2열</td> <td align="right">3열</td> <!--좌우 정렬--> </tr> <tr> <td valign="top">1열</td> <td valign="middle">2열</td> <td valign="bottom">3열</td> <!--상하 정렬--> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> </table> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <table border="1" cellpadding="50" cellspacing="0"> <!-- cellpadding 테이블의 여백 설정 cellspacing 테이블 테두리 여백 설정 --> <tr> <th>1열</th> <th>2열</th> <th>3열</th> </tr> <tr> <!--열 합치기--> <td colspan="2">1열</td> <td>3열</td> </tr> <tr> <td colspan="3">1열</td> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> </table> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <table border="1" cellpadding="50" cellspacing="0"> <tr> <th>1열</th> <th>2열</th> <th>3열</th> </tr> <tr> <!--행 합치기--> <td rowspan="2">1열</td> <td rowspan="3">2열</td> <td>3열</td> </tr> <tr> <td>3열</td> </tr> <tr> <td>1열</td> <td>3열</td> </tr> </table> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!-- 색상 1. 알려진 이름 2. 16진수(RGB -#ff00ff) --> <table border="1" cellpadding="50" cellspacing="0" bgcolor="red"> <tr bgcolor="green"> <th bgcolor="blue">1열</th> <th bgcolor="#ff00ff">2열</th> <th>3열</th> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> </table> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <table border="1" cellpadding="50" cellspacing="0" background="./images/image.gif"> <!--테이블 배경에 이미지 넣을 수 있음--> <tr> <th>1열</th> <th background="./images/image.gif">2열</th> <!--열에 이미지 넣을 수 있음--> <th>3열</th> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> <tr> <td>1열</td> <td>2열</td> <td>3열</td> </tr> </table> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <table width="400" height="300" border="1" cellspacing="0"> <tr align="center"> <td colspan="2">1</td> <td rowspan="2">2</td> </tr> <tr align="center"> <td rowspan="2">4</td> <td>5</td> </tr> <tr align="center"> <td colspan="2">3</td> </tr> </table> </body> </html>
