[Front]
[1일차] Web(Front): HTML
whatezlife
2025. 2. 27. 11:35
1.Web 소개 🌐
A. 웹이란?
웹 사이트는 웹 페이지들의 모임이며, 브라우저를 통해 동작한다.
B. 웹과 브라우저
- 웹 브라우저: 인터넷 웹 페이지를 볼 수 있게 해주는 프로그램(클라이언트)
- 웹 표준(Web Standard): 브라우저마다 동작이 다를 수 있어 웹 파편화가 발생함. 이를 해결하기 위해 웹 표준이 존재한다.
- W3C - 팀 버너스리가 창립한 웹 표준 기구
- WHATWG - Apple, Google, Microsoft, Mozilla가 주도하는 HTML Living Standard
C. HTML 표준의 변화 과정
가. W3C와 WHATWG의 등장 나. HTML5의 탄생 (2007년) 다. 두 단체의 개발 방향 차이 라. 2019년 WHATWG로 표준 통합 → HTML Living Standard가 공식 HTML 표준이 됨
D. Web의 기본 기술 구성
기술 역할
| HTML | 웹 문서의 구조와 콘텐츠 정의 |
| CSS | 시각적 디자인과 레이아웃 |
| JS | 동적 기능과 상호작용 추가 |
2. HTML 개념 📝
A. 크롬 개발자 도구 (Chrome DevTools)
- Ctrl + Shift + I 또는 F12를 눌러 실행 가능
- 주요 탭: Elements, Sources, Network, Performance, Application 등
B. Gitlab Clone & Pull
$ git clone https://lab.ssafy.com/s13/javabi/live-web-front.git
$ git pull origin master
C. Visual Studio Code (VSCode)
- 주요 확장 프로그램
- Auto Rename Tag
- Highlight Matching Tag
- Auto Close Tag
D. HTML이란?
- Hyper Text Markup Language의 약자
- Hyper Text: 링크를 통해 다른 문서로 이동 가능
- Markup Language: 태그를 이용해 문서 구조 정의
E. 주요 마크업 언어
언어 설명
| Markdown | # 제목, **굵은 글씨** 등 문서 구조화 |
| XML | <title>, <author> 등 데이터 구조화 |
| BBCode | [b]굵은 텍스트[/b], [url]링크[/url] 형태 |
3. HTML 기본 구조 🏗️
A. HTML 문서 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문서 구조</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 기본 HTML 문서입니다.</p>
</body>
</html>
B. 주요 HTML 요소
요소 역할
| <html> | HTML 문서의 루트 요소 |
| <head> | 메타데이터 및 설정 포함 (제목, 스타일, 외부 파일 로드) |
| <body> | 브라우저 화면에 보이는 정보 작성 |
| <title> | 브라우저 탭에 표시될 제목 |
| <meta> | 문서 정보 (예: 인코딩, 뷰포트 설정) |
| <p> | 문단을 나타냄 |
| <a> | 하이퍼링크 생성 |
| <img> | 이미지 삽입 |
| <ul>, <ol>, <li> | 목록 구성 |
4. HTML 요소와 속성 🏷️
A. 속성 (Attributes)
- 속성은 name="value" 형태로 작성하며, 요소에 추가적인 정보를 제공함.
- 예제:
싸피 홈페이지
B. HTML 요소 유형
유형 설명
| 블록 요소 (Block Elements) | 새로운 줄에서 시작하며 부모 요소의 100% 너비 차지 (예: <div>, <p>, <ul>) |
| 인라인 요소 (Inline Elements) | 같은 줄에서 표시되며 콘텐츠 크기만큼 차지 (예: <a>, <span>, <img>) |
5. 폼 (Form)과 입력 요소 📝
A. 폼 관련 태그
태그 설명
| <form> | 사용자 입력을 서버로 전송하는 태그 |
| <input> | 다양한 입력 필드 제공 (text, password, checkbox 등) |
| <label> | 입력 필드와 연결하여 설명 제공 |
| <button> | 클릭 가능한 버튼 생성 |
| <select>, <option> | 드롭다운 메뉴 생성 |
| <textarea> | 여러 줄의 텍스트 입력 가능 |
B. 예제 코드 (로그인 폼)
<form action="/login" method="POST">
<label for="username">아이디</label>
<input type="text" id="username" name="username" placeholder="아이디 입력" required>
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" required>
<button type="submit">로그인</button>
</form>
6. 시맨틱 태그 (Semantic Tags) 📚
A. 시맨틱 태그란?
- HTML5에서 도입된 의미 있는 태그로, 코드의 가독성을 높이고 SEO 최적화에 도움을 줌.
B. 주요 시맨틱 태그
태그 설명
| <header> | 웹사이트의 헤더 (로고, 내비게이션 포함) |
| <nav> | 사이트 내비게이션 메뉴 |
| <section> | 논리적 구분을 위한 영역 |
| <article> | 독립적인 콘텐츠 영역 (블로그 글 등) |
| <aside> | 보조 정보 (사이드바) |
| <footer> | 웹사이트 하단 정보 (저작권, 연락처) |