목차
- HTML 공부 시작 전 준비 사항
- HTML 주요 학습 분야 ★
- HTML 발전사 (HTML 4.01 → XHTML → HTML5.0)
- XHTML 사용 주의사항
- HTML 버전 발표 연도
- HTML 태그 사용 빈도 순위
- HTML 태그 성격 분류
- HTML5 (사용중지・사용폐기) 태그
- HTML 관련 주소
※ HTML : 홈페이지 기본 (구조 + 내용) 구성 언어.
※ HTML : Hyper Text Markup Language
※ 홈페이지 (박스・틀 + 분류 + 정렬) 세분화 분석 연습.
※ 세부 단위로 쪼개면 React성능 ↑.
※ 각 태그 용도・성질 파악. (예) (박스 vs 아이템) , (블럭 vs 인라인)
※ 각 요소(= 태그)에 대한 브라우저 지원 확인 후 사용.
HTML 공부 시작 전 준비 사항
1. (필수)
에디터 설치 바람.
https://homzzang.com/b/free-1572
2. (선택)
코드 암기 위해 에디터에서 제공되는 자동 완성 기능 해제.
(예) 에디트플러스 https://homzzang.com/b/free-1578
3. (선택)
들여쓰기 설정 : 1 Tab 키 = 4 spacebar 키
(예) 에디트플러스 https://homzzang.com/b/free-1579
PS.
HTML・CSS・JS 결과물 바로 확인 웹툴 ★
https://homzzang.com/b/free-4909
HTML 주요 학습 분야 ★
- 태그 (Tag) 의미 - 각 태그의 용법
- 레이아웃 (Layout) - 페이지 구조
- 시멘틱 태그 (Semantic Tags) - 의미 부여된 구조
- 검색 엔진 최적화 (SEO) - 검색 로봇 선호 구조
- 접근성 (Accessibility) - 장애인 배려 구조
HTML 발전사 (HTML 4.01 → XHTML → HTML5.0)
1.
브라우저간 동일 화면 구현 (=크로스 브라우징) 위한 웹표준 제정 결과, HTML5 탄생
2.
HTML5 전용 태그 경우 IE9 이상 브라우저에서만 지원되며,
현재 모든 브라우저가 100% 지원되는 건 아님. (현재도 발전 중.)
HTML 버전별 DTD (문서 타입 선언) 방법
cf.
XHTML 사용 주의사항
※ 현재는 HTML5 시대이니, 아래 내용은 참고만.
1.
종료 태그 없는 단일 태그도 반드시 닫는 태그 ( / ) 기재.
(예) <BR/>, <IMG .... />
2.
속성값에 반드시 따옴표 추가.
(예) <img src="http:// ~ " alt="홈짱닷컴 Homzzang.com">
3.
모든 요소 및 속성은 반드시 소문자 사용.
4.
이미지 태그에 alt 속성 반드시 입력.
<img src="파일주소" alt="대체문구" />
5.
속성명과 속성값 명칭이 같더라도 생략 불가.
<input multiple="multiple" />
6.
.......... 그외도 주의할 게 많은데,
HTML5에서는 많은 사항이 유연하게 변함.
HTML 버전 발표 연도
- 버전 - 년도
- HTML - 1991
- HTML 2.0 - 1995
- HTML 3.2 - 1997
- HTML 4.01 - 1999
- XHTML - 2000
- HTML5 - 2014 ...현재 진행형
HTML 태그 사용 빈도 순위
HTML 태그 성격 분류
[박스] - 아이템 분류 역할.
- article
- aside
- div
- footer
- form
- header
- main
- nav
- ol
- section
- span
- ul
- ...
[아이템]
- a
- audio
- button
- canvas
- img
- input
- label
- li
- map
- table
- video
- ...
HTML5 (사용중지・사용폐기) 태그
- acronym
- applet
- basefont
- bgsound
- big
- blink
- center
- dir
- font
- frame
- frameset
- hgroup
- isindex
- listing
- marquee
- multicol
- nextid
- nobr
- noembed
- noframes
- plaintext
- spacer
- strike
- tt
- xmp
https://html.spec.whatwg.org/multipage/obsolete.html
PS.
HTML 관련 주소
mdn (HTML) 강의
https://developer.mozilla.org/en-US/docs/Web/HTML (영어)
https://developer.mozilla.org/ko/docs/Web/HTML (한국어)
PS. mdn (HTML 요소 종류 : HTML elements reference)
PS. mdn (웹문서/웹사이트 구조 분석)
HTML 태그 유효서 검사기
https://validator.w3.org/
W3 공식 홈페이지
https://www.w3.org/
추천 구글링 키워드 (※ 저작권 꼭 확인 후 사용.)
https://www.google.com/search?q=html+free+template