01. 웹& 웹서비스
•
웹) world wide web = Internet
•
웹브라우저: HTML 문서를 받아주고 보여주는 통로 역할 ex)크롬,익스플로어,파이어폭스
•
웹서비스는 사용자 요청에 응답하여 원하는 정보 제공
client-server 구조 
p2p구조
p2p구조-client → sever ) request (GET,POST)
-server → client) response
→ client는 HTML을 처리하고 갖다주것을 요청하고, sever는 그 요청에 응답.제공한다.
02. 웹서버 만드는 방법
서버 컴퓨터
속성
1. 빠른 컴퓨팅 능력 (연산속도)
2. 항상 켜 있어야 함
3. 발열 냉각장치
4. 클라이언트 수 고려
5. 보안
설치 방법
1. 내 컴퓨터 = 서버 컴퓨터화 시키기 ) 웹서버 직접설치, local 환경 설치 ex)Apache,lls
1.
설치 까다로움
2.
추가적 지식요구
3.
한번 익히면 자유로운 개발가능
2.다른 서버 컴퓨터 빌리기) 웹포스팅 업체 이용 ex)cloud9, github
1.
설치.조작 단순
2.
과금발생
3.
개발 제약 有
4.
client 수 고려X
03. HTML
Hyper text(=link) markup language ⇒ 문서
HTML로 꾸미려 하지 말것!
1.글 2. 태그 3 속성
-HTML로 작성된것임을 알려주는 태그 ex) <!DOCUTYPE html> <html> ~ </html>
-화면에 드러나지 않지만, 문서를 설명하는 태그 ex) <head> ~ </head>
-화면에 직접적으로 드러나는, 문서에 보이는 태그 ex) <a>~</a>등
HTML
복사
* Alt + L + O → Live server
* ! + tap → 기본 setting
* f12 → 구글 크롬 개발자 도구, 코드에 마우스 갖다대면 관련부분 하이라이트
* ol>li*n → 순서있는리스트 n개 자동생성
ul>li*n → 순서없는리스트 n개 자동생
04. Bootstrap
: css/javascript 기반 웹 프레임워크, 오픈소스, 반응형 웹 지원, 호환↑, 성능↓
준비
1.
CDN코드 head에 복붙
2.
code.jquery.com 의 최신 코드 복붙
→ f12 → Network → F5 새로고침 → 링크의 bootstrap 요소 받아들여짐 확인 가능
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title> </title>
</head>
HTML
복사
05. Github 배포
Github 기능
1.
code 저장
2.
undo
3.
협업
4.
web hosting
주의사항
1.
index.html을 첫page로 간주하고 찾으므로, index만들기
2.
commit change란에 upload/삭제/변경 이유등 나타내기
HTML
복사