html 구조
css 스타일
js 상호작용
•
HTML이 Markup language라는 것을 이해할 수 있다.
◦
"구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
•
HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
◦
Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
•
자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
◦
div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
◦
ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
◦
input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
•
동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
◦
간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
◦
id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
◦
HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다
HTML
HyperText Markup Language
웹 페이지를 기술하기 위한 마크업 언어로 웹 페이지 내용과 구조가 어떤지 브라우저가 이해할 수 있도록
구조를 표현하는 언어
HTML5?
HTML5는 HTML의 새로운 버전으로 클라이언트와 서버와의 통신이 가능해지면서 외부 active-x나 plug-in을 사용하지 않고도 웹 서비스를 제공할 수 있게 되었다.
주요 기능
•
HW(카메라, 센서 등) 기능을 웹에서 직접 제어 가능
•
클라이언트에서 서버와 직접적 양방향 통신 가능
•
2차원 3차원 그래픽 기능 지원
•
다양한 스타일 이펙트 기능 제공
•
비디오 및 오디오 기능 자체 지원
•
네트워크 미지원 환경에서 웹 이용 가능
•
GPS없이 단말기의 지리적인 위치 정보 제공
•
사용자 의도에 맞는 맞춤형 검색 제공
Tag
<>로 묶인 HTML의 기본 구성 요소
HTML은 tag들의 집합으로 이루어져있다.
<!DOCTYPE html> <!-- 이 문서가 HTML 문서임을 명시 -->
<html lang="en"> <!-- html의 시작 태그, 문서 전체의 틀을 구성 -->
<head> <!-- 문서의 메타데이터 선언 -->
<title>Document</title> <!-- 문서의 제목 -->
</head>
<body> <!-- 문서의 내용을 담음 -->
<h1></h1> <!-- heading -->
<div> <!-- content division, 줄바꿈됨 -->
<span></span> <!-- 줄바꿈이 없는 컨테이너 -->
</div>
</body>
</html>
HTML
복사
SELF-CLOSING TAG
태그 내부에 내용이 없다면 <tag/>와 같이 하나만 사용해서 표현 가능
Element
<div> division 한 줄을 차지
<span> span 컨텐츠 크기만큼 공간을 차지
<img> image
<img src="<이미지>">
HTML
복사
<a> link
<a href="" target="_blank">이동</a>
HTML
복사
<ul> / <li> / <ol> unordered List/ List Item / ordered list
<input> input (text, radio, checkbox)
<input type="text" name="" placeholder="">
<div>
<input type="text" name="" placeholder="">
</div>
HTML
복사
type : text password radio checkbox
<textarea> Multi-line Text Input
<button> button
<p> paragraphe 하나의 문단을 표현
Section 요소
<article> 문서 페이지 애플리케이션 사이트 등에 포함된 독립적인 세션, 반드시 제목을 포함시켜야한다.
<section> 문서, 애플리케이션의 일반적인 섹션 주제별로 그룹화된 콘텐츠
콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면 section 요소 대신 article 요소를 사용하느 ㄴ것이 좋음
<aside> 웹사이트 사이드바에 해당하는 부 콘텐츠 섹션
<nav>
다른 페이지로 이동하는 링크 또는 사이트 내 탐색 링크를 포함하는 섹션
시맨틱 태그
이름에 의미를 붙여 부르는 태그
이 태그가 감싸고 있는 영역이 어떤 역할을 담당하는지 개발자가 쉽게 파악할 수 있도록 도움
header main nav aside footer = div
