프론트엔드 > 웹 개발 기초

(목차와 각 제목을 누르면 이동합니다)

웹 개발 기초

> 1. 웹과 인터넷 기본 개념

✨ 웹 vs 인터넷

웹(Web): 인터넷 위에서 동작하는 하이퍼텍스트 기반의 정보 시스템
- 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간
인터넷(Internet): 전 세계 컴퓨터들이 물리적, 논리적으로 연결된 네트워크의 네트워크
- 서로의 정보를 공유할 수 있는 공간
- 회선교환방식 → 패킷교환방식으로 발전

✨ 웹의 역사

1. ARPANET(인터넷 시초) → 2. CERN 팀 버너스 리 'Web' 발명 → 3.그래픽 웹 브라우저 모자익 개발
→ 4. 넷스케이프 → 5. 인터넷 익스플로러

✨ 웹 브라우저

웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 프로그램
web 2.0: 정보 제공자와 사용자가 정해지지 않은,
사용자가 직접 참여하고 소통하는 웹 환경

> 2. 웹 통신의 기본 구조

✨ 클라이언트-서버 모델

Client <-- Request/Response --> Server

클라이언트(Client): 서비스를 요청하는 컴퓨터나 프로그램 (웹 브라우저, 모바일 앱 등)
서버(Server): 서비스를 제공하는 컴퓨터나 프로그램 (웹 서버, 데이터베이스 서버 등)

✨ 웹사이트 구성 요소

HTML: 뼈대 (구조와 내용)
CSS: 디자인 (스타일링)
JavaScript: 기능 (동적 동작)

> 3. 웹 프로토콜과 주소 체계

✨ HTTP (HyperText Transfer Protocol)

= 인터넷에서 하이퍼텍스트 문서를 교환하기 위해 사용되는 통신규약

✨ 하이퍼텍스트 (Hypertext)

현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 (링크)
HTML (HyperText Markup Language): 웹 페이지에 정보를 담아 표시하기 위한 마크업 언어
하이퍼텍스트 문서 = HTML 문서

✨ 프로토콜 (Protocol)

= 컴퓨터들끼리 정보를 주고받을 때의 통신규약 (무엇을 수행할 것인지, 언제 어떻게 호출할 것인지)

✨ URL (Uniform Resource Locator)

= 웹상의 특정 자원(문서, 이미지 등)의 위치를 나타내는 주소

구성요소: 프로토콜, 도메인명(서버 위치), 경로, 파일명

예시: https://www.example.com/folder/page.html

# https://: 프로토콜
# http://www.example.com: 도메인명
# /folder/: 경로
# page.html: 파일명

✨ 마크업(Markup)

= Mark, 표시를 하는 것

> 4. HTML 기본 구조

✨ HTML 구성 요소

시작 태그, 끝 태그: ex: ,
내용(Content): 태그 안에 포함되는 실제 내용
태그 종류: 약 110개, 주요 태그만 알면 대부분 사용 가능
속성(Attribute), 값(Value): 해당 요소에 추가적인 내용을 담고 싶을 때 사용 (글자색, 크기, 배경색 등)

✨ 기본 HTML 문서 구조

<!DOCTYPE html>  <!-- 문서 형식 정의 -->
<html>
<head>          <!-- HTML 문서의 머릿글 -->
    <meta>      <!-- HTML 문서의 정보 정의 -->
    <title>     <!-- HTML 문서의 제목 -->
</head>
<body>          <!-- 문서 내용(텍스트, 이미지, 동영상) -->
</body>
</html>

> 5. HTML 주요 태그

✨ 제목과 본문 태그

<h1> ~ <h6>: 제목 태그, 숫자가 작을수록 크기가 큼
: 본문 단락, 가로 한 줄을 전부 차지 (개행 포함)
: 본문 문장, 내용만큼만 공간 차지 (개행 미포함)
 : 줄바꿈(개행) 태그
<hr>: 단락 간의 구분선 태그

✨ 강조 태그

: 단순히 굵은 글씨 (의미적 강조 없음)
: 중요한 문구를 굵게 강조 (스크린 리더가 더 큰 소리로 읽음)
: 단순히 기울어진 글씨 (의미적 강조 없음)
: 기울어진 글씨 + 의미적 강조 (스크린 리더가 강조해서 읽음)

✨ 첨자 태그

: 윗첨자 (H²O)
: 아래첨자 (CO₂)

✨ 목록 태그

<ul>: 번호 없는 목록 (Unordered List)
<ol>: 번호 있는 목록 (Ordered List)
<li>: 목록 항목 (List Item) - ul, ol 내부에서 공통 사용

<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>

<ol>
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

✨ 이미지 태그

= <img>: 웹 페이지에 이미지를 보여주는 태그 (닫는 태그 없음)

주요 속성:

src: 이미지의 경로 지정 (파일 경로나 URL)
alt: 이미지에 대한 설명 (경로가 잘못되었을 경우 표시, 접근성)
width: 이미지의 너비
height: 이미지의 높이
border: 이미지 주위의 테두리
hspace: 좌우 여백
vspace: 상하 여백
align: 이미지 정렬 방식 (HTML5에서 사용 중단, CSS로 대체)

<img src="image.jpg" alt="설명 텍스트" width="300" height="200">

> 6. 개발 도구 팁

✨ VSCode 단축키

! + Enter: HTML 기본 구조 자동 생성
ol>li*3: ol 태그 안에 li 태그 3개 자동 생성
ul>li*5: ul 태그 안에 li 태그 5개 자동 생성

<!-- ol>li*3 입력 후 Tab -->
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

> Have a wonderful day!

Meaningful Trail of life