학습목표
- HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.
- HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
- 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
<div>
,<span>
요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.<ul>
,<ol>
,<li>
요소가 무엇이고, 언제 사용해야 하는지 알고 있다.<input>
요소에 type을 설정하여 다양한 종류의<input>
요소를 활용할 수 있다.- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(semantic) HTML 문서를 작성할 수 있다.
- HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
- 시맨틱 요소가 무엇인지 설명할 수 있다.
- 시맨틱 요소를 사용하는 이유에 대하여 이해한다.
- 검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.
HTML은 HyperText Markup Language의 약자로, 웹 페이지의 틀을 만드는 마크업 언어다.
* 마크업 언어는 태그 등을 이용하여 문서나 데아터의 구조를 정해주는 언어
HTML의 기본 구성 요소는 tag다. tag는 <>
로 묶인 것을 말한다. tag는 기본적으로 여는 태그와 닫는 태그를 사용한다.
- 여는 태그(Opening tag) : 요소의 시작, <태그>
- 닫는 태그(Closing tag) : 요소의 끝, </태그>
- 내용(Contents) : 요소의 내용, 단순한 텍스트
- 요소(Element) : 여는 태그, 닫는 태그, 내용을 통틀어 말함
HTML은 기본적으로 아래와 같은 트리 구조를 하고 있다.
<!DOCTYPE html> 이 문서가 HTML 문서임을 명시
<html> html 시작 태그로, 문서 전체의 틀을 구성
<head> head 태그는 문서의 메타데이터를 선언
<title>Page title</title> 문서의 제목, 브라우저의 탭에 보여짐
</head> </태그이름>은 해당 태그가 끝났음을 의미
<body> body 태그는 문서의 내용을 담는 곳
<h1>Hello world</h1> heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
<div>Contents here contents division을 의미하며, 줄바꿈 가능
<span>Here too!</span> contents 컨테이너, 줄바꿈 불가
</div> div태그가 끝났음을 의미
</body> body 태그가 끝났음을 의미
</html> html 태그가 끝났음을 의미
<img src="example.png"></img>
<img src="example.png" />
* src 는 요소 안에 있는 속성이라고 하며, "" 안에 들어 있는 것을 값이라고 말함. key="value"
태그 | 설명 | 메모 |
---|---|---|
div | Division | 한 줄 전체를 차지함 |
span | Span | Contents 크기 만큼의 공간을 차지함 |
img | image | src 속성을 사용 |
a | Link | href 속성을 사용, target="_blank" 로 새 탭으로 열기 가능 |
ul & li & ol | Unordered List & List Item & ordered List | 비정렬 목록 & 항목 & 정렬 목록(넘버링), li 태그는 반드시 ul, ol 태그 안에 위치해야함 |
input | Input(Text, Radio, Checkbox) | 라디오 버튼은 여러 개 중 하나의 값을 선택, 체크박스는 중복 선택 가능 |
textarea | Multi-line Text Input | text와 다르게 줄바꿈이 가능 |
button | Button |
+) HTML 요소 참고서(MDN)
https://developer.mozilla.org/ko/docs/Web/HTML/Element
모든 요소를 암기하듯이 외울 필요가 없고, 자주 쓰는 요소들 정도만 기억하고 사용해도 괜찮으니, 부담 가질 필요없다.
* <div>
와 <span>
차이 한 눈에 보기
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<input>
태그 사용<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<button>
태그 사용<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>
<lable>
, <input>
태그 사용<label>
태그를 사용하는 이유는 편의성과 사용성의 확대, 체크박스 영역에 국한된 것이 아니라 체크박스가 가리키는 툴팁 영역도 클릭 시 체크 가능하도록 함시맨틱 요소(semantic element)란 의미를 가진 요소를 말한다.
* 시맨틱(sematic) : 의미가 있는, 의미론적인
예를 들면, 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 <h1>
요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 함
시맨틱 요소를 사용하는 이유는 몇 가지가 있다.
검색 엔진은 웹 페이지를 방문할 때, 시맨틱 요소를 중요한 키워드로 고려한다. 시맨틱 요소에 담긴 의미에 따라 검색 결과의 상위 노출이 결정될 수 있다는 것이다.
시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div>
요소를 주로 사용했는데, 그러다 보니 웹 페이지 하나에 수십 개의 요소가 중첩되는 경우가 많았다. 중첩된 요소를 하나 하나 찾아다니는 것보다 의미 있는 하나를 찾는 것이 효율적이고, 뿐만 아니라 요소 안에 채워질 데이터 유형도 예측하기 쉽다.
주로 쓰이는 시맨틱 요소
태그 | 설명 |
---|---|
article | 독립적이고 자체 포함된 콘텐츠 지정 |
aside | 본문의 주요 부분을 표시하고 남은 부분을 설명(사이드바, 광고창에 주로 사용) |
footer | 페이지나 해당 파트의 가장 아랫 부분(사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용) |
header | 페이지나 해당 섹션의 가장 윗부분(사이트의 제목이 들어감, 상단바나 검색창 등이 들어갈 수 있음) |
nav | 네비게이션(navigation)의 약자로, 상단바 등 사이트를 안내하는 요소(안에 ul 태그로 목록 형태로 사용) |
main | 문서의 주된 콘텐츠 표시 |
* 시맨틱 요소와 의미를 모두 암기하고 있을 필요는 없음
+) 시맨틱 요소 참고(MDN)