• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 (문서 타입 선언) 방법


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



방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 1。 Йо 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-09-15 (수) 22:53 2년전
감사합니다
주소
no_profile 코딩코딩코딩 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-10-19 (화) 13:28 2년전
감사합니다!
주소
분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012