[기초] HTML과 HTML5

HTML이란?

HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 컴퓨터 언어입니다.

• HT - HyperText : 문서와 문서를 연결 
• M - Markup : 마크업, 태그 
• L - Language : 언어 

즉, HTML이란 문서와 문서로 연결된 태그 언어를 뜻하는 말입니다.

태그(TAG)

태그는 정보를 정의하는 방식을 의미합니다.

• 태그는 열린태그와 닫는태그가 있습니다. 
• 닫는 태그에는 "/"가 들어갑니다. 
• 닫는 태그가 필요 없는 태그도 있습니다. (ex : img) 
• HTML5에서는 "/"의 생략이 가능합니다.

블록 요소/인라인 요소

블록 요소는 박스, 인라인 요소는 텍스트를 의미합니다.

• 블록 엘리먼트(Block Element)
• 독립된 박스 영역으로, 한 줄에 하나의 블록 요소만 표현할 수 있습니다.
• 블록 요소에는 블록 요소와 인라인 요소를 모두 표현할 수 있습니다.
• 인라인 엘리먼트(Inline Element)
• 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현할 수 있습니다.
• 인라인 요소에는 블록 요소가 포함될 수 없지만, 인라인 요소는 포함될 수 있습니다.

HTML5에서 새로 생긴 태그

canvas

웹 상에서 그래픽 표시, 자바스크립트 및 API와 같이 사용해서 다양한 애플리케이션을 만들 수 있다.

dialog

대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 <dt>에 말하는 사람 <dd>에 내용을 작성한다.

figure

이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며 페이지 옆이나 참조용 별도 페이지등에 넣어도 크게 상관없는 내용을 지정할 수 있다.

mark

형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 <em>, <strong>과는 다른 개념이다. 시각적 주목효과만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.

time

날짜와 시간을 기계가 이해할 수 있게 명확하게 인코딩하면서 사람도 이해할 수 있게 노출시킨다.

YYYY-MM-DD(날짜) / HH:MM:SS(24시의 형태) 로 표기하고 동시에 나타낼 경우, 2013-01-30T12:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.

datetime 속성은 기계가 이해하는 부분이고 pubdate 속성은 문서의 발행일을 표기할때 사용한다. 한 문단에 여러개의 날짜와 시간이 존재한다면 발행일을 구분하기 어려우므로 pubdate를 사용하는 것이 좋다.

meter

통화, 인구, 점수, 치수와 같은 숫자들과 같이 특정 범위내에 있는 숫자 값을 시스템에 인지시킬 필요가 있을때 사용한다.

value, title, high, low, max, min, optimum의 속성이 있음.

progress

다운로드 진척 상태를 알려줄때 유용하게 사용할수 있는 태그로 최대값 max 속성과 현재 다운로드한 값 value 속성을 가진다. 이는 자바스크립트와 연동하여 동적으로 다운로드 상태를 제공할 수 있다.

ruby

한자, 일어등의 발음등을 표기하기위해 사용하며 <rp>와 <rt>를 사용한다.5.5pt의 작은 글씨를 사용해 첨언을 넣는 영국 출판문화에서 기원한 단어.

details

HTML 문서에서 추가적인 설명을 붙일때 사용하며 워드프로세서의 '각주' 역할과 비슷하다. <summary> 태그와 함께 사용되며 기본적으로 <details>는 '감춤'상태이다. summary 부분만 보이도록 되어있고 그 외 콘텐츠는 기본적으로 감추어져 있는 것이다.

details 콘텐츠를 모두 펼쳐 놓기 위해서 'open' 속성을 사용한다.

datagrid

기초 자료를 HTML 태그로부터 가져와 자바스크립트 등을 이용해서 동적으로 정보를 갱신할 수 있다. multiple 속성을 사용하여 한번에 여러 행을 컨트롤할 수도 있다.

menu

폼 컨트롤 목록이나 명령어 목록을 만들때 사용, HTML5에서 재정의 되었음. <command> 태그는 라디오 버튼이나 체크박스, 버튼을 이용해서 명령어 박스를 만들수 있게 해주며 반드시 <menu> 태그안에 포함되어야 한다.

속성1) type="", [toolbar, list(기본값), context]

속성2) label / 메뉴에 대해서 알려줄 라벨.

commend 태그의 속성

* type / label / disabled / icon / radiogroup / checked

HTML5에서 의미가 변한 속성

• s : 더이상 옳지 않은 내용을 나타내는 데에 쓴다. 별도의 CSS 없이 쓰면 브라우저에서는 취소선을 긋는 것이 기본값이다.
• u : 양식상 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 철자가 틀린 단어나, 중국어로 번역된 고유 명사 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 밑줄을 긋는 것이 기본값이다.
• i : 어떠한 이유로 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 전문 용어, 외국어의 구절 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 이탤릭체로 표기하는 것이 기본값이다. 더 적절한 시맨틱 태그가 있을 경우 그쪽을 쓴다.
• hr : 원래 단순한 가로줄을 나타내는 태그였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다.
• b: 인쇄상 강조 표현을 가진 텍스트 뿐만 아니라 제품 소개 내 제품명, 문서 키워드 같은 아주 특별한 중요도는 갖지 않으나 일반적인 강조의 목적에 사용함.
• strong: 강조보다 더 중요한 정보를 제공할 때 사용함.

HTML5에서 없어진 태그

• font : CSS가 있기 때문에 폐기되었다. 이미 HTML 4.01에서 비권장으로 분류된 태그였다.
• center : 가운데 정렬용 태그인데 마찬가지로 CSS로 너무나도 간단하게 대체 가능하기에 폐기되었다.
• basefont : 말 그대로 기본 폰트를 지정해 주는 태그였다.
• applet : 자바 애플릿을 넣을 때 쓰는 태그였다. object, embed로 대체한다.
• noembed : embed요소를 사용할 수 없을 때 대체하는 요소. 폴백이 필요하다면 object요소를 사용하게 되었다.
• marquee : 익스플로러에서 전광판처럼 글자가 흐르게 하는 테그였다. JavaScript나 CSS3의 Animation으로 대체할 수 있다.
• blink : 넷스케이프와 파이어폭스에서 글자를 깜빡이게 하는 태그였다. 이 역시 JavaScript나 CSS3의 Animation으로 대체할 수 있다.
• bgsound : 배경음악을 재생시키는 태그인데 익스플로러에서만 돌아가는 비표준 태그이다.
• frameset : 대체 수단이 생겼다. iframe과 CSS를 이용하거나 서버 사이드 컨텐츠 결합
• listing, xmp : 내용그대로 출력하는 태그. pre 요소나 code 요소를 사용하게 되었다.
• plaintext : 내용그대로 출력2. "text/plain"을 사용한다.
• strike : 취소선 태그이나 현재는 css를 사용한다.