[수업 목표]
- 서버와 클라이언트의 역할에 대해 이해한다.
- HTML, CSS의 역할과 사용 방법을 안다.
[목차]
01. 웹 기초
1. 서버/클라이언트/웹의 동작 개념
- 웹페이지가 서버에서 클라이언트로 어떻게 전달되는지 이해한다.
- 웹페이지의 HTML을 수정하여 동작 원리를 탐구해본다.
- 예시: 네이버 메인 페이지의 "메일" 텍스트를 수정해보기
2. 웹의 동작 개념 (HTML을 받는 경우)
- 웹페이지는 서버에서 미리 준비된 HTML을 클라이언트로 보내 렌더링한다.
- 새로고침 시 서버에 새로운 요청을 보내 원래 HTML을 다시 받아온다.
3. 웹의 동작 개념 (데이터만 받는 경우)
- 일부 웹페이지는 HTML 대신 데이터(JSON)만 내려받아 동적으로 페이지를 업데이트한다.
모든 챕터가 끝나면 만들게 되는 것 - 구경하기
- 나홀로링크 메모장: 링크
- 마이페이보릿 무비: 최종 완성 스크린샷
02. 시작하기
1. VSCode 실행 및 폴더 열기
- VSCode에서 폴더를 열고 새 HTML 파일(index.html)을 생성하여 기본 구조 입력
2. HTML 파일 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
Hello, world!
</body>
</html>03. HTML
1. HTML이란?
- HTML은 브라우저 화면에 표시되는 문서를 작성하는 마크업 언어
- 요소(tag)를 이용해 화면을 분할하고 텍스트, 이미지, 하이퍼링크 등을 배치
2. HTML 기초
- HTML 문서는 head와 body로 구성
- head: 페이지의 속성 정보, body: 페이지 내용
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
Hello, world!
</body>
</html>3. HTML 태그 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 기초</title>
</head>
<body>
<div>div 태그</div>
<p>p 태그</p>
<ul>
<li>리스트 아이템 1</li>
<li>리스트 아이템 2</li>
</ul>
<h1>h1 태그</h1>
<a href="http://naver.com/">하이퍼링크</a>
<img src="이미지 URL" />
</body>
</html>04. CSS
1. 선택자(selector)
- 특정 요소를 선택하여 스타일을 적용
- class: .클래스명, id: #아이디명
2. CSS 기초
/* 모든 태그에 적용 */
* {
속성: 값;
}
/* 특정 태그에 적용 */
태그 {
속성: 값;
}
/* 클래스에 적용 */
.클래스 {
속성: 값;
}
/* 아이디에 적용 */
#아이디 {
속성: 값;
}3. CSS 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 실습</title>
<style>
.red-font {
color: red;
}
</style>
</head>
<body>
<p class="red-font">이 문장은 빨간색입니다.</p>
</body>
</html>4. 구글 웹폰트 사용하기
- 원하는 폰트를 선택하고
<link>태그를<head>에 추가 - CSS에
font-family속성을 사용하여 폰트 적용
5. CSS 파일 분리
- CSS를 별도 파일로 분리하여 HTML에서
<link>태그로 참조
<link rel="stylesheet" type="text/css" href="style.css">6. 부트스트랩 사용하기
- 부트스트랩을 사용하여 반응형 웹디자인 적용
- 필요한 CSS와 JavaScript 파일을 HTML에 포함
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>부트스트랩 실습
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<title>부트스트랩 실습</title>
</head>
<body>
<button type="button" class="btn btn-primary">예쁜 버튼</button>
</body>
</html>보충
**웹 페이지 렌더링**
- 우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 그려주는 것(렌더링)임.
- 브라우저가 서버에서 HTML 파일을 받아와서 그리는 과정을 렌더링이라고 함.
**브라우저와 서버**
- 브라우저는 V8이라는 자바스크립트 기반의 브라우저 엔진으로 동작함.
- 브라우저가 서버에게 가장 먼저 요청하는 데이터는 해당 URL에 대해 서버가 가지고 있는 index.html 또는 서버에서 설정된 리턴 페이지임.
- 일반적으로 하위 경로가 존재하지 않는 루트 경로일 경우 index.html을 리턴함. 예) `naver.com/` (루트 경로), `naver.com/cafe` (하위 경로 `/cafe`).
**도메인과 HTTPS**
- `https://naver.com`은 도메인임. 도메인으로 접근하면 DNS에 의해 해당 서버의 IP 주소로 변환됨.
- 브라우저는 해당 IP 주소를 사용하여 서버에 요청을 보냄.
- `https`는 `http` + `SSL 인증서`로, 암호화된 `http`임.
'크래프톤 정글' 카테고리의 다른 글
| 2~3주차 회고 (2) | 2024.10.14 |
|---|---|
| [크래프톤 정글 ] 1주차 회고 (2) | 2024.09.20 |
| [크래프톤 정글] 0 주차 회고 (4) | 2024.09.19 |
| [크래프톤 정글 ] 파이썬 기초 & 웹 스크래핑 & mongodb (0) | 2024.07.11 |
| [크래프톤 정글 ] chapter 2 - javascript & jquery (0) | 2024.07.11 |