-
HTML5 학습하기 ‘HTML5 기본 구조 및 문법의 기초’IT/HTML 2020. 4. 25. 09:34
HTML5 기본 구조 및 문법의 기초
HTML5 엘리먼트와 시맨틱 태그에 대해서 알아보도록 하겠습니다.
1. HTML5 엘리먼트
1) HTML5 엘리먼트의 정의
HTML 문서의 구성요소 중 하나로 시작태그와 종료태그로 이루어진 모든 명령어들을 의미한다.
2) 엘리먼트 구문의 특징
① 하나의 HTML 엘리먼트는 시작 엘리먼트로 시작하고, 종료 엘리먼트로 끝난다.
② 일부 HTML 엘리먼트는 빈 콘텐츠를 가질 수 있다.
③ 빈 엘리먼트는 시작태그로 종료 된다.
④ 대부분의 엘리먼트는 속성을 가진다.
⑤ 대부분의 엘리먼트는 중첩이 가능하다.
3) 엘리먼트와 태그
(1) 엘리먼트
HTML을 문서 형식으로 구성할 때 의미를 표현하는 약속된 단어들이다.
예 : p엘리먼트는 paragraph(문단)에서 img 엘리먼트는 image(이미지)의 뜻을 가진 엘리먼트 이다.
(2) 태그
부등호 기호(<>)로 둘러싸인 엘리먼트의 조합을 부르는 이름이다.
예 : <p>, <img>를 부를 때는 ‘p’ 태그’, ‘img’ 태그라고 함
4) 엘리먼트의 종류
(1) 블록 레벨 엘리먼트
항상 새로운 줄로 줄 바꿈 하여 표시하는 요소이며, 너비 값은 브라우저 화면에 100% 꽉 차게 표시된다.
(2) 인라인 레벨 엘리먼트
같은 줄 안에서 이어서 표시 되며, 너비 값은 요소가 가지고 있는 값 자체로 표시된다.
2. HTML5 시맨틱 태그
1) 시맨틱 태그
시맨틱 태그는 태그 이름만 보고도 역할을 짐작할 수 있는 태그를 말한다.
2) 시맨틱 태그를 사용하는 이유
검색 엔진에서 쉽게 웹 문서의 내용 검색할 수 있고, 웹 보조 기구에서 웹 문서를 정확하게 판독 가능하며, 어떤 장치에서나 똑같은 문서 해석이 가능하다.
3. HTML5 시맨틱 태그 실습 해보기
1) <h> 태그 : 제목을 나타내는 태그로 <h1> ~ <h6>까지의 범위를 가진다.
2) <ol> 태그 : 순서 있는 목록을 만드는 태그로 목록 앞에는 숫자 이외에도 알파벳이나 로마숫자로 나타낼 수 있다.
3) <ul>태그 : 순서 없는 목록을 만드는 태그이다.
예제)
<head>
<h1> HTML5 시맨틱 태그 </h1>
</header>
<nav>
<h2> 시맨틱 태그란? </h2>
<h3> 시맨틱 태그를 왜 사용하는 이유? </h3>
<h4> 시맨틱 태그 사용 방법?</h4>
</nav>
<ol>
<li> 첫째 </li>
<li> 둘째 </li>
<li> 셋째 </li>
</ol>
<ul>
<li> 강아지 </li>
<li> 고양이 </li>
<li> 토끼 </li>
</ul>
'IT > HTML' 카테고리의 다른 글
HTML5 학습하기 ‘HTML5 시맨틱 태그 2 - 비디오’ (0) 2020.04.28 HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’ (0) 2020.04.27 HTML5 학습하기 ‘HTML5 이란?’ (0) 2020.04.24 HTML5 학습하기 ‘HTML과 XHTML에 대하여’ (0) 2020.04.23 HTML5 학습하기! ‘웹 표준의 기본지식’ (0) 2020.04.16