HTML5 개념 잡기(2)

티스토리 뷰

IT Story

HTML5 개념 잡기(2)

잉글리시레이스토리 2018. 7. 1. 10:36

웹 표준은 필수!

그렇다면 모두가 필요로하는 웹 표준이란 것은 무엇이고 왜 필요한 걸까?

세상의 모든 것들은 자유가 있는 반면에 규칙이 있다. 이 규칙이란것이 없다면 세상이 무질서하게되어 자유를 누리지 못하게 될것이다. 이와 같이 우리가 접하는 웹 페이지들도 규칙이 있어야 사용자들에게 정리된 사이트를 보여줄 수 있게 될 것이다.

위에서 언급한것과 같이 사이트를 개발하는 작업자들도 효율적으로 일하게 될 것이고 특히나 요즘과 같이 PC뿐 아니라 스마트폰(아이폰과 갤럭시는 서로 다른 OS를 사용), 테블릿, TV까지 인터넷 연결이 가능한 기기등이 많이 등장한다면 더욱이 규칙은 필수이겠다.

또한 인터넷 시대가 낯선 노인들과 저시력 그리고 시각장애인, 손을 자유롭게 사용하지 못하여 마우스등의 작동이 어려운 사용자들은 음성 낭독기라는 것을 통해 사이트에 접속하고 컨텐츠의 정보를 습득하게 되는데 이때 표준 규칙이 없다면 이를 원하는 유저들은 이 혜택을 받아 볼 수 없을 것이다.

정리해보면 이렇다.

< 사용자>
1. 웹 접근성을 확보하여 인터넷 활동이 불편한 유저들에게 편리함을 준다.
2. 여러 종류의 디바이스에 맞춰진 인테페이스가 자동 구현되어 유저들에게 정보 습득이 효율적으로 반영된다.
<작업자>
1. 웹 표준을 지킴으로서 여러 브라우저를 하나로 통제 가능해 효율적인 작업이 가능하다.
2. 내용과 디자인이 분리되어 유지.보수가 쉽다.

HTML5의 특징

기존의 텍스트와 이미지 위주의 정적인 페이지에서 플러그인 없이 동적인 사이트를 구현 할수 있다.
이전 HTML에서의 태그는 대소문자 구별하지 않았다면 HTML5는 소문자를 사용할 것을 권고한다.
원소스 멀티 플랫폼으로 여러 기반의 환경이 통합가능해졌다.
플러그인 필요없다.
시맨틱(semantic;의미가 통하는) 태그로 변경

HTML4 : 작업자가 임의대로 id를 지정하여 다른 작업자가 사이트의 구조 이해에 어려움을 겪었다.
HTML5 : 시맨틱 태그들 header, nav, section, article, aside, footer의 대표 영역이 지정되어 규칙에 따라 작업하게되면 다른 작업자가 보더라도 영역이 어떤 부분인지 바로 인지하게 되어 수정이나 추가 개발이 효율적으로 이루어진다.

4번의 내용과 같이 HTML5에서는 플래시 플랫폼을 더이상 사용하지 않는다.
예전에 디자인 작업을 위해 플래시를 사용했던 기억이 나는데 주로 GNB, 메인이미지등을 제작하곤 했다. 하지만 알다시피 플래시는 ActiveX를 설치해야만 작동되었고 구현하기에 너무 무거웠다. 이제는 자바스크립트가 그 역할을 대신하고 있다.

이제 조금 구체적으로 HTML5에 대해 알아보자!

먼저 기초적인 기본 시맨틱 태그를 정리하려고 한다. 그리고 기존의 HTML와 무엇이 달라졌는지도 차이점을 확인해 보고자한다.

시맨틱 태그란 모든 태그에 각각의 아이덴티가 있어 이 규칙을 사용할 경우 작업자들이 수월하게 분별이 가능한 태그이고 HTML5에서 새롭게 추가되었다.

★간결, 명확해진 태그

1. 문서 선언이 간단해졌다. 기존과 비교해보면 다음과 같다.

* HTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* HTML5: <!DOCTYPE html>

2. 문자 인코딩을 utf-8로 지정
HTML4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5: <meta charest="utf-8:> 이 방식은 한글과 영문외에 다른 언어를 표현할 수 있다.

3. 외부 CSS 필요시 태그 링크 방법
<link href="style.css" rel="stylesheet">

4. 대소문자 구별 없이 소문자로 통일

5. 영역을 확실하게 정해진 태그로 나누어 가독성이 좋아졌다.
HTML4: <div>로 영역을 나누고 작업자 임의의 id를 부여함으로 가독성 떨어짐

저작자표시 비영리 변경금지

'IT Story' 카테고리의 다른 글

블록체인이란? 블록체인 기술 그리고 단점 (0)	2018.10.10
4차 산업혁명(1) 정의와 역사 (0)	2018.07.19
애드핏 수익! 반드시 알아야 할 중요 키워드 (0)	2018.07.14
HTML5 개념 잡기(3) (0)	2018.07.04
HTML 개념 잡기(1) (0)	2018.06.30

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

티스토리 뷰