Chapter 2. HTMl 기초
학습목표
- HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.
- HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
- 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
<div>,<span>요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.<ul>,<ol>,<li>요소가 무엇이고, 언제 사용해야 하는지 알고 있다.<input>요소에 type을 설정하여 다양한 종류의<input>요소를 활용할 수 있다.- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(semantic) HTML 문서를 작성할 수 있다.
- HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
- 시맨틱 요소가 무엇인지 설명할 수 있다.
- 시맨틱 요소를 사용하는 이유에 대하여 이해한다.
- 검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.
! 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 태그가 끝났음을 의미간혹 태그 내부에 내용이 없이, 와 같이 표현되는 태그를 Self-colosing tag라고 한다.(생략 가능)
<img src="example.png"></img>
<img src="example.png" />* src 는 요소 안에 있는 속성이라고 하며, "" 안에 들어 있는 것을 값이라고 말함. key="value"! 자주 사용하는 HTML 요소
| 태그 | 설명 | 메모 |
|---|---|---|
| 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>태그 사용- type 속성을 아이디는 text, 비밀번호는 password로 한다.(비밀번호는 입력 값이 보이지 않게 출력됨)
- placeholder 속성을 통해, 입력 창 안에 작성해야 하는 내용 제공
- 로그인 버튼 만들기
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button><button>태그 사용- 여는 태그와 닫는 태그 사이에 값(value)을 넣을 수 있음
- 클릭은 가능하지만, 현재는 동작하지 않음
- 로그인 상태 유지 체크박스 만들기
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label><lable>,<input>태그 사용- type 속성을 checkbox로 설정
<label>태그를 사용하는 이유는 편의성과 사용성의 확대, 체크박스 영역에 국한된 것이 아니라 체크박스가 가리키는 툴팁 영역도 클릭 시 체크 가능하도록 함
! 시맨틱 요소
시맨틱 요소(semantic element)란 의미를 가진 요소를 말한다.
* 시맨틱(sematic) : 의미가 있는, 의미론적인예를 들면, 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 <h1> 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 함
시맨틱 요소를 사용하는 이유는 몇 가지가 있다.
- 첫째, 검색 엔진이 시맨틱 요소를 더 좋아함
검색 엔진은 웹 페이지를 방문할 때, 시맨틱 요소를 중요한 키워드로 고려한다. 시맨틱 요소에 담긴 의미에 따라 검색 결과의 상위 노출이 결정될 수 있다는 것이다.
- 둘째, 여러 개발자가 함께 작업할 때 각 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 편리함
시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용했는데, 그러다 보니 웹 페이지 하나에 수십 개의 요소가 중첩되는 경우가 많았다. 중첩된 요소를 하나 하나 찾아다니는 것보다 의미 있는 하나를 찾는 것이 효율적이고, 뿐만 아니라 요소 안에 채워질 데이터 유형도 예측하기 쉽다.
주로 쓰이는 시맨틱 요소
| 태그 | 설명 |
|---|---|
| article | 독립적이고 자체 포함된 콘텐츠 지정 |
| aside | 본문의 주요 부분을 표시하고 남은 부분을 설명(사이드바, 광고창에 주로 사용) |
| footer | 페이지나 해당 파트의 가장 아랫 부분(사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용) |
| header | 페이지나 해당 섹션의 가장 윗부분(사이트의 제목이 들어감, 상단바나 검색창 등이 들어갈 수 있음) |
| nav | 네비게이션(navigation)의 약자로, 상단바 등 사이트를 안내하는 요소(안에 ul 태그로 목록 형태로 사용) |
| main | 문서의 주된 콘텐츠 표시 |
* 시맨틱 요소와 의미를 모두 암기하고 있을 필요는 없음+) 시맨틱 요소 참고(MDN)
감성있는 개발자를 꿈꿔요