Web 프로그래밍
웹프로그램 : 웹에서 수행되는 프로그램
웹(web) : 인터넷이라고 하는 통신망에서 처리되는 애플리케션 레벨의 네트워크 프로그램 -> 검색시스템
(1995년) 클라이언트 기능 - 서버 기능
브라우저 apache web server
웹 클라이언트 ----------------------- 웹 서버
(요청) HTTP (응답)
정보 HTML5
URL문자열
-----------------------> W3C (World Wide Web Consortium)
-
클라이언트에서 서버에게 정보를 요청하는 방법
(1) 브라우저의 주소필드에 URL 문자열을 입력하고 엔터키를 누른다.
(2) 웹 페이지상에 출력된 하이퍼링크텍스트를 클릭하여 요청한다.
*하이퍼링크텍스트: 클릭 시 서버에게 요청을 보내고 응답된 내용으로 페이지 내용을 이동하는 것을 지원하는 텍스트
-
웹 클라이언트 프로그램
수행되는 위치가 클라이언트(브라우저)인 프로그램 : HTML, CSS, JavaScript
내용,구조 스타일 기능
-
웹 서버 프로그램
수행되는 위치가 서버인 프로그램 : CGI, PHP, ASP, Servlet, JSP, Django, Flask
http://localhost:8088/edu/first.html ---> URL
---------------
URI/edu -----> edu 라는 프로젝트에 있는 파일을 요청한다.
요청패스, 컨텍스트패스
WebContent ---> document root, docbase
http://localhost:8088/edu/htmlexam/exam1.html
http://localhost:8088/edu/images/1.jpg
랜더링(render) : 응답되는 컨텐츠의 타입에 따라서 브라우저의 도큐먼트영역에 내용을 출력하는 작업
html의 경우엔 html 태그들을 파악(파싱,parsing)해서 각각의 태그에 알맞게
도큐먼트 영역에 출력한다.
404 : HTTP response code : 존재하지 않는다.
랜더링된 방식 - 블럭스타일(block style) - 태그의 컨텐트 영역이 행 끝까지인 태그, 출력하고 개행처리가 일어난다.
인라인스타일(inline style) - 태그의 컨텐트 영역이 실제 컨텐트 내용만 정해지는 태그
,
h1~h6 제목 태그
</head>
<body>
HTML을 학습하자...
HTML을 학습하자...
HTML을 학습하자...
HTML을 학습하자...
HTML을 학습하자...
HTML을 학습하자...
<hr>
HTML을 학습하자...<br>
HTML을 학습하자...<br>
HTML을 학습하자...<br>
HTML을 학습하자...<br>
HTML을 학습하자...<br>
HTML을 학습하자...<br>
<hr>
<h1>HTML을 학습하자...</h1>
<h2>HTML을 학습하자...</h2>
<h3>HTML을 학습하자...</h3>
<h4>HTML을 학습하자...</h4>
<h5>HTML을 학습하자...</h5>
<h6>HTML을 학습하자...</h6>
</body>
</html> hr : 선
br : 엔터
h1~h6: 제목태그 1-6으로 갈 수록 크기가 점점 작아진다.
list
h1>HTML을 학습하자...</h1>
<hr>
<ul> <!-- unordered list -->
<li>HTML을 학습하자...</li>
<li>HTML을 학습하자...</li>
<li>HTML을 학습하자...</li>
</ul>
<ol> <!-- ordered list -->
<li>HTML을 학습하자...</li>
<li>HTML을 학습하자...</li>
<li>HTML을 학습하자...</li>
<ul>
<li>고길동</li>
<li>둘리</li>
</ul>
<li>HTML을 학습하자...</li>
<ol>
<li>또치</li>
<li>도우너</li>
<li>희동이</li>
</ol>
<li>HTML을 학습하자...</li>
</ol>ul: unordered list
li: 리스트
ol: ordered list
img , & nbsp;
<h1>이미지를 출력해보자</h1>
<img src="../images/totoro.png" width="200">
<img src="../images/totoro.png" width="100" height="80">
<img src="../images/olaf.jpg">
<hr>
<img src="../images/duke.png" width="200"><br>
<img src="../images/duke.png" width="200" height="80"><br>
<img src="../images/olaf.jpg"><br>
<img src="http://m.ddaily.co.kr/data/photos/cdn/20180832/art_1534057720.jpg" width="200"><br>
<hr>
abcdef 가나다 123
<hr>
abcdef 가나다 123img src="이미지 경로" : 이미지를 도큐먼트상에 나타냄
width: 200
height: 80
(&)nbsp; : 스페이스바
하이퍼링크 텍스트, 이미지
<h1>하이퍼링크 만들기</h1>
<hr>
<h2>하이퍼링크 텍스트</h2>
<a href="https://www.w3schools.com/html/default.asp">HTML을 학습하자</a>
<a href="https://www.w3schools.com/css/default.asp">CSS를 학습하자</a>
<a href="https://www.w3schools.com/js/default.asp">JavaScript를 학습하자</a>
<a href="../first.html">첫 번째 페이지로 이동하자</a>
<a href="../second.html">두 번째 페이지로 이동하자</a> <!-- 404(요청한 페이지가 없다!!) 오류 발생 -->
<hr>
<h2>하이퍼링크 이미지</h2>
<a href="https://www.w3.org" title="World Wide Web Consortium(W3C)"><img src="../images/clover.png" width="100"></a>동영상
<h1>동영상과 테이블</h1>
<hr>
<h2>동영상을 출력해 보자</h2>
<video src="../images/trailer.mp4" width="677" height="500" controls="controls"></video>
<hr>
<iframe width="677" height="400" src="https://www.youtube.com/embed/r6IjVTRG79g" title="YouTube video player" ></iframe>
<hr>tag
저장된 동영상파일 mp4
vidio src="비디오 경로.mp4", width="넓이", height="높이",controls="controls"
유튜브 동영상
iframe src="동영상 경로", width="넓이",height="높이",title="제목"
테이블
테이블
| 언어 또는 기술명 | 주요 기능 |
|---|---|
| HTML | 웹 페이지의 내용 또는 구조를 만드는 언어입니다. |
| CSS | 웹 페이지 내용의 스타일을 정의하는 언어입니다. |
| JavaScript | 웹 페이지에서 클라이언트상에서의 기능을 구현하는 언어입니다. |
| django | 웹 페이지에서 서버상에서의 기능을 구현하는 기술입니다. |
| 이름 | 고향 | 나이 |
|---|---|---|
| 둘리 | 쌍문동 | 10 |
| 도우너 | 깐따비아 | 9 |
| 또치 | 아프리카 | 10 |
| 이름,고향,나이 | ||
|---|---|---|
| ㅋㅋㅋㅋ | 쌍문동 | 10 |
| 깐따비아 | 9 | |
| 또치 | 아프리카 | 10 |
<table border="1">
<tr><th>이름</th><th>고향</th><th>나이</th></tr>
<tr><td>둘리</td><td>쌍문동</td><td>10</td></tr>
<tr><td>도우너</td><td>깐따비아</td><td>9</td></tr>
<tr><td>또치</td><td>아프리카</td><td>10</td></tr>
</table>
<hr>
<table border="1">
<tr><th colspan="3">이름,고향,나이</th></tr>
<tr><td rowspan="2">ㅋㅋㅋㅋ</td><td>쌍문동</td><td>10</td></tr>
<tr><td>깐따비아</td><td>9</td></tr>
<tr><td>또치</td><td>아프리카</td><td>10</td></tr>
</table>
</body>
border: 테두리를 그려줌
colspan: 열 병합
rowspan: 행 병합
