[intro] HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그)

1. HTML 공부 시작 전 준비 사항
2. HTML 주요 학습 분야 ★
3. HTML 발전사 (HTML 4.01 → XHTML → HTML5.0)
4. XHTML 사용 주의사항
5. HTML 버전 발표 연도
6. HTML 태그 사용 빈도 순위
7. HTML 태그 성격 분류
8. HTML5 (사용중지・사용폐기) 태그
9. 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 주요 학습 분야 ★

 

1. 태그 (Tag) 의미 - 각 태그의 용법
2. 레이아웃 (Layout) - 페이지 구조
3. 시멘틱 태그 (Semantic Tags) - 의미 부여된 구조
4. 검색 엔진 최적화 (SEO) - 검색 로봇 선호 구조
5. 접근성 (Accessibility) - 장애인 배려 구조

 

HTML 발전사 (HTML 4.01 → XHTML → HTML5.0)

 
1.

브라우저간 동일 화면 구현 (=크로스 브라우징) 위한 웹표준 제정 결과, HTML5 탄생

2.

HTML5 전용 태그 경우 IE9  이상 브라우저에서만 지원되며,
현재 모든 브라우저가 100% 지원되는 건 아님. (현재도 발전 중.)

 

---

 

HTML 버전별 DTD (문서 타입 선언) 방법

http://www.homzzang.com/html/5

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 버전 발표 연도

 

• 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