krsypark/IOT컴퓨팅기초실습_중간고사
## 웹 개요 및 텍스트 구조화
### 1. 웹(WWW)의 기초 개념
* **WWW (World Wide Web):** 인터넷에서 HTML 문서들을 링크로 연결하여 소통하는 서비스.
* **서버(Server) vs 클라이언트(Client):** 서비스를 제공하는 쪽이 서버, 요청하는 쪽이 클라이언트(사용자/브라우저).
* **웹의 3요소:**
* **HTML:** 웹 페이지의 **뼈대와 구조**를 만드는 표준 언어.
* **CSS (스타일시트):** 디자인, 색상, 글꼴 등 **시각적 표현** 담당.
* **JavaScript:** 버튼 클릭 등 동적인 **동작 및 프로그래밍** 담당.
* **용어 정리:**
* **마크업(Markup):** 서식이나 구조를 표현하는 정보.
* **W3C:** HTML 표준안을 제작하는 국제 표준화 단체.
* **요소(Element):** HTML 페이지를 구성하는 각 부품.
### 2. HTML 필수 기본 구조
```html
<!DOCTYPE html> <!-- HTML5 문서임을 알리는 선언문 (닫는 태그 없음) -->
<html lang="ko"> <!-- 문서의 언어 설정. 검색 엔진(SEO)에 정보 제공 -->
<head>
<meta charset="utf-8"> <!-- 표준 문자 세트 설정 (한글 깨짐 방지) -->
<title>문서 제목</title> <!-- 브라우저 탭에 표시되는 제목 (메타정보) -->
</head>
<body>
실제 브라우저 화면에 출력되는 모든 콘텐츠
</body>
</html>
```
* **`<head>`:** 문서의 **메타정보**(제목, 인코딩 등)를 포함하며 화면엔 보이지 않음.
* **주석 (`<!-- 내용 -->`):** 코드 설명용으로 사용하며 실행 화면에는 보이지 않음.
### 3. 텍스트 관련 핵심 태그 (비교 분석)
* **제목 태그 (`<h1>` ~ `<h6>`):** 숫자가 작을수록 크고 중요함. `<h1>`은 문서 내 **단 한 번 사용** 권장.
* **단락 vs 줄바꿈:**
* **`<p>`:** 단락 구분. 블록 요소로 내용 앞뒤에 빈 줄 생성.
* **`<br>`:** 단순 줄바꿈. **닫는 태그가 없는 빈 태그**.
* **강조 태그 (의미 차이 중요):**
* **`<strong>`, `<em>`:** 중요한 내용임을 **의미적으로 강조** (굵게/기울임).
* **`<b>`, `<i>`:** 의미 없이 단순히 시각적으로만 굵게/기울임 표시.
* **기타 특수 태그:**
* **`<pre>`:** 소스의 공백과 줄바꿈을 **입력한 그대로** 표시.
* **`<mark>`:** 형광펜(하이라이트) 배경색 효과.
* **`<ruby>`/`<rt>`:** 동아시아 글자 상단에 주석(루비) 표시.
* **`<blockquote>`:** 인용문 (들여쓰기 적용). `<q>`는 한 줄 인용(따옴표 추가).
* **특수 문자 (Entities):** ` `(공백), `<`(<), `>`(>), `&`(&), `©`(ⓒ).
---
## 목록, 이미지 및 하이퍼링크
### 1. 목록(List) 태그
* **순서 없는 목록 (`<ul>`):** 불릿(기호) 표시. `li` 태그와 세트로 사용.
* **순서 있는 목록 (`<ol>`):** 숫자/알파벳 순서 표시.
* **`type`:** "a"(소문자), "I"(로마자 대문자) 등 기호 변경.
* **`start`:** 시작 번호 지정.
* **`reversed`:** 역순(카운트다운) 표시.
* **설명 목록 (`<dl>`):** 이름(`<dt>`)과 설명(`<dd>`) 세트.
### 2. 이미지 삽입 (`<img>`)
* **기본 형태:** `<img src="경로" alt="대체텍스트" width="너비">`.
* **필수 속성:**
* **`src`:** 이미지 파일의 위치(URL/경로).
* **`alt`:** **대체 텍스트**. 이미지 로딩 실패 시 표시되며, **웹 접근성(스크린 리더)** 및 SEO에 필수임.
* **경로 지정 규칙 (중요):**
* 같은 폴더: `src="cat.jpg"`.
* 하위 폴더: `src="img/cat.jpg"`.
* 상위 폴더: `src="../cat.jpg"`.
### 3. 하이퍼링크 (`<a>`)
* **기본 형태:** `<a href="주소" target="_blank">클릭할 내용</a>`.
* **주요 속성:**
* **`href`:** 이동할 경로. 빈 링크를 만들 때는 **`#`** 기호 사용.
* **`target="_blank"`:** 링크를 **새 탭/새 창**에서 열기.
* **응용 링크:**
* **앵커 링크:** `<h2 id="part1">` 지정 후 `<a href="#part1">`으로 내부 이동.
* **기능 링크:** `mailto:이메일`, `tel:전화번호`.
* **이미지 링크:** `<a>` 태그 내부에 `<img>` 태그를 삽입.
### 4. 멀티미디어 재생
* **`<audio>`, `<video>`:** 오디오/비디오 재생 태그.
* **공통 속성:** `controls`(컨트롤 바), `autoplay`(자동 재생), `loop`(무한 반복).
* **`<source>` 태그:** 브라우저별 호환성을 위해 여러 포맷의 파일을 지정할 때 사용.
---
## 표(Table) 구성 심화
### 1. 표의 기본 구조
* **`<table>`:** 표 전체 컨테이너.
* **`<tr>` (Table Row):** 가로 한 행.
* **`<th>` (Table Header):** 제목 셀. 글자가 **굵고 가운데 정렬**됨.
* **`<td>` (Table Data):** 일반 데이터 셀.
### 2. 셀 병합 속성 (시험 단골)
* **`colspan="n"`:** 가로 방향으로 n개의 칸을 합침 (열 병합).
* **`rowspan="n"`:** 세로 방향으로 n개의 칸을 합침 (행 병합).
### 3. 표의 구조화 (시맨틱 테이블)
* **`<caption>`:** 표의 제목 표시 (중앙 상단).
* **`<figure>` & `<figcaption>`:** 표나 이미지에 제목/설명을 붙일 때 사용.
* **영역 구분 태그:**
* **`<thead>`:** 표의 머리말 영역.
* **`<tbody>`:** 표의 본문 영역.
* **`<tfoot>`:** 표의 하단/요약 영역.
* *효과:* 시각 장애인의 이해를 돕고 자바스크립트 제어 시 유용함.
### 4. 열 스타일 지정 (`<colgroup>`)
* **`<col>`:** 한 열 전체에 스타일(너비, 배경색 등)을 한꺼번에 적용.
* **`<colgroup>`:** 여러 `<col>`을 그룹으로 묶음. 반드시 `<caption>` 뒤, `<tr>` 앞에 위치해야 함.
### 5. 스타일 속성
* `border="1"`: 테두리 표시 (최근에는 CSS 권장).
* `border-collapse: collapse;`: (CSS) 테두리 사이의 간격을 없애고 깔끔하게 합침.
---
## 폼(Form) 양식 및 핵심 구조
### 1. 폼 컨테이너 (`<form>`)
* **`action`:** 사용자가 입력한 데이터를 전송할 **서버의 주소**.
* **`method`:** 데이터 전송 방식.
* **`get`:** 주소창에 데이터가 노출됨. 검색어 등에 사용.
* **`post`:** 데이터를 숨겨서 전송. 로그인, 회원가입 등 보안 필수.
### 2. 다양한 `<input>` 타입
* **`text` / `password`:** 한 줄 입력창 / 입력 내용이 `*`로 숨겨지는 창.
* **`radio`:** 여러 옵션 중 **하나만 선택**. 그룹화를 위해 반드시 **동일한 `name`** 속성 필요.
* **`checkbox`:** 여러 옵션을 **중복 선택** 가능.
* **`email`:** 이메일 형식 자동 검사. 모바일에서 `@` 키패드가 바로 뜨도록 최적화됨.
* **기타:** `file`(파일 첨부), `color`(색상 선택), `date`(날짜), `range`(슬라이더).
### 3. 기타 폼 요소
* **`<textarea>`:** 여러 줄의 긴 텍스트 입력창 (`rows`, `cols` 속성으로 크기 조절).
* **`<select>` & `<option>`:** 드롭다운 선택 목록 생성.
* `<option selected>` 사용 시 기본값 설정 가능.
* **`<label>`:** 입력창 옆의 이름표. **`for` 속성과 `input`의 `id`를 연결**하면 글자만 클릭해도 입력창에 포커스가 감.
* **버튼 (`<button>`) 타입:** `submit`(전송), `reset`(초기화), `button`(범용).
### 4. 시맨틱 태그 및 영역 나누기
* **시맨틱 태그:** 태그만 보고도 웹 페이지의 구조를 알 수 있게 하는 의미 있는 태그.
* `<header>`, `<nav>`(메뉴), `<main>`, `<article>`(본문), `<aside>`(사이드바), `<footer>` 등.
* **Block vs Inline 요소:**
* **Block:** 줄바꿈이 일어나며 한 줄 전체 차지 (`div`, `h1~h6`, `p`, `ul`, `table` 등).
* **Inline:** 콘텐츠 너비만큼만 차지하며 같은 줄에 배치 (`span`, `a`, `img`, `b`, `strong` 등).
### 5. VS Code Emmet (단축키 팁)
* `ul>li*3`: `ul` 안에 `li` 3개 생성.
* `div>ul+ol`: `div` 자식으로 `ul`과 `ol`을 형제로 생성.
* `p{내용}`: 텍스트가 포함된 태그 생성.
* `ul>li*5^ol`: `li` 5개 생성 후 상위(`^`)로 올라와서 `ol` 생성.