Web이란?
일반어플리케이션은 한개의 컴퓨터로 한개의 언어로만 만들 수 있다.
하지만 웹어플리케이션은 2대 이상의 컴퓨터가 서로 상호작용하는 것이다.
그래서 여러개의 언어로 섞어서 만든다.
Publisher는 디자이너가 주는 웹디자인을 코드로 꾸며준다.
보통 프론트엔드를 담당한다.
Full-Stack 개발자는 프론트엔드와 백엔드
둘 다 하는 개발자이다.
HTML (Hyper Text Markup Language)
html은 수 많은 Markup Language 중에 하나이다.
Markup Language의 특징은 데이터를 양쪽에서 둘러싼(마크한) 언어이다.
XML은 Markup Language에서 가장 먼저 만들어진 메타언어(언어를 만드는 언어)이다.
HTML은 XML에서 파생되었다.
1. 용도 : 디자인
2. history
HTML을 자세히 배우고 싶다면 아래 홈페이지를 참고하라
Cross Browsing은 다양한 웹 브라우저에서 웹페이지여는 것을 말한다.
웹 브라우저 마다 HTML을 이용하는 형식이 달라서 좋지 않았다.
XHTML은 Cross Browsing을 위해서 나왔다.
HTML의 형식을 어도비 플래시는 멀티미디어 및 다양한 기술을
웹에서 구현할 수 있도록 만들었다.
그러나 어도비에서 플래시 가격을 올리면 같이 올려져야만 했다.
이후 마이크로 소프트사는 Silverlight를 만들어 플래시의 독점에 대항하기도 했다.
W3C 특정기술이 특정회사에 종속되지 않도록 하기 위해 HTML5를 내놓았다.
HTML5는 특정기술 없이 멀티미디어, 위치기반을 비롯한
다양한 기술을 웹에서 특정회사 프로그램의 도움 없이 쓸 수 있도록 만들었다.
HTML5는 자바스크립트와 같이 쓸 때 효과를 낼 수 있다.
3. 문법
(1) 기본구조
1 2 3 4 5 6 7 8 9 | <html> <head> 선언과 관련된 내용 </head> <body> 보여질 내용 </body> </html> | cs |
<HTML의 버전>
HTML 4버전을 보자.
똑같은 4.01 버전이라도 3개가 있다.
Strict은 문법을 빡빡하게
Transitional은 문법을 루즈하게 지킨다.
Frameset은 javadoc 같이 페이지에 프레임을 쉽게 넣을 수 있다.
복잡한 버전명시가
html5에서는 간단하게 되어있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <!-- HTML 4.01 을 쓸 때 사용한다. https://www.w3schools.com/tags/tag_doctype.asp 참고--> <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">; --> <!-- 주석 --> <!--HTML 문법을 써보자 --> <!DOCTYPE html> <html> <head> </head> <body> </body> </html> | cs |
시작태그와 끝 태그를 묶어서 Element 엘리먼트 라고 말한다.
(2) head 태그(01_head.html)
<방법>
1) <title></title>
2) <meta></meta>
...
<예제>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <!--타이틀은 1개만 지정가능--> <title>여기는 제목입니다.</title> <!--메타태그는 프로그램에 의해서 자연스럽게 만들어진다.--> <!--메타태그는 언어형식 등 다양한 메타정보 지정가능--> <meta http-eqiv="Content-type" content = "text/html; charset=euc-kr"></meta> <!--메타태그에서 현재정보를 새로고침하고 네이버로 넘어가도록 한다.--> <meta http-equiv="refresh" content="3 ; url="http://www.naver.com"></meta> </head> <body> 안녕하세요. </body> </html> |
(3) body 태그 (02_body.html)
값을 지정하는 방법은 태그와 태그사이에 넣는 방법과 속성에 넣는 방법이 있다.
속성에 값을 넣는 방법을 알아보자.
bgcolor, text, background...
<예제>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> </head> <body bgcolor="#ccccff" text="red" background="../images/dora (1).jpg"> 안녕하세요. 여기에 무엇이 보입니까? </body> </html> <!--#16진수 #ccccff를 살펴보자 처음 cc에는 빨간색(R)만 2의 8승인 256가지를 나타낼 수 있다. 중간에 cc는 초록색만(Green)만 2의 8승인 256가지를 나타낼 수 있고, 마지막에 ff는 파란색(Blue)만 2의 8승인 256가지를 나타낼 수 있다. 총 2의 24승인 1600만 가지의 색을 표현할 수 있다. ffffff 빛을 다 통과하면 하얀색이다. 000000 빛을 다 막아서 검은색이다. --> <!-- text="red" 글자를 색깔을 표현 할 수 있다.--> <!--background="../images/dora (1).jpg"는 배경 이미지를 넣는 방법이다.--> | cs |
<HTML의 색깔표현>
#16진수 #ccccff를 살펴보자
처음 cc에는 빨간색(R)만 2의 8승인 256가지를 나타낼 수 있다.
중간에 cc는 초록색만(Green)만 2의 8승인 256가지를 나타낼 수 있고,
마지막에 ff는 파란색(Blue)만 2의 8승인 256가지를 나타낼 수 있다.
총 2의 24승인 1600만 가지의 색을 표현할 수 있다.
ffffff 빛을 다 통과하면 하얀색이다.
000000 빛을 다 막아서 검은색이다.
(4) 글자꾸미기 (03_글자꾸미기.html)
태그와 태그사이에 값을 넣어보자 (03_글자꾸미기.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!-- 주석 --> <!DOCTYPE html> <html> <head> </head> <body> <!-- 글자의 크기 : <h숫자> --> <!-- 여기서 h는 header를 의미한다. 내용의 제목을 달아줄 때 사용한다.--> <!-- h태그는 기본적으로 줄 바꿈과 align 속성을 활용한 정렬기능이 된다. 이는 일반 태그에는 없는 기능이다.--> 일반글자 일반글자 <h6 align="left">글자크기</h6> <h5 align="right">글자크기</h5> <h4 align="center">글자크기</h4> <h3>글자크기</h3> <h2>글자크기</h2> <h1>글자크기</h1> <!--hr태그는 줄을 만들어준다. hr은 horizontal ruler 이다.--> <!--태그를 혼자 쓸 때에는 슬러쉬를 뒤에 쓴다.--> <hr/> <!--줄바꿈 : <br/>--> 안녕<br/><br/><br/> 하세요. <hr/> <!-- 문단 (문장의 단락을 구분 할 때 쓰는 태그) : <p/> --> 여기는 한문단 입니다.<p/> <p align="center">여기는 두번째 문단입니다.</p> <hr/> <!--수평선 : <hr/> size는 넓이 width는 두께 align는 정렬--> <hr size="100"/> <hr size="10" width="300"/> <hr size="10" width="300" color="red"/> <hr size="10" width="300" color="red" align="left"/> <hr/> <!--다양한 글자속성--> <!--글자를 두껍게 b는 bold의 약자이다.--> <b>글자를 두껍게</b><br/> <strong>글자를 두껍게</strong><br/> <u>글자에 밑줄</u><br/> <strike>글자 가운데 선</strike><br/> <i>이탤릭체</i> <hr/> <!-- 리스트 출력 : <ol> odered list, <ul>--> <ol> <li>사과</li> <li>배</li> <li>귤</li> </ol> <ol type='i'> <li>사과</li> <li>배</li> <li>귤</li> </ol> 중간에 다른 내용... <ol type='i' start="4"> <li>사과</li> <li>배</li> <li>귤</li> </ol> <!--순서가 필요할때는 <ol> 순서가 필요없을 때는 <ul>--> <ul type="square"> <li>사과</li> <li>배</li> <li>귤</li> </ul> <hr/> <!--글자 모양 : <font> 폰트 최대크기는 7까지--> <font size="7" color="green" face="궁서"> 글자 모양입니다.</font> <hr/> <!-- ****몇가지 Entity 소개 : &엔티티명;**** --> <!-- 엔티티는 표현하기 어려운 개체들을 따로 만들어 가져오는 것이다.--> <!-- 는 스페이스바를 한 칸 띄운 엔티티이다. sp는 space--> 안녕 하세요.<br> 안녕 하세요.<br> <!-- < > 는 꺽쇠를 문자로 보여주기 위한 엔티티 --> <!-- < > 는 less than greater then의 의미이다.--> <!-- html에서 <>는 문법의 일부이기 때문에 따로 엔티티로 표시해야한다.--> <abc> <def> <br> <!--쌍따온표--> "이건 뭘까? "<br> <!-- 사이트 내의 저작권을 명시하는 마크 --> ©copyright 2017 <hr/> <!--****데이터 고정 태그 : <pre>, <xmp>****--> <!--<pre>는 글자의 띄어쓰기나 줄바꿈 그대로 나오게 한다.--> <!--<pre>는 <pre>내의 html문법을 인식한다.--> <pre> 눈감고 가라 윤 동주 태양을 사모하는 아이들아 별을 사랑하는 아이들아 밤이 어두웠는데 <b><i>눈감고 가라</i></b> 별부리에 돌이 채이거든 감았던 눈을 와짝 떠라 </pre> <br><br> <!--<xml>은 <xml>내의 html문법도 글자로 처리한다.--> <xmp> 눈감고 가라 윤 동주 태양을 사모하는 아이들아 별을 사랑하는 아이들아 밤이 어두웠는데 <b><i>눈감고 가라</i></b> 별부리에 돌이 채이거든 감았던 눈을 와짝 떠라 </xmp> </body> </html> | cs |
(5) 이미지(04_image.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- 주석 --> <!DOCTYPE html> <html> <head> </head> <!--<body background="../images/Tiger.jpg">--> <body> <!--원하는 위치에서 이미지를 넣을 수 있는 이미지 태그를 넣어보자--> <!--alt속성은 이미지에 마우스를 대면 글자가 나온다. 브라우저에 따라 다르다.--> <!--border는 테두리이다. --> <img src="../images/yong (1).jpg" width="400" height="400" alt="해파리" border="10"/> <br><br><br> <!--vspace : 수직간격조정, hspace : 수평간격조정--> <img src="../images/yong (2).jpg" border="1" vspace="20"/> <img src="../images/yong (2).jpg" border="1" hspace="20"/> <img src="../images/yong (2).jpg" border="1"/><br> <img src="../images/yong (2).jpg" border="1"/> <img src="../images/yong (2).jpg" border="1"/> <img src="../images/yong (2).jpg" border="1"/> </body> </html> | cs |
(6) 하이퍼링크 (05_hiperlink.html)
<a>
앵커(Anchor)
- 사전적 의미로는, 배의 닻을 의미
- 인터넷 웹 상의 HTML 페이지에서는, 어떤 정보(대상)의 시작 지점을 알림
1) 문서의 연결(이동)
2) 멀티미디어(응용프로그램 기능 실행)
- 멀티미디어 기능을 plug in을 통해서 실행
<예제>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <!-- URL : 프로토콜명 ://도메인주소:포트번호/파일명#세부위치 http://www.naver.com --> <html> <head> </head> <body> <!--이동이 가능--> <a href="https://www.w3schools.com/">w3schools.com</a><br>; <!--꼭 절대경로가 아닌 상대경로를 사용해서 지정한다.--> <a href="sub/sub1.html">sub1.html</a><br> <!--같은 창에서 창을 띄울 때는 _self, 다른 창에 창을 띄울 때는 _blank--> <!--기본값은 _self이며 이는 생략이 가능하다.--> <a href="sub/sub1.html" target="_self">sub1.html</a><br> <a href="sub/sub2.html" target="_blank">sub2.html</a><br> <ul> <!--원하는 내용의 이름을 #으로 붙혀준다.--> <li><a href="sub/sub2.html#first">첫번째 주제</a></li> <li><a href="sub/sub2.html#second">두번째 주제</a></li> <li><a href="sub/sub2.html#third">세번째 주제</a></li> </ul> <hr/> <!--프로그램 실행--> <a href="res/OutofSight.mp4">단편 애니메이션</a><br> <!--서버에서만 실행 됨--> <video src="res/OutofSight.mp4" controls autocomplete>애니</video><br> <a href="res/zoomit.zip">압축파일</a><br> <!--pseudo protocol 보여지지 않는 가상의 프로토콜(약속)이다.--> <a href="mailto:goodeducoop@gmail.com">이메일 보내기</a> <hr/> <!-- 이미지 맵 : 이미지 내 범위를 설정하여 설정한 범위를 클릭하면 이동--> <img src="../images/nada1.png"/ usemap="#nada1"/> <!--사진과 좌표를 연결해준다.--> <map name="nada1"> <!--선택할 위치의 범위를 사각형으로 지정한다.--> <!--범위가 사각형일 경우 이미지 내의 좌표를 대각선으로 두 곳을 잡는다. --> <area shape="rect" coords="455, 85, 663, 257" href="http://www.daum.net"/>; <!--선택할 위치의 범위를 원으로 지정한다.--> <!--범위가 원일경우 중점의 좌표 하나와 반지름의 길이를 넣어준다. --> <area shape="circle" coords="913, 177, 100" href="http://www.naver.net"/>; <!--범위가 다각형일경우 각 꼭지점마다 좌표를 하나씩 모두 지정해준다.--> </map> <img> </body> </html> | cs |
(7) 테이블 (06_table.html)
행(column)은 좌우, 열(row)은 상하
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> <html> <head> </head> <body> <!--<center>가계부</center><br> 화면의 가운데로 글씨를 쓴다. html5에서는 쓰지 않는다.--> <!--border로 행과 열을 구분--> <!--align으로 가운데 정렬--> <table border="1" width="300" height="200" align="center" bgcolor="pink" background="../images/yong (2).jpg"> <!--<caption>은 테이블의 제목을 달기위해 쓴다.--> <caption>가계부</caption> <!--행은 tr 열은 td--> <tr> <!--특정행의 제목행은 <th>--> <th>1열</th><th>2열</th> <th>3열</th> </tr> <tr> <!--특정열에 색깔을 넣어보자.--> <td>1열</td><td bgcolor="yellow">2열</td> <td>3열</td> </tr> </table> <!--2번째 테이블--> <table border="1" width="200" height="100"> <!--행은 tr 열은 td--> <tr> <!--특정행의 제목행은 <th>--> <th>1열</th><th>2열</th> <th>3열</th> </tr> <tr> <!--colspan으로 열을 합친다.--> <td colspan="2">1열</td> <!--rowspan으로 행을 합친다.--> <td rowspan="2">3열</td> </tr> <tr> <td>1열</td><td>2열</td> </tr> </table> <!--3번째 테이블--> <table border="1" width="200" height="100"> <!--행은 tr 열은 td--> <tr> <!--특정행의 제목행은 <th>--> <th>1열</th><th>2열</th> <th>3열</th><th>4열</th> </tr> <tr> <td rowspan="3">가</td><td colspan="3">나</td> </tr> <tr> <td colspan="2">바</td><td rowspan="3">아</td> </tr> <tr> <td>차</td><td>카</td> </tr> <tr> <td colspan="3">파</td> </tr> </table> <body> </body> </html> | cs |
(8) DIV
특정 블럭(구역) 설정
전체적인 디자인 윤곽을 잡을 때 많이 쓴다.
<디자인 변천사>
a. 초창기 때는 프레임으로 틀을 짰다.
하지만 프레임은 링크를 연결하기 힘들었다.
b. 이후 테이블로 틀을 짜기 시작했다.
브라우저마다 테이블이 다르게 보이는 문제가 생겼다.
c. 최근에는 div로 틀을 짠다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html> <head> </head> <body> <!--div는 개별적인 속성을 줄 수 없다. style을 통해 줄 수 있다. --> <!--div는 블럭처럼 한 칸씩 영향을 주며 쌓아나간다.--> <!--테이블을 대체해 틀을 잡는다.--> <div style="background-color:red">내용</div> <span style="background-color:red">내용</span><br> <!--div는 테이블보다 문법이 간단하면서 똑같은 효과를 줄 수 있다.--> <table width="100%"> <tr> <td bgcolor="red">내용</td> <tr> </table> <hr/> <!--div는 블럭처럼 쌓을 수 있다.--> <div style="background-color:yellow;width:300px;height:100px">내용</div> <div style="background-color:cyan;width:300px;height:100px">내용</div> <br><br> <!--여러개의 div를 하나로 묶을 수 있다.--> <!--margin-top으로 여백을 줄 수 있다.--> <div style="margin-top:20px"> <div style="background-color:yellow;width:300px;height:100px">내용</div> <div style="background-color:cyan;width:300px;height:100px">내용</div> </div> <hr/> <!--div는 여백이 있어도 기본적으로 한 줄 전체에 영향을 준다.--> <!--float 떠다니다, 둥둥띄워서 움직일 수 있도록 만들어준다. div를 좀 더 자유롭게 사용할 수 있도록 한다.--> <div style="background-color:yellow;width:300px;height:100px;float:left">내용</div> <div style="background-color:cyan;width:300px;height:100px;float:left">내용</div> <!--clear로 float의 속성을 지운다.--> <div style="clear:both"></div> <div style="margin-top:20px"> <div style="background-color:yellow;width:300px;height:100px">내용</div> <div style="background-color:cyan;width:300px;height:100px">내용</div> </div> <hr/> <!--div로 4단 구성을 해보자--> <div style="width:600px;"> <div style="height:50px;background-color:yellow">상단 메뉴</div> <div style="margin-top:10px"> <div style="width:100px;height:300px;background-color:pink;float:left;margin-right:10px">왼쪽 사이드메뉴</div> <div style="width:490px;height:300px;background-color:lightgreen;float:left">컨텐츠 영역</div> </div> <div style="clear:both"></div> <div style="height:50px;background-color:lightblue;margin-top:10px">하단 메뉴</div> </div> </body> </html> | cs |
(9) Input type(08_inputtype.html) : 폼 태그
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html> <html> <head> </head> <body> <!--submit, reset를 쓰려면 반드시 form 안에 있어야한다.--> <form> <!--문자열 입력--> <input type="text"/><br><br> <!--maxlength=""는 글자의 최대크기를 정할 수 있다. 글자수를 입력한다.--> <input type="text" size="30" maxlength="15"/><br><br> <!--disabled는 입력을 못하게 한다.--> <!--disabled는 값(홍길동)이 서버에 전송이 되지 않는다.--> <input type="text" value="홍길동" disabled="disabled"/><br><br> <!--readonly도 마찬가지로 입력을 못하게 한다.--> <!--readonly는 값(홍길동)이 서버로 전송이 된다.--> <input type="text" value="홍길동" readonly="readonly"/><br><br> <!--password 패스워드 입력을 할 때에만 쓴다.--> <input type="password" /><br><br> <!--많은 문자열을 입력할 수 있는 영역지정--> <textarea rows="5" cols="30"></textarea> <hr> <!-- 여러줄을 쓸 때 : <시작태그></끝태그> 한 줄을 쓸 때 : <시작태그/> 예외가 있는 태그가 여럿이 있다. 그 중 textarea와 div는 반드시 시작과 끝태그를 한 쌍으로 해주어야 한다. --> <!--선택에 따른 입력--> <!--라디오 이름을 동일하게 해야 그룹이 되어 1개만 선택 가능하다.--> <input type="radio" name="r1" checked="checked">첫번째 라디오<br> <input type="radio" name="r1">두번쨰 라디오<br> <br> <!--체크박스--> <!--체크박스를 같은이름으로 하면 프로그래밍을 할 때 배열로 활용 할 수 있다.--> <input type="checkbox" name="c1" checked="checked"/>첫번째 체크<br> <input type="checkbox" name="c1"/>두번째 체크<br> <input type="checkbox" name="c1"/>세번째 체크<br> <br> <!--선택창 select--> <select> <option>서울</option> <option selected="selected">대전</option> <option>대구</option> <option>부산</option> </select> <br> <!--사이즈를 지정하여 select를 리스트와 같이 사용한다.--> <!--multiple로 다중선택이 가능하도록 한다. ctrl을 같이 눌러 다중선택한다.--> <select size="4" multiple="multiple"> <option>서울</option> <option>대전</option> <option>대구</option> <option>부산</option> </select> <!--버튼 관련--> <!--비어있는 버튼--> <input type="button" value="버튼"/><br><br> <button>버튼</button><br> <!--이미지로 빈버튼을 만들자--> <input type="image" src="../images/jesus.jpg"/><br> <!--submit : 지금까지 입력한 내용을 서버로 전송하는 기능이 있는 버튼--> <input type="submit" value="전송"/><br> <!--reset : 입력한 내용을 모두 지워서 다시 입력하게 만드는 버튼--> <input type="reset" value="취소"/><br> <hr> <!--기타--> <!--파일선택을 할 수 있다. 선택된 파일은 파일로 전송가능--> <input type="file"/><br> <!--화면에 보여지지 않고 값을 전달하기 위해 쓴다.--> <input type="hidden" name="id" value="scott"/> </form> </body> </html> | cs |
