HTML5에서 추가된 내용
html 5에서는
- doctype의 선언이 변경되었습니다. 기존에는 html의 태그가 그려지는 명세를 브라우저에게 알려주기 위해 doctype 뒤에 많은 것들이 추가되었으나 html5에서는 <!DOCTYPE html>으로 html 태그 위에 추가해주어 선언해줄 수 있습니다. 이 태그를 추가해주지 않으면 호환 모드로 렌더링이 되어 화면에 다르게 보여질수가 있습니다.
- 플래시 없이 비디오 및 오디오 기능을 자체적으로 지원합니다. 애플에서 html5를 safari에서 지원하면서 플래시를 safari에서 지원하지 않기로 했을때 잡음이 심했습니다.
- 서버와의 소켓 통신을 지원하므로 서버와 양뱡향 통신이 가능해 졌습니다.
- 시맨틱 태그를 지원하기 위한 태그를 예를 들면 button, main, header, section, footer, article등과 같은 태그가 추가되었습니다
웹 표준이란?
웹 표준이란 브라우저 종류 및 버전의 차이에 대하여 호환이 가능하도록 제시된 표준으로 웹 페이지를 제작하는 기법을 의미합니다.
(이때 표준은 w3c가 권고한 표준안입니다.)
웹 표준의 궁극적인 목적은 웹 사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하기 위한 것이다.
웹 표준을 지키면 아래와 같은 이득을 얻게 됩니다.
- 수정 및 운영관리 용이
- 접근성 향상
- 검색엔진 최적화(구조화된 웹 페이지는 웹 크롤러에의해 효율적으로 노출될 수 있도록 검색엔진의 검색결과를 최적화 할수 있다.)
- File Size 축소, 서버 저장공간 절약
- 효율적인 마크업
- 호환성 가능(브라우저 상관없이 동일한 결과 출력 가능)
웹 접근성이란?
장애를 가진 사람이든 가지지 않은 사람이든 모두가 웹 사이트를 이용할 수 있게 하는 방식을 의미합니다.
장애를 가진 사람들 에게는 스크린 리더기를 이용하여 웹을 이용하는 것이 대표적인 예시입니다.
맥에서는 voiceover를 이용하여 스크린 리더를 이용할 수 있습니다.
웹 접근성에 맞는 마크업 예시
- img 태그의 alt태그는 빠짐없이 입력해야 합니다
- 배경 이미지일 경우 img 태그의 alt태그는 빈값으로 넣어서 스크린리더에 읽히지 않게 해야합니다.
- 아이콘과 같은 그래픽 문자는 대체 텍스트를 추가로 목적에 맞게 제공해야 합니다.
- qr코드나 바코드와 같은 이미지 정보는 대체 텍스트로 연결링크를 제공해야 합니다.
- 버튼의 기능을 명확히 이해할 수 있는 대체 텍스트를 제공해야 합니다(<input type="image" src="next.gif" alt="메뉴 더보기">)
시멘틱 태그란??(+ 왜 사용하는지)
semantic은 한글로 의미의 라는 뜻을 가지고 있습니다.
시멘틱 태그는 의미를 가진 태그입니다.
<header>, <footer>, <nav>, <main>, <section>, <article> 과 같은 태그들이 있습니다.
의미를 가진 태그를 알맞은 위치에 사용함으로써 사이트의 구조를 파악하기 쉽고, 코드가 이해하기 쉽고 명확한 의미를 전달할 수 있습니다.
코드가 이해하기 쉽다는 것은 유지보수의 비용을 줄일수 있는것을 의미합니다.
웹 접근성의 측면에서도 중요합니다. 스크린 리더기가 해당 태그를 읽어 사용자에게 더 명확한 의미를 전달할 수 있습니다.
SEO에도 도움이 됩니다. 의미가 명확한 태그는 크롤러에게 알맞은 정보를 가져갈 수 있도록 도움을 줍니다.
SEO란??
SEO(Search Engine Optimization)은 검색엔진 최적화를 의미합니다.
SEO를 위한 방법은 5가지가 있습니다.
- 캐노니컬 태그 설정 <link rel="canonical" href="">
- 메타태그 추가 (meta tag description, og:title, og:url 등등 설정)
- 시멘틱 태그 사용
- 빠른 웹 페이지 속도
- 사이트맵의 적절한 업데이트
CSR의 경우 크롤러에 의해 페이지를 접근할때 html에 메타태그가 동적으로 설정되지 않아 SEO를 적용하기 어렵습니다.
SSR의 전환을 고려해야 할 수 있습니다.
Button 태그의 Default type은??
button 태그의 default type은 submit 입니다.
따라서 button이 form 태그내에 존재한다면 자동으로 submit 됩니다.
<form>
<button>버튼</button>
</form>button 태그를 사용하는 경우 type="button" 으로 지정해주어 사용하여야 합니다.
기본 타입이 submit이기 때문에 button으로 설정을 해주어 혹시 form 태그로 감싸지거나 하는 상황을 방지하여 버그를 방지하여야 합니다.
html5에서 등장하였고 기존에는 <input>을 커스텀하여 사용하였으나 button 태그의 사용을 현재는 권고하고 있습니다
input은 닫힌 태그고 button은 열린 태그여서 안에 html을 위치 시킬수 있어 커스텀하기에도 편리합니다.
Section 태그와 article 태그의 차이점
section 태그는 섹션(부분, 구역, 영역) 들을 그룹화하여 분리하는 역할을 합니다.
article 태그는 섹션 내에서 그룹화하여 분리하는 역할을 합니다.
article 태그가 좀 더 작은 범위를 그룹화 해준다고 생각합니다.
<section>
<article>1</article>
<article>2</article>
<article>3</article>
</section>
article은 내용이 독립적으로 존재할 수 있습니다. article 태그 내부에선 데이터가 좀 더 구체적으로 표현이 됩니다.
section은 주제별로 구분을 해줍니다.
출처: https://poiemaweb.com/html5-syntax
HTML5 Introduction & Syntax | PoiemaWeb
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하
poiemaweb.com
http://www.smartebiz.kr/new/subpage02_02.html
웹 표준과 웹 호환성 - 웹 접근성 | 웹발전연구소
홈 > 웹 접근성 > 웹 표준과 웹 호환성 웹 표준(Web Standards) 정의 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따
www.smartebiz.kr
https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%A0%91%EA%B7%BC%EC%84%B1
웹 접근성 - 위키백과, 우리 모두의 백과사전
웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모
ko.wikipedia.org
https://accessibility.naver.com/acc/guide_01
네이버 접근성 페이지 : 대체 텍스트
대체 텍스트 눈으로 화면을 볼 수 없는 경우, 이미지에 대한 설명을 대체 텍스트로 입력하여 스크린리더를 통해 정보를 인식하게 도와줍니다. 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수
accessibility.naver.com
https://moo-you.tistory.com/m/406
'네트워크' 카테고리의 다른 글
| 네트워크 HTTP, HTTPS, SSL HandShake 😶🌫️ (0) | 2022.04.17 |
|---|---|
| 네트워크 HTTP, HTTP 1.1, HTTP 2.0 🔥 (0) | 2022.04.16 |
| 쿠키, 세션 🔥 (0) | 2022.04.11 |
| CORS 🔥 (0) | 2022.04.03 |
| OSI 7 layer 🌱 (0) | 2022.04.01 |