• Q&A
  • 회원가입
  • 로그인

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

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



 


2021-09-15 (수) 22:53 2일전
감사합니다
주소
찾아주셔서 감사합니다. Since 2012