매니의 퍼블리셔 만들기 프로젝트
part1 html편
0. 들어가며
HTML이란?
웹을 만들 때 가장 기초가 되는 파일이다.
HTML (Hypertext Markup Language)
- Hypertext : 문서들이 링크로 연결되어 있다는 뜻
- Markup :태그를 사용해 웹페이지 정보를 알려줌
- Language는 사람과 웹 브라우저가 모두 이해할 수 있는 언어
HTML5
HTML5는 5번째 버전의 html로 월드 와이드 웹(World Wide Web)의 핵심 마크업 언어이다. W3C가 발표하는 최신 버전인 HTML5는 2014년 10월 28일 완전히 표준화되었다. HTML4에서 사라진 태그도있고 추가된 태그도 있다. 현재 HTML5.2 표준안을 확정했으며 전 세계 기준이 되는 '국제 웹 표준'을 만드는걸 목표로 한다.
(출처 : 나무위키 html, w3c 문서 http://namu.wik)
- W3C? ( https://www.w3.org/ )W3C는 웹 표준을 정의하고 발전시키는 조직으로, 이 기구의 창립자이자 의장은 HTML 창시자인 팀 버너스 리이다. W3C 여기서 W3 는 3개의 W (www : 인터넷 주소 맨 앞에 쓰이는 것도 같은 의미이다) 즉 월드 와이드 웹을 뜻한다. 표준안과 변경된 내용은 w3c사이트에서 확인이 가능하다.
- 역사HTML4.01 > XML기반의 XHTML > HTML5 순으로 변경되었다. XML의 문법이 까다로워 정착되지 못하고 다시 HTML로 회귀하였다.
HTML 태그
html는 100개가 넘는 태그들이 있다. 이를 다 외워서 쓰기보단 자주 쓰는 몇가지만 외우고 어떤 기능의 태그가 존재하는지 정도만 알고있다면 큰 문제가 되지 않는다. html5에는 html4에서 변경된 내용이 있으니 html을 독학하는 경우에는 반드시 14년 이후의 자료, 또는 w3c 공식 사이트를 이용하는 편이 좋다.
(출처 : https://caniuse.com/ )
하지만 아직도 브라우저마다 지원하는 태그가 다르다. (html,css,javascript 포함) 이는 각종 속성을 브라우저에서 지원하는지 지원여부를 체크하는 caniuse라는 사이트에서 확인이 가능하다. Can I Use? 말 그대로 내가 이걸 사용할 수 있는지를 검색해 볼 수 있다.
- 초록 : 지원
- 빨강 : 지원하지 않음
- 노랑 : 부분지원
- 회색 : 지원여부 알 수 없음
https://caniuse.com/ - 사이트 바로가기
HTML 시작
<!DOCTYPE html>
(출처 : w3c사이트 validator.w3.org/unicorn/)
html 시작이 되는 독타입 선언. 가장 바깥쪽에 위치한다. 어떤 표준안을 쓰는지 웹 브라우저가 알 수 있도록 선언해주는 태그로 꼭 필요하지는 않다고 하지만, 쓰는것을 권장한다. 쓰지 않으면 웹상에서는 문제없이 나오지만 웹표준성 검사에는 통과하지 못한다.
(출처 : 큐넷에서 제공되는 웹디자인기능사 실기 공개문제 www.q-net.or.kr)
웹디자인기능사 실기 시험에서도 이를 지키지 않으면 안된다. "웹 페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며" 라고 나와있어 꼭 이를 준수하여야 한다. 선언 독타입은 모두 대문자 또는 모두 소문자로 작성해야 한다.
(DOCTYPE / doctype /Doctype 은 권장하지 않음)
웹표준 검사 사이트에서 코드를 확인해 볼 수 있다.
(출처 : w3c사이트 validator.w3.org/unicorn/)
- url : 웹상에 올린경우 주소를 작성(권장)
- 파일 업로드 : 로컬에서 작업한 코드 파일을 업로드(url에서 문제없는 파일도 경고가 뜰 수 있다. 작업 후 최종적으로 url로 확인 권장)
- 직접입력 : 코드를 복사해서 붙여넣으면 된다. 파일업로드와 같은 문제점이 있을 수 있다.
'공부 > Html & Css' 카테고리의 다른 글
| css기초, css 이론과 글자꾸미기 (0) | 2022.03.12 |
|---|---|
| html이론 3, 구문 b/strong 와 i/em의 차이 - 웹접근성 (0) | 2022.03.12 |
| html 이론2 (구조, 필수태그) ~매니의 퍼블리셔 만들기 프로젝트~ (0) | 2022.03.04 |
| 1줄, 2줄이상 말줄임표 css 코드 (0) | 2021.12.16 |
| html 태그 block , inline, inline-block (0) | 2020.09.03 |
댓글