#2 Web & Web Service
Client ← P2P → Server
Request (요청) ← HTML 문서 → Response (응답)
#3 웹 서버를 만드는 방법
서버 컴퓨터의 특징
1.
빠른 컴퓨팅 능력
2.
24시간 켜 있어야 함
3.
발열 냉각장치
4.
클라이언트 수 고려
5.
보안
서버 컴퓨터를 만드는 방법
내 컴퓨터를 서버 컴퓨터로
웹 호스팅 이용
#3 HTML [1]
HTML = 문서
마카 = HTML 코드
1.
글
2.
태크
3.
속성
<h1>가장 중요한 제목</h1><h2>그 다음 중요한 제목</h2>
HTML
복사
큰 그림을 그리고 가지를 뻗어가듯이 태그를 작성한다
#4 HTML [2]
HTML로 꾸미려 들지 말자!
HTML은 "꾸미는 언어"가 아니다
HTML 코드
1.
"이거 HTML로 작성된 문서야~"를 알려주는 태그
2.
직접 화면에 등장하진 않지만 이 문서를 설명하는 태그
3.
직접적으로 화면에 등장하는, 문서에서 보이는 태그
<!DOCTYPE html> <!--이거는 HTML 문서야-->
<html>
<head></head>
<body></body>
</html>
HTML
복사
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나를 소개해요</title>
</head>
<body>
<h1>심재빈을 소개합니다</h1>
<h2>심재빈을 소개해요</h2>
</body>
</html>
HTML
복사
#5 HTML [3]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나를 소개해요</title>
</head>
<body>
<h1>심재빈을 소개합니다</h1>
<h2>심재빈을 소개해요</h2>
<form action="전송받을 대상">
아이디 : <input type="text" name="myid">
비밀번호 : <input type="password" name="mypw">
<input type="submit">
</form>
<br>
<img src="snowman.jpg" width=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>
<br> <input type="submit">
</form><br>
<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
복사
#6 Bootstrap
Bootstrap? : 트위터의 개발자들이 만든 CSS/JavaScript 기반 웹 프레임워크
부트스트랩 CDN
<!-- 합쳐지고 최소화된 최신 CSS -->
<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>
HTML
복사
jQuery CDN
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
HTML
복사
↑ 부트스트랩을 사용하기 위해 필요한것 ↑
콘테이너
<div class="container">
...
</div>
HTML
복사
Primary 버튼
<button type="button" class="btn btn-primary">Primary</button>
HTML
복사
기본 폼
<form>
<div class="form-group">
<label for="exampleInputEmail1">이메일 주소</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
</div>
<div class="form-group">
<label for="exampleInputPassword1">암호</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
</div>
<div class="form-group">
<label for="exampleInputFile">파일 업로드</label>
<input type="file" id="exampleInputFile">
<p class="help-block">여기에 블록레벨 도움말 예제</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 입력을 기억합니다
</label>
</div>
<button type="submit" class="btn btn-default">제출</button>
</form>
HTML
복사
탭형 네비게이션
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
HTML
복사
진행바
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
HTML
복사
완성본
<!DOCTYPE html>
<html lang="ko">
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!-- 합쳐지고 최소화된 최신 CSS -->
<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>
<meta charset="UTF-8">
<title>나를 소개해요</title>
</head>
<body>
<div class="container">
<br>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="1.html">유년기</a></li>
<li role="presentation"><a href="2.html">질풍노도의 시기</a></li>
<li role="presentation"><a href="3.html">방황기</a></li>
<li role="presentation"><a href="4.html">지금</a></li>
</ul>
<h1>심재빈을 소개합니다</h1>
<h2>심재빈을 소개해요</h2><br>
<form action="전송받을 대상">
아이디 : <input type="text" name="myid">
비밀번호 : <input type="password" name="mypw">
<br>
<div class="form-group">
<label for="exampleInputEmail1">이메일 주소</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
</div>
<div class="form-group">
<label for="exampleInputPassword1">암호</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
</div>
<div class="form-group">
<label for="exampleInputFile">파일 업로드</label>
<input type="file" id="exampleInputFile">
<p class="help-block">여기에 블록레벨 도움말 예제</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 입력을 기억합니다
</label>
</div>
<input type="submit" class="btn btn-primary">
</form><br>
<br>
<img src="snowman.jpg" width=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>
<br> <input type="submit">
</form><br>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</body>
</html>
HTML
복사