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 링크 삽입.
Table Markup / Form
How Table are used
html table = 엑셀 은 행과 열로 정렬된 데이터를 웹페이지에 추가하기 위해 만들어짐
table cell안에는 숫자, 텍스트, 이미지, 멀티미디어 객체까지 어떤 종류든 넣을 수 있다
<table></table>로 공간을 만든 뒤, tr로 로 행을, td로 열을 만든다
행 = row 열 = column
Table Headers
뒤따르는 행이나 열의 셀들에 대한 정보다 맥락을 제공함
th element는 대체 브라우징 장치에서 다르게 처리될 수 있음
ex - 각 데이터 셀 앞에 해더 내용을 읽어줄 수 있음
Spanning Cells = 셀 병합
하나의 셀을 늘려서 여러 행이나 열을 덮도록 만드는 것을 말한다
복잡한 테이블 구조를 만들 수 있지만, 마크업을 관리하는 것이 더 복잡해지는 부작용이 있다
colspan, rowspan 속성을 사용한다
1. colspan
행을 병합한다
2. rowspan
열을 병합한다
Table Accessibility
시각 장애가 있는 방문자들이 사이트 콘텐츠를 어떻게 사용할지는 염두하는것
Describing Table Content
caption element를 사용해서 테이블 옆에 표시되는 제목이나 간단한 설명을 추가할 수 있다
caption은 table요소 안에서 가장 먼저 나와야 한다
Connectiing cells and headers
어떤 헤어가 어떤 셀이 적용되는지 알기 어려울시
Scope
테이블에서 헤더 = th가 어떤 셀들과 연결되어 있는지 명확하게 설명하는 역할을 한다
scope="row" = 같은 행의 셀
scope="col" = 같은 열에 있는 셀
Table Head, Body, and Foot
<thead><tbody><tfoot> element는 테이블에 더 큰 semantic meaning을 부여한다
이 세가지 element는 table의 주요 콘텐츠, 처음과 마지막 행을 구별하는데 도움을 준다
이러한 요소는 스크린 리더를 사용하는 사람들에게 테이블 구조를 명확하게 보여주며, css를 사용할때 이 부분읃릉 다른 방식으로 스타일링 할 수 있게 해준다
Form
상호작용을 할 수 있게 해주는 element
사용자로부터 데이터를 수집하기 위한 여러 요소를 제공한다
How form work
두 가지 구성 요소가 있음
1. html 마크업을 사용해서 페이지에 표시되는 폼 자체
버튼, 입력 필드, 드롭다운 메뉴등, 이를 전부 폼 컨트롤이라고 부름
2. 서버에 있는 애플리케이션 또는 스크립트
폼이 수집한 정보를 처리하고, 그에 맞는 응답을 반환함
작동 순서
1. 방문자가 웹페이지 접속
2. 사용자가 form에 자신의 데이터 입력, 전송
3. 브라우저에서 입력된 정보를 인코딩, 서버에 있는 웹 애플리케이션이 전송
4. 웹 애플리케이션이 정보를 받아서 처리
5. 웹 애플리케이션이 응답 생성
6. 그 응답이 클라이언트의 브라우저에 의해서 렌더링
Form element
form의 모든 콘텐츠를 감싸는 컨테이너
input, button을 포함할 수 있음
block = h1, p, ul 등 도 포함할 수 있다
하지만 form에 다른 form을 포함하면 안된다
Action attribute
form을 처리할 애플리케이션이나 스크립트의 위치 = URL을 제공함
Methot attribute
정보를 서버에 어떻게 전송할지를 지정함
인코딩된 데이터를 서버로 보내는 방법은 POST, GET 단 두가지 뿐임
method속성은 선택사항이며, 생략시 GET이 defult로 들어감
1. GET method
인코딩된 폼 데이터가 바로 URL에 추가되서 들어가는 방식
?가 URL본문과 뒤따르는 데이터 사이를 구분함
보안성이 약하기에 주의가 필요함
= 개인정보나, 금융정보, 파일 업로드 같은 민감한 데이터 전송에 적합하지 않음
2. POST method
이 요청은 서버만 볼 수 있기에, 신용카드, 개인 정보처럼 보안이 필요한 정보를 전송할 때 가장 적합하다
길이가 긴 텍스트 입력처럼 많은 데이터를 전송할때도 POST를 사용하는 것이 바람직 하다(GET처럼 입력 제한이 없기 때문임)
'공부 > WebPage' 카테고리의 다른 글
| Web page html 공부 정리 7: HTML5와 멀티미디어 (0) | 2025.04.27 |
|---|---|
| Web page html 공부 정리 6: 폼 심화 (1) | 2025.04.27 |
| Web page html 공부 정리 3: 이미지, 링크, 페이지 구성 (0) | 2025.04.26 |
| Web page html 공부 정리 2: HTML 기초 (0) | 2025.04.26 |
| Web page html 공부 정리 1: 인터넷과 웹 기초 (0) | 2025.04.26 |
