HTML #1
1. web 아키텍쳐 (web architecture)
클라이언트 (client) 서버 (server)
------------------ -------------------------------
웹브라우저 웹컴포넌트 (html, jsp, servlet)
html : 정적 컴포넌트, *.html 파일
jsp : 동적 컴포넌트 (실행됨), *.jsp 파일
servlet : 동적 컴포넌트 (실행됨), *.java 파일* html인 경우 - 정적
1) 요청 서버 (웹서버 : Apache, IIs, ngnix)
웹브라우저 ------------------> test.html 2) 요청한 html 검색 (없으면 404 에러 발생)
<------------------
3) test.html 다운
4) test.html 렌더링함* jsp인 경우 - 동적
1) 요청 서버 (웹서버 기능을 포함한 컨테이너 : Tomcat)
웹브라우저 ------------------> test.html 2) 요청한 jsp 검색 (없으면 404 에러 발생)
<------------------ 3) 있으면 test_jsp.java 생성
6) html 응답 4) 컴파일 후 test_jsp.class 생성
7) html 렌더링함 5) 실행 (JVM)
==> 실행 결과는 html로 만들어짐* servlet인 경우 - 동적
1) 요청 서버 (웹서버 기능을 포함한 컨테이너 : Tomcat)
웹브라우저 ------------------> TestServlet.java 2) 요청한 java 검색 (없으면 404 에러 발생)
<------------------ 3) 컴파일 class 생성
5) html 응답 4) 실행
6) html 렌더링함 ==> 실행 결과는 html로 만들어짐2. 요청
- 필요한 정보
서버의 IP 정보 : 210.100.100.3
port 번호 : 8080
타겟 컴포넌트
요청 URL : http://서버IP:port번호/타겟
http://210.100.100.3:8080/test.html
클라이언트 -------------------> 서버쪽 PC 210.100.100.3
--------------------------
Apache 웹서버 (80)
tomcat 컨테이너 (8080)
- html, jsp, servlet
MySQL (3306)
Oracle (1521)3. 환경설정
1) node 설정
http://nodejs.org 다운 받고 설치
cmd 창에서 node -v 입력하고 버전 확인
2) VSC 설정
https://code.visualstudio.com/ 다운 받고 설치
vsc 확장팩 설치 (live server)
4. 웹 개요
- 1991년에 World Wide Web 용어가 처음 나옴
- 1993년에 웹 표준단체 창설 (w3c)
http://www.w3.org - 모질라에서는 가장 빠르게 표준을 준수해서 가이드를 제공한다
http://developer.mozilla.org
html 표준 가이드 : https://developer.mozilla.org/ko/docs/Web/HTML
css 표준 가이드: https://developer.mozilla.org/ko/docs/Web/CSS
js 표준 가이드: https://developer.mozilla.org/ko/docs/Web/JavaScript
=> 모든 브라우저가 제안된 표준안을 준수하지 못 함
5. 웹 표준
- 기본 개념 : 특정 기기와 상관없이 누구든지 정보 접근이 가능한 웹을 만들어야 한다
- 구현 방법 : 역할 분담
1) html
데이터 구조 (뼈대) 담당
.html
2) css
디자인과 레이아웃 담당
.css
3) javascript
동적 처리 담당
*.js
==> 모두 서버에서 다운로드 후 웹브라우저인 클라이언트에서 실행됨 ★
http://caniuse.com
https://coding-levup.tistory.com/5#google_vignette
6. html
1) 개요
hyper text markup language의 약자로서 웹페이지 작성을 위한 언어
hyper text : 링크를 의미
markup language : 정보표시용 태그(<>)를 의미
cf) xml (eXtensible Markup Language)
태그명을 임의로 지정 가능
추가로 특정 태그로 사용함을 규칙으로 정할수도 있음
규칙은 2가지 방식 이용 가능 ( .dtd , .xsd )
용도 : 데이터 저장
특징 : 플랫폼 (OS, 프로그램 언어)에 독립적
2) 특징
- 태그로 구성
- 시작태그, 종료태그, 몸체 3가지로 구성됨
- 몸체는 또 다른 태그가 될 수 있다
- 중첩 형태로 구성됨
- 몸체 없는 빈 태그 가능 <태그 />
- 종료 태그가 없는 태그 가능 (br, hr, img, input, link)
- 소문자 권장
- 시작 태그에는 속성을 포함할 수 있다
<p>hello</p>
<p class="x" id="y">hello</p>- 속성명은 정해져 있으나 커스텀 속성을 만들 수 있다 (data-속성명 = "속성값")
- 범용적으로 사용할 수 있는 속성 (class, id, style, name 등)
- 태그에 종속적인 속성 ()도 있다
3) 버전
- html5 사용 예정
- 웹 브라우저에 html 버전을 알려줘야됨
(<!DOCTYPE html>)4) 기본 구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>계층 구조가 생김 : DOM (Document Object Model) 트리
html (루트태그 root tag)
|
head body
| |
title link script p h1 span-> html이 파일을 다운 받아서 웹브라우저가 브라우저 메모리에 DOM 트리를 생성한 후 렌더링 한다
이후 css 또는 js를 이용해서 DOM에 접근하여 스타일 및 DOM 처리 (삭제, 수정, 추가)를 할 수 있다 ★
5) html 주석문
<!-- 주석이지롱 -->6) live server
- http://127.0.0.1:5500/template.html
http : 프로토콜 (protocol)
서버IP : 127.0.0.1 (로컬을 의미) / localhost
port 번호 : 5500
타겟 컴포넌트 : template.html
7) head 태그
: title, style, link, script 태그
(1) title 태그
- 문서의 타이틀 지정 용도
- 웹브라우저의 탭에 보임
- 즐겨찾기 추가할 때 저장됨
(2) style 설정
- css 설정 방법 3가지
가. 인라인 css 스타일
<p style="color:blueviolet">Hello1-인라인스타일</p>나. 내부 css 스타일
<style>
#xxx {
color: blue;
}
</style> 다. 외부 css 스타일
*.css 외부 파일을 생성하고 html에서 불러다 사용한다
<link rel="stylesheet" href="external.css">(3) link 태그
- 외부 css 스타일 지정 시 사용
- favicon 경로 지정 시 사용
(4) script 태그
- 자바스크립트 사용
- js 설정 방법 2가지
가. 내부
<script>
js코드 구현
</script>나. 외부
외부파일인 *.js 만들고 html에서 불러다가 사용
<script src="*.js"></script> 사용8) body 태그
: header, p, br, hr, a, table, 리스트 등
(1) header 태그
- h1 ~ h6
- 번호가 작을수록 크다
- 기본폰트크기는 16px (1rem) ==> 1rem = 1em 동일
<h1> : 32px, 16* 2rem(2em)
<h2> : 24px, 16 * 1.5rem(2m)
<h6> : 10.72px, 16*0.67rem(em)cf) 블럭 레벨 vs 인라인 레벨
- 블럭 레벨
새로운 줄에 렌더링됨
너비가 웹브라우저 전체 너비 차지
대표적인 태그 : h1_h6, p, div, ul, ol, li, table, tr - 인라인 레벨
하나의 줄에 렌더링됨
너비가 자신이 가진 컨텐츠만큼 차지
대표적인 태그 : span, a
(2) p 태그
- 문서의 문단 지정 목적
- 블럭 레벨 스타일
(3) br 태그
- new line 만들 때 사용
- 종료 태그 없음
- 블럭 레벨 스타일
(4) hr 태그
- 수평선
- 종료 태그 없음
- 블럭 레벨 스타일
(5) 텍스트 포맷용 태그
(권장x. CSS로 처리하는 것을 권장)
- <b>hello</b> : 굵은 글자
- <i>hello</i> : 이탤릭체 글자
- <small>hello</small> : 작은글자
- <del>hello</del> : 취소선글자
- <ins>hello</ins> : 밑줄글자
- <sub>hello</sub> : 아래글자
- <sup>hello</sup> : 위글자 (6) a 태그 (anchor 태그)
-
페이지간 링크 (연결) 시 사용됨
-
인라인 레벨
-
기본적으로 방문 전 (blue), 방문 후 (purple), 활성화 (red, 누르고 있을 때) 링크 색상이 달라진다. css로 변경 가능
-
종류 2가지
-
가. 내부링크
<a href="#java">java로 바로가기</a>
<a id="java">여기서부터 JAVA</a> - 나. 외부링크
문법:
<a href="타겟">링크</a>
<a href="http://www.google.com">구글</a>
<a href="login.html">로그인페이지</a>- target 속성
: 링크된 문서를 어디에서 보여줄지를 지정
target="_self" ==> 기본값
target="_blank" ==> 새로운 창(탭)에 문서를 open
<a href="http://www.google.com" target="_blank">구글</a>(7) table 태그
<table> : 시작
<tr> : 행태그
<td> : 열태그의 값
<th> : 열태그의 헤더값<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>20</td>
</tr>
<tr>
<td>이순신</td>
<td>30</td>
</tr>
</table>- 그룹핑 가능 (권장)
<thead>
<tbody>
<tfoot>- 병합
colspan="갯수" : 열 병합
rowspan="갯수" : 행 병합
<table border="1">
<tr>
<th>이름</th>
<th colspan="2">전화번호</th>
</tr>
<tr>
<td>홍길동</td>
<td>010</td>
<td>011</td>
</tr>
</table>ctrl + shift + f : 자동 정렬
(8) 리스트
가. 순서 없는 리스트 (unordered list)
<ul>
<li>A</li>
<li>B</li>
</ul>나. 순서 있는 리스트 (ordered list)
<ol>
<li>A</li>
<li>B</li>
</ol>