HTML Form에 이어 Codecademy HTML 강의를 통해 추가로 배운 내용에 대해 정리해보자. Validation 요소를 통해 사융자의 입력값을 제한할 수 있고, Semantic HTML 개념을 통해 단순히 시각적인 정보 뿐 아니라 코드의 역할과 의미를 담아내는 것이 중요하다는 것을 배웠다.
Form Validation
<input id="allergies" name="allergies" type="text" required>
Validation 요소는 사용자가 정보를 제공할때 바른 값을 입력할 수 있도록 검증하는 역할을 수행한다.
required값을 입력하지 않으면 제출하지 않고 오류 메시지를 나타낼 수 있다.min,max최소/최대 정수값을 제한한다.minlength,maxlength텍스트의 최소/최대길이를 제한한다.pattern카드번호, 주민번호, 영어/숫자 포함 비밀번호 같이 일정 패턴을 요구한다.
Semantic HTML
프로그래밍에서 Semantic은 코드 조각의 의미를 나타낸다. 시각적으로 어떻게 보여질까보다 코드 자체의 목적, 역할, 의미를 나타내는 것이다. 예를 들어 HTML에서 <h1>은 Semantic 요소로서 "이 페이지에서 최상위 제목"인 text를 감싸는 역할을 나타낸다.
Semantic HTML을 사용함으로써 우리가 얻는 이점은 다음과 같다.
- 모바일 기기나 사용에 불편함이 있는 유저들에게 접근성이 좋다.
- SEO(Search Engine Optimization)을 향상시킨다.
- 의미있는 코드 블록으로 채워져 있어 개발자들이 이해하기 쉽다.
Semantic Elements
자주 사용되는 Semantic Elements의 예는 다음과 같다.
-
<Header>
소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색, 작성자 이름 등도 포함할 수 있다. -
<nav>
문서의 부분 중 현재 페이지 내, 또는 타 페이지로 링크를 보여주는 구획을 나타낸다.(ex. 메뉴, 목차 등) -
<main>
문서<body>의 주 콘텐츠를 나타낸다. -
<footer>
일반적으로 구획의 작성자, 저작권, 관련 정보를 담는다. -
<section>
문서의 독립적인 구획을 나타낸다. -
<aside>
문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. -
<article>
문서, 페이지, 사이트 안에서 독립적으로 구분해 사용할 수 있는 구획을 나타낸다. 게시판, 블로그 글, 뉴스 기사 등이 있다. -
<figure>,<figcaption>
독립적인 콘텐츠를 포함하며,<figcaption>는 부모<figure>가 포함하는 다른 콘텐츠에 대한 설명을 나타낸다.
<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure><audio>
<audio autoplay controls>
<source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>문서의 소리 콘텐츠를 포함할 때 사용한다. autoply, controls와 같은 요소로 조정 가능하다.
