Tech/HTML 3

[HTML] 웹 접근성과 시멘틱 마크업(Semantic Markup)

목표 시멘틱 마크업이 무엇인지에 대한 이해 시멘틱 마크업의 사용 이유 정리 시멘틱 마크업의 사용법 알기 시멘틱 마크업?(Semantic Markup) 시멘틱 마크업은 글자 그대로 해석하면, ‘의미론적인 HTML 태그 문서 작성’을 뜻합니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 그렇다면 이러한 방식은 왜 사용되는 것일까요? 시멘틱 마크업을 사용하는 이유 시멘틱 마크업을 사용함에 따라 얻을 수 있는 효과는 다음과 같습니다. 웹 접근성에 효율적 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다. 코드 가독성에 따른 유지 보수의 용이 끊임없는 div 들을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것..

Tech/HTML 2022.04.28

[HTML] HTML4와 HTML5의 차이

HTML4에서 HTML5로 어떤 점들에서 변화가 발생했는지 살펴보도록 한다. 1. 구문 1) DTD (Document Type Definition) : doctype의 표현 : 작성된 내용이 HTML 표준에 의거하여 작성되었음을 웹 브라우저에게 알려주는 것을 의미한다. 필수 사항은 아니지만 보여주도록 권고하고 있다. 이 doctype 선언이 간소화 되었다. HTML4? 기존의 HTML 4의 경우에는 Strict, Transitional, Frameset 총 3가지 DTD 모드가 사용되었지만, HTML5? HTML5에서는 간단하게 표기하는 것으로 바뀌었다. 가장 최상단에 위치하고 있다. 2) Encoding : 웹 페이지의 문서 규칙을 선언 : 인코딩 선언부가 간결해졌다. 아래와 같이 간단하게 선언을 해주..

Tech/HTML 2021.01.16

[HTML] HTML?

1. HTML 이 중요한 이유 - 정보 전달 + 접근성 (accessibility) : HTML 은 웹 페이지를 만드는 언어 (브라우저가 알아들을 수 있는 문서 형식)이다. 따라서 누군가에게 정보를 전달을 하는 목적으로 사용된다. 검색 엔진에서 검색을 했을 때, 텍스트 기반으로 검색하기 때문에 이미지로 꾸며진 글보다, 텍스트로 구성된 정보를 더 빠르게 찾을 수 있다. 2. HTML Tag ① 주로 사용되는 태그 이름 설명 '이것은 html이다' 를 관용적으로 보여주기 위해 쓰는 표현 웹 페이지의 문자 규칙을 utf-8로 읽어오라는 뜻 전체를 감싸서 html 이라는 것을 보여줌 본문을 설명하는 부분 웹 페이지의 제목 본문 HTML new line tag 줄 바꿈 태그의 의미만을 가지고 있음 HTML par..

Tech/HTML 2020.12.16