Web Service
웹 서비스?
: 사용자가 요청하는 정보를 처리할 수 있는 서비스
웹서비스=서버라 볼 수 있다.
Client →(Request)→Server
Client ←(Respond)←Server
※ 이때 HTML파일이 오간다고 볼 수 있다.
P2P?
Peer to Peer의 약자로, 모두가 서버이자 클라이언트가 될 수 있다.
WWW?
World Wide Web의 약자로, 인터넷이라 볼 수 있다.
※웹 브라우저=인터넷일까?
: 웹 브라우저는 HTML파일을 전달해주는 역할이자 통로로 인터넷이 아니다.
Server
서버 컴퓨터와 일반 컴퓨터의 차이점은 뭘까?
: 서버컴퓨터는 신경 써야 할 부분만 확실히 신경 쓴 컴퓨터다.
신경 쓴 목록들..
•
빠른 컴퓨팅 능력
•
발열 냉각장치
•
24시간 무한루프
•
클라이언트 수
•
보안
서버가 되는 방법
1.
내 컴퓨터를 서버 컴퓨터화 시키기(=웹 서버 직접 설치, 로컬 환경 세팅) ex) Apache, IIS
•
설치 다소 까다로움
•
추가적 지식 요구
•
한 번 익히면 자유로운 개발 가능
2.
다른 서버컴퓨터 빌리기(=웹 호스팅 업체 이용) ex) AWS c9, GitHub
•
설치와 조작 단순
•
과금 발생
•
개발에 있어 제약 있음→ 자유도↓
•
클라이언트 수 고려x
HTML
HTML?
=Hyper Text(=링크) Markup Language(=컴퓨터가 알아듣는 언어)의 약자
웹 브라우저는 서버의 HTML파일을 받아주고 받는 역할을 한다.
HTML 코드
1.
글
2.
태그
3.
속성
코드 예시
<h1> 제목(h2, h3, ...)
<p> 단락
<br> 줄바꿈
<strong> 굵은 글자
<ol> 순서있는 리스트 전체
<ul> 순서 없는 리스트 전체
<li> 각 항목
<em> 기울어진 글자
!대원칙 → HTML로 꾸미려 들지 말자!
꾸미는 것은 CSS에서!
HTML코드
1.HTML문서라고 알려주는 태그
<!DOCTYPE html>
<html>
2.직접 화면에 등장하진 않지만 이 문서를 설명하는 태그
<head>
3.직접 화면에 나타는 코드
<body>
클라이언트와 서버 사이는 url로 통신을 주고받는다.
TIP! 비주얼 코드에서 사용할 수 있는 리스트 단축기
<ol(ul)>>li*4
→4개의 리스트 자동 생성
*실습 코드
<!DOCTYPE html>
<html lang="ko">
<head><!--탭 내용-->
<meta charset="utf-8">
<title>나를 소개해요</title>
</head>
<body> <!--페이지 내용-->
<h1>이미나를 소개합니다</h1>
<h2>이미나를 소개해요</h2>
<form action="전송받을 대상"> <!--입력값 처리를 하기 위해 action사용-->
아이디 : <input type="text" name="myid">
비밀번호 : <input type = "password" name="mypw">
<input type="submit">
</form>
<br>
<img src="KakaoTalk_20210305_203846346.jpg" height=300>
<br>
<form action = "전송받을 대상">
<h2>나의 일기장</h2>
제목 : <input type="text" name="diarytitle"> <br>
<select>
<option value="goodday">좋은날</option>
<option value="sadday">슬픈날</option>
<option value="soso">그저그런날</option>
</select>
<br>
내용 : <br>
<textarea cols="30" rows="20"></textarea>
<input type="submit">
</form><br>
<h2>나의 일대기</h2>
<ol>
<li><a href="1.html"></a>유년기</li>
<li><a href="2.html"></a>질풍노도의 시기</li>
<li><a href="3.html"></a>방황기</li>
<li><a href="4.html"></a>지금</li>
</ol>
</body>
</html>
HTML
복사
부트스트랩?
: css/javascropt기반 웹 프레임워크/ css 사용 가능
jquery 필요
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
HTML
복사
jquery를 쓰기 위한 코드