커리큘럼
What is Web Service?
•
Client Server ( P2P(모두가 서버이자 클라이언트))
Server ( P2P(모두가 서버이자 클라이언트))◦
Client → 서버에 요청(Request)
◦
Server → 요청에 대해 응답(Response)
▪
요청(Request)의 종류
"갖다 줘" = GET
"처리해 줘" = POST
→ 요청과 응답사이에 문서 HTML이 오간다
•
인터넷(= www.(World Wide Web))
•
웹 브라우저(Client - Server 간 통로 역할)
ex) InternetExplorer, Chrome, FireFox
웹 서버를 만드는 방법
•
서버 컴퓨터 : 신경 써야 할 부분만 확실히 신경 쓴 컴퓨터
◦
빠른 컴퓨팅 능력
◦
24시간 켜 있어야
◦
발열 냉각장치
◦
클라이언트 수 고려
◦
보안 중요
•
서버 프로그램을 만드는 두 가지 방법
1.
내 컴퓨터 ⇒ 서버 컴퓨터화 시키기(로컬 환경 세팅) → ex) Apache, IIS
a.
설치 다소 까다로움
b.
추가적인 지식 요구
c.
한번 익히면 자유로운 개발 가능
2.
이 세상 어딘가의 서버컴퓨터를 인터넷으로 빌리기(웹호스팅) → ex) AWS c9, GitHub
a.
설치와 조작이 단순
b.
과금발생
c.
개발에 있어 제약이 있음
d.
클라이언트 수를 고려하지 않아도 됨
HTML
HTML → <Hyper Text Markup Language>
•
이해가 쉬움
•
정형화된 문법
•
쓰이는 문법만 맨날 쓰임
!! 대원칙 !!
•
HTML로 꾸미려 들지 말자
•
꾸미는 언어는 CSS이므로 정보 설명에 집중하자
HTML 코드
1.
"이것이 HTML 문서이다" 라고 알려줄 태그
2.
화면에 직접 등장하진 않지만 이 문서를 설명할 태그
ex) 문서의 'Title', 인코딩 방식(utf-8) 등등
3.
직접적으로 화면에 등장하는 문서에 보일 태그
ex) h1, p, li, ,,,
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>(보이지 않는)문서 설명</title>
</head>
<body>
<h1>가장 중요한 제목</h1>
<h2>덜 중요한 제목</h2> -> h1 ~ h6까지 있음
</body>
</html>
HTML
복사
•
form 태그 (+ 줄바꿈 태그)
사용자로부터 입력받은 내용을 다음 "전송받을 대상"에게 넘겨줌
<body>
<form action="전송받을 대상">
아이디 : <input type="text" name="myid">
비밀번호 : <input type="password" name="mypw">
<input type="submit">
</form>
<br>
</body>
HTML
복사
+) 글을 작성할 수 있는 큰 입력 공간을 설정할 textarea 태그 적용
<form action="전송받을 대상">
<h2>나의 일기장</h2>
제목 : <input type="text" name="diarytitle"> <br>
내용 : <br>
<textarea cols="30" rows"20"></textarea>
<br><input type="submit">
</form>
HTML
복사
•
Image 태그
<img src="~~~.jpg" height=?? width=??>
// height와 width 둘 중 하나만 작성하면 비율이 알아서 맞춰짐
HTML
복사
•
선택항목 select 태그
<select>
<option value="goodday">좋은날</option>
<option value="sadday">슬픈날</option>
<option value="soso">그저그런날</option>
</select>
HTML
복사
•
순서가 있는(ordered List) 리스트 태그
<ol>
<li>~~~</li>
</ol>
// <ol></ol> 안에 리스트 태그 <li></li>를 만들어줌
// 단축명령어 : "n개의 리스트 묶음을 만들겠다"
---> ul>li*n
HTML
복사
•
구글 크롬 개발자 도구(F12)를 이용하여 페이지 구성을 한 눈에 볼 수 있다.
•
링크 태그
<a href="~~~.html">"aaa"</a>
// aaa라는 글씨에 ~~~.html의 주소 링크가 생기게 된다.
HTML
복사
Bootstrap
Bootstrap이란? → CSS/JavaScript 기반 웹 프레임워크
•
공짜
•
반응형 웹 지원 (자동 화면 조정)
•
브라우저 호환성
•
다만, 성능이 다소 떨어짐
Github
•
Github 장점
◦
Code 저장 기능
◦
Undo 기능
◦
협업 기능
◦
Web Hosting 기능
→ 회원가입 후 무료로 이용가능!
•
Repository name(저장소 이름) 주의사항
→ "아이디".github.io 형식을 지켜야 함