23.07.14 ver
1. HTML
웹 개발은 항상 HTML부터 시작한다.
■ HTML이란?
- 웹 문서를 만드는 언어
- 웹 사이트 표시를 위해 개발된 마크업 언어
- 웹컨텐츠의 구조와 의미를 정의한다.
- HyperText Markup Language
- 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것
하이퍼텍스트(HyperText) : 서로 링크로 연결된 문서
마크업(Markup) : 표시한다(구조와 의미).
즉, HTML에는 서로 연결한다는 의미가 포함되어 있다. 다시 말해, 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미한다.
HyperText
하이퍼링크(참조)를 통해 한 문서에서 다른 문서로 즉시 접근 가능한 텍스트
Markup Language
- 태그로 구성된 구조적 언어
▶ 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 꼬리표를 붙어야 한다. 이러한 꼬리표를 태그(tag)라고 한다.
2. HTML의 역사
- 1991년 HTML v1
- 12개의 태그들만 존재했다. - 1994년 W3C 창립 (World Wide Web Consortium)
- HTML 과 CSS 웹 표준과 가이드라인 개발을 수행 - 1995년 HTML v2
- 1997년 HTML v3, v5
- 2008년 HTML 5 초안
- 2014년 HTML 5 표준안 정립
2008년 HTML5 를 기점으로 나뉜다고 할 수 있다.
Why?
1) div 남용 x, 의미 있는 블럭 요소들 추가
- header, nav, article, section, aside, footer
2) 멀티미디어 요소
- ActiveX 플러스인 필요x
- audio, video, canvas
3) 불필요한 태그들 제거
- acronym, applet, dir, isindex... 등
4) 기타 태그 추가
- command, detalist, details, embed, figure.. 등
3. HTML 문서의 기본 구조
HTML 문서
HTML 요소(elements)들로 구성된다. (중첩요소 가능)
정해진 형식에 맞추어 내용을 입력해야 한다.
HTML 요소?
- 태그 한쌍(+속성)으로 이루어진 것들
- 컨텐츠가 없는 태그도 있다. ex) img
1. <!DOCTYPE html>
- 문서 타입(Document Type)
- 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
2. <html> ~ </html>
- 최상위 root 요소
- lang 속성 : 문서에서 사용하는 주언어 language 명시
- 웹 문서의 시작과 끝을 나타내는 태그
- 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시한다.
3. <head> ~ </head>
- 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분
- 책 표지와 같다.
구성
- 메타데이터(웹 사이트에 대한 설명 + UI 상으로 보여지지 않는 정보들)
- SEO(타이틀, 설명, 저자)
- CSS 스타일 / JS 링크
<meta> 태그
흔히 메타 정보라고 하면 '데이터에 관한 데이터'를 뜻한다. 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용. 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것이다. 웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8이라는 문자 세트를 사용한다고 웹 브라우저에게 알려줘야 한다.
1. charset(문자열 세트) : UTF-8 / 글자 깨짐 방지
<meta charset = "UTF-8">
2. IE 브라우저를 위한 설정
- 최신 표준 모드로 보여주는 코드
- lE9 주소바에 호환성 버튼 안 보이게
- Edge 렌더링 엔진 사용
<meta http-equiv="X-UA-Compatible" contene="IE=edge" />
3. 사용자의 디바이스 (viewport) 크기에 맞게 컨텐츠 표기
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta> 태그 다양하게 사용하기
1. 웹 문서의 키워드
<meta name="keywords" content="html의 구조">
2. 웹 문서의 설명
<meta name="description" content="html의 구조를 알아봅시다">
3. 웹 문서의 소유자나 제작자
<meta name="author" content="YT>
<title> 태그
<head> 태그 안에서 가장 중요한 태그이다. 문서 제목을 나타내는 태그이다.
<title>HTML 기본 문서</title>
4. <body> ~ </body>
- 실제로 웹 브라우저 화면에 나타나는 내용
- HTML 태그는 대부분 <body> 태그 안에 들어간다.
4. 질문
Q. HTML5를 왜 HTML로 부르게 되었을까?
2014년 11월에 발표된 HTML 표준 규약은 이전 버전과 구별하기 위해 한동안 HTML5라고 불렸다. 그러나 최근 대부분의 웹 브라우저에서 HTML5를 지원하게 되면서 숫자 5를 빼고 그냥 HTML이라고 부른다.
Q. <html lang = "ko">의 의미는 무엇인가?
<html> 태그에서는 lang 속성으로 문서에서 사용할 언어를 지정할 수 있다. 그렇다면 언어를 왜 표시할까? 그 이유는 검색사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문이다. <html lang = "ko">일 경우, 우선적으로 '한국어로 된 문서'를 검색한다. 또한 화면 낭동기에서 웹 문서를 소리 내어 읽어 줄 때 해당 언어에 맞추어 발음이나 억양, 목소리 등을 다르게 할 수 있다.
참고 도서 & 자료
- 웹 표준의 정석 http://aladin.kr/p/Fyssu
- 포트폴리오 웹사이트 클론 코딩 https://academy.dream-coding.com/courses/portfolio
'프론트엔드 > HTML 공부(검토 후 삭제예정)' 카테고리의 다른 글
| 2. 마크업 & 태그 & link (0) | 2023.07.14 |
|---|---|
| HTML - 꺾쇠 기호를 넣는 올바른 방법 (0) | 2023.06.17 |
| 2. 시맨틱 태그 (0) | 2023.03.07 |
댓글