1: 인터넷과 웹 기초
- 인터넷 vs 웹: 인터넷은 네트워크, 웹은 그 위에서 동작하는 데이터 공유 시스템.
- 클라이언트/서버 구조: 서버는 요청에 따라 자료 제공, 클라이언트는 요청을 보냄.
- 웹 주소(URL) 구성: 프로토콜, 도메인, 문서 경로.
- HTTP 프로토콜과 상태 코드: 요청-응답 사이클, 200 OK, 404 Not Found 등.
- IP, DHCP, DNS 설명.
2: HTML 기초
- HTML 문서 구조: <!DOCTYPE html>, <html>, <head>, <body>.
- 요소(Element)와 속성(Attribute): 모든 텍스트는 태그로 감싸야 함.
- 문단, 제목, 목록(unordered, ordered, description) 작성 방법.
- DOM(Document Object Model) 이해.
3: 이미지, 링크, 페이지 구성
- 이미지 삽입: <img> 태그 (필수 속성: src, alt).
- 링크 생성: <a> 태그 (href 속성).
- 페이지 레이아웃: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.
- 인라인 요소와 블록 요소 구분.
- 특수문자(escape characters) 및 <figure> 사용.
4: 테이블과 폼 기본
- 테이블 구조: <table>, <tr>, <td>, <th>.
- 셀 병합: colspan, rowspan 사용.
- 테이블 접근성 향상: caption, scope, <thead>, <tbody>, <tfoot>.
- 폼 기본: <form>, <input>, action, method (GET/POST 방식).
6: 폼 심화
- 폼 컨트롤 종류: 텍스트 입력, 비밀번호 입력, 라디오 버튼, 체크박스, 드롭다운 메뉴, 파일 업로드.
- HTML5 폼 입력 타입: 이메일, URL, 전화번호, 날짜/시간, 숫자 입력 필드.
- 접근성 향상: <label>, <fieldset>, <legend> 사용.
7: HTML5와 멀티미디어
- HTML5 주요 특징:
- 플러그인 없이 오디오, 비디오 지원
- <canvas> API로 그래픽 처리
- 드래그 앤 드롭 지원
- 비디오/오디오 포맷:
- 비디오: MPEG-4(.mp4), Ogg Theora(.ogv)
- 오디오: MP3(.mp3), WAV(.wav), Ogg Vorbis(.ogg)
- 비디오/오디오 삽입 방법:
- <video>, <audio> 태그 사용
- controls, autoplay, poster, 여러 소스 지원
- 외부 동영상 삽입: YouTube 링크 삽입.
HTML Element
요소는 텍스트 소스 안에서 태그 = <>로 식별됨
element는 content와 markup = 시작 태그, 종료 태그를 포함함
일부 요소는 정의상 비어있는 요소임 = img태그
Basic Document Structure
1. 문서 유형 선언
<!DOCTYPE html>
이 문서가 HTML5 문서임을 식별함
2. html 요소 또는 root 요소
<html lang="en"> ~~~ </html>
문서 안의 모든 요소를 포함함
3. head element
4. meta element
문서 자체 정보, 문자 인코딩 정보를 제공함
5. title element
문서 제목을 정의함
6. body element
브라우저 창에 표시될 정보를 포함한다
Identify Text Elements
HTML의 목적은 콘텐츠에 의미와 구조를 부여하는것
콘텐츠가 어떻게 보여야 하는지를 지시하는 것이 목적이 아니다
콘텐츠에 마크업을 적용 할때 해당 콘텐츠를 가장 의미있게 설명할 수 있는 HTML요소를 선택하는 것이다
이것을 시멘틱 마크업=semantic mark up이라고 부른다
마크업은 문서에 구조를 부여한다
요소들이 순서대로 배치되거나 중첩되면서 요소들간의 관계가 형성된다
기술 용어로 DOM = document object model이라고 부른다
Block and inline elements
브라우저는 블록 요소를 작은 직사각형 취급하며 페이지 위에 차곡차곡 쌓이는 것처럼 보여준다
각 블록 요소는 새로운 줄에서 시작하고, 보통 그 요소 위아래에 약간의 여백이 기본적으로 추가된다.
보통 element 사이에 약간의 여백이 기본적으로 추가된다
인라인 요소는 새로운 줄이 아닌, 이어서 나온다(em element)
Empty elements
일부 요소들은 단순 지시로 사용되기에, 텍스트 콘텐츠를 가지지 않음
이러한 요소를 empty element라고 함
img가 이 element의 예시임
meta도 empty element임
Attributes
요소를 명확히 하거나, 수정하는 지시사항임
Paragraphs
텍스트 문서에서 가장 기본적인 element
텍스트, 이미지, 다른 inline element를 포함할 수 있지만, heading, list, sectioning element, 또는 기본적으로 블록 형식으로 표시되는 요소들은 포함할 수 없음
Headings
제목에는 6단계가 있으며, h1 ~ h6꺼지 있음
콘텐츠에 제목을 추가하면, 브라우저는 이를 이용해 페이지의 문서 개요를 생성한다
스크린 리더와 같은 보조 읽기 장치들은 이 문서 개요를 활용하여 사용자가 페이지를 빠르게 스캔하고 탐색할 수 있도록 돕는다. 또한, 검색 엔진들도 제목 수준을 그들의 알고리즘 일부로 참고한다.
가장 좋은 방법은 h1부터 숫자 순서대로 내려가며, 논리적은 문서 구조와 개요을 만드는 것임
List
HTML은 세 가지 종류의 목록을 마크업 할 수 있는 요소를 제공한다
1. Unordered lists
특정 순서 없이 나열된 항목들의 집합임
2. Ordered lists
항목들의 순서가 중요한 목록임
3. Description lists
이름=name과 값=value의 쌍으로 구성된 목록임
Unordered lists
ul은 각 항목 앞에 불릿 기호 (•) 를 표시함
CSS를 사용하면 이를 변경 가능
순서 없는 목록(ul) 안에는 반드시 하나 이상의 목록 항목(li)만 들어간다
다른 요소를 넣을 수 없고, 태그로 감싸지지 않은 텍스트가 있어도 안된다
Ordered lists
순서가 중요한 항목들을 위해 사용됨
브라우저는 순서 있는 목록 항목 앞에 자동으로 숫자를 추가해준다
직접 번호를 매길 필요가 없다
Description lists
용어와 그에대한 설명을 함께 나열하는 목록이다
dl = 설명 목록 전체를 정의
dt = 용어, 이름을 정의
dd = 각 용어에 대한 설명 정의
Validation Your Documents
현재 사용중인 html 버전의 규칙을 지켰는지 마크업을 검사하는 것
오류가 없다면 valid라고 한다
유효한 문서는 더 일관성있게 표시되며 더 빠르게 렌더링 된다
유효성 검사
모든 텍스트는 element에 할당되어야 한다
tag로 감싸지지 않은 텍스트는 naked text 또는 anonymous text라고 불리며, 이런 텍스트가 있으면 문서가 유효하지 않게 된다
'공부 > WebPage' 카테고리의 다른 글
| Web page html 공부 정리 6: 폼 심화 (1) | 2025.04.27 |
|---|---|
| Web page html 공부 정리 4: 테이블과 폼 기본 (0) | 2025.04.26 |
| Web page html 공부 정리 3: 이미지, 링크, 페이지 구성 (0) | 2025.04.26 |
| Web page html 공부 정리 1: 인터넷과 웹 기초 (0) | 2025.04.26 |
| HTML 요소 공부 (0) | 2025.04.14 |
