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 링크 삽입.
5가 증발했지만 그러려니 하기로 했다...
Form
사용자로부터 데이터를 수집하기 위한 일련의 요소를 제공함
Name attribute
폼 컨트롤에 대해 변수 이름을 제공함
폼 컨트롤 요소는 무조건 name 속성을 포함해야 한다
Naming your variables
각 변수는 고유한 이름을 가져야 한다. 즉, 두 변수에 같은 이름을 사용하며 안된다
변수 이름에는 공백을 사용하지 말아야 하며, _나-를 사용하는 것이 좋다
추가 - submit 버튼과 reset 버튼은 특별 기능을 수행하기에 데이터 수집과 관련이 없어서 name 속성이 필요가 없다
Form Controls
웹폼은 사용자가 정보를 입력하거나 옵션을 선택할 수 있도록 다양한 컨트롤을 제공한다
폼 컨트롤의 역할은 사용자로 부터 어떤 정보를 수집하는 것이다
Input element
대부분의 컨트롤은 <input>을 사용하여 폼에 추가된다
input은 empty element임
input요소의 기능, 모양은 type 속성의 값에 따라 달라진다
html5 기준 23가지 서로 다른 종류의 input 컨트롤이 존재한다
Text Entry Controls
(single line text field)
한 단어나 한 줄의 텍스트를 입력할 때 사용된다
기본 input 타입이다
주요 속성
name = 변수명
value = 미리 값을 넣어줌
maxlength = 최대 글자수
(multiline text entry field)
브라우저에 의해 여러줄로 표시되는 스크롤이 가능한 텍스트 입력 상자를 넣는다
<textarea> 요소 안에 작성한 내용은 폼이 브라우저에 표시될 때 텍스트 박스 안에 그대로 나타난다
하지만 placeholer속성을 사용하는것이 일반적이다
주요 속성
name = 변수명
placeholder = 필드를 어떻게 채우는지에 대한 간단한 힌트를 제공한다
maxlength = 입력할 수 있는 최대 문자수를 제한한다
Specialized text entry fields
(password entry field)
텍스트 입력 필드와 거의 같이 작동하지만, 입력한 문자가 *과 같이 문자로 가려서 보이지 않게 한다
하지만, 폼 자체가 암호화 된것은 아니기에, 진짜 보안 수단으로 간주하면 안된다
Submit and Reset buttons
submit 버튼을 클릭시 수집된 폼 데이터가 즉시 서버로 전송, 처리된다
reset 버튼을 클릭하면 폼 컨트롤들이 폼이 처음 로드되었을 때의 상태로 돌아간다
기본 label은 submit, reset이지만 value를 추가하면 바꿀 수 있다
Radio buttons
그룹 안에서 오직 하나의 옵션만 선택할 수 있을때 적합함
name속성이 필수이며, 여러개의 라디오 버튼을 하나의 세트로 묶어야 한다
여러 라디오 버튼 입력에 name이 같으면 서로 배타적 선택 그룹이 된다
Checkbox buttons
체크박스들이 그룹으로 묶여 있을 때는 원하는 만큼, 혹은 적게 선택이 가능하다
보통 하나 이상의 선택이 허용되는 목록에 사용된다
radio와 같이 같은 name 값을 할당하여 그룹을 만든다
폼을 제출할때 checked된 모든 값이 서버에 전송된다
Drop-down menus
<select>요소는 size속성이 지정되지 않을시, 1일시 기본적으로 drop down menu로 표시된다
하나의 항목만 선택할 수 있다
선택된 <option> 요소의 내용이 서버로 전송되는 데이터가 된다
다른 값을 서버로 보내고 싶으면 value속성을 이용하여 표시되는 텍스트와 다른 값을 지정할 수 있다
Scrolling menus
메뉴를 스크롤 가능한 목록으로 하고 싶다면 size 속성을 사용하여 보이게 하고 싶은 줄 수를 지정하면 된다
multiple 속성을 추가하면 사용자가 스크롤 리스트에서 여러 개를 선택할 수 있게 된다
selected 속성을 <option>에 넣으면 해당 항목을 메뉴 컨트롤의 기본 선택값으로 사용할 수 있다
Grouping options
옵션들을 개념적으로 묶어서 그룹을 만들 수 있다
label 속성이 필수이며, 이는 그룹의 제목을 제공한다
File selection coltrol
사용자가 자신의 하드 드라이브로 부터 문서를 선택하여 폼 데이터와 같이 제출할 수 있다
파인 선택 요소가 있을 경우 enctype를 multipart/form-data로 설정해야 하며, POST method를 사용해야 한다
Hidden control
사용자로부터 입력받은 것이 아닌 정보를 폼 처리 애플리케이션으로 전송해야 할 때 사용한다
폼이 제출될 때 데이터는 전송되지만, 브라우저에는 폼이 표시될때 보이지 않는다
Date and time controls
html5는 6가지 새로운 입력 타입이 도입됨
Numerical inputs
number과 range입력 타입은 숫자 데이터를 수집하는데 사용됨
min, max속성은 최소, 최대값을 지정함
step는 숫자 입력에서 증가 단위를 개발자가 정할 수 있게 한다
Color selector
색상 값을 시각적으로 선택할 수 있는 팝업 색상 선택기를 생성한다
색상값은 16진수 RGB값으로 제공된다
Form Accessibility Features
label, fieldset, legend 폼 요소들은 폼 구성 요소들 사이의 시맨틱 연결을 명확하게 만들어줌으로써 접근성(accessibility)을 향상시킨다
의미적으로 풍부해질 뿐 아니라, 보조 장치에서 더 좋게 작용한다
Label
설명 텍스트를 해당 폼 필드와 연결해준다
음성 기반 브라우저를 사용하는 사용자에게 중요한 문맥을 제공한다
각각의 label요소는 단 하나의 폼 컨트롤에 연결된다
사용법은
1. 암시적 연결방법 implicit association method
label 요소 안에 컨트롤과 설명 텍스트를 함께 중첩시긴다
2. 명시적 연결 방법 explicit association method
label의 for속성과 연결할 컨트롤의 id를 일치시킨다
for 속성은 label이 어떤 컨트롤을 위한 것인지를 지정한다
소스코드 상에서 설명 텍스트 바로 옆에 위치하지 않을때 유용하다
암시적 연결 방법 예시는 각 체크박스와 그에 관련된 텍스트 설명을 각각 레이블에 할당한다
Fieldset and legend
fieldset element는 폼 컨트롤들을 논리적으로 하나의 그룹으로 묶는 것을 나타낸다
fieldset 안에 legned를 넣을 수 있는데, 이는 그 그룹의 제목을 나타낸다
'공부 > WebPage' 카테고리의 다른 글
| Web page html 공부 정리 7: HTML5와 멀티미디어 (0) | 2025.04.27 |
|---|---|
| Web page html 공부 정리 4: 테이블과 폼 기본 (0) | 2025.04.26 |
| 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 |
