HTML
HyperText Markup Language
Aaron Snowberger
교통대학교 • 웹프로그래밍기초 • 2주차
pp. 43-120
2주차
HTML 기본 문서 만들기
03
03-1 HTML과 첫 만남�03-2 HTML 구조 파악하기�03-3 HTML 파일 만들기 �03-4 웹 문서 구조를 만드는 시맨틱 태그
pp. 43-71
03-1 HTML 첫 만남
웹 개발은 항상 HTML부터 시작합니다.
HTML이란? = ‘HyperText Markup Language’ (웹 문서를 만드는 언어)
HyperText (하이퍼텍스트) = 문서를 서로 연결해 주는 링크를 의미합니다.
Markup (마크업) = ‘표시한다’ (브라우저에 내용을보여 주는텍스트, 이미지,
영상등의 위치를표시하는것을의미합니다.)
03-1 HTML 첫 만남
편집기에서 마크업 형식으로 표를 작성해야 합니다.
그러면 오른쪽 그림처럼 웹 브라우저는 각각제목, 텍스트, 표로 인식해서 나타냅니다.
이러한 꼬리표를 태그(tag)라고 합니다.
(글자를보기 좋게 꾸미거나 문서의 배치를 다양하게 바꾸는 것은 둘째마당에서 공부할 스타일시트
(stylesheet)의 기능입니다.)
03-1 HTML 첫 만남
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
03-2 HTML 구조 파악하기
이 제부터는 HTML을 하나하나 공부하면서 소스를 직접 작성해 보고 웹 브라우저에서 어떻게 확인하는지 알 아보겠습니다.
03-2 HTML 구조 파악하기
이 제부터는 HTML을 하나하나 공부하면서 소스를 직접 작성해 보고 웹 브라우저에서 어떻게 확인하는지 알 아보겠습니다.
03-2 HTML 구조 파악하기
03-2 HTML 구조 파악하기
웹 문서의 유형을 지정하는 선언문 <!DOCTYPE html> 태그
웹 문서의 첫 부분은 문서 유형을 지정하는 <!DOCTYPE html> 태그로 시작합니다. 웹 브라우저는 "아하, 이 문서는 HTML5 에 맞추어 작성한 웹 문서구나!”라고 이해합니다.
웹 문서의 시작을 알리는 <html> 태그
<html>태그는문서의 유형 <!DOCTYPE html>을선언한 후 HTML 파일의 시작과 끝을 표시합니다. <html> 태그는 웹 문서가 시작된다는 뜻이고 </html> 태그는 웹 문서가 끝났다는 뜻입니다.
<!DOCTYPE html>
<html lang=”ko”>
…
</html>
<!DOCTYPE html>
<html>~</html>
03-2 HTML 구조 파악하기
웹 브라우저에 문서 정보를 알려 주는 <head> 태그
<head> 영역의 내용은대부분 웹 브라우저 화면에는 보이지 않습니다. 웹 브라우저가 알아야 할 정보를 입력하는 곳이니까요.
<!DOCTYPE html>
<html lang=”ko”>
<head>
…
</head>
…
</html>
<head>~</head>
03-2 HTML 구조 파악하기
문자 세트를 비롯해 문서 정보가 들어 있는 <meta> 태그
책의 메타 정보로 가격, 쪽수, 지은이 등이 있는 것처럼 웹 문서의 <meta> 태그도 비슷합니다. <meta> 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것입니다.
<meta />
03-2 HTML 구조 파악하기
문서 제목을 나타내는 <title> 태그
<head> 태그 안에 서 가장 중요한 태그를 꼽으라면 <title> 태그입 니 다. <title> 태그에서 지정하는 내용은 그림 처럼 거의 모든웹 브라우저의 제목 표시줄에 표시됩니다.
<title>~</title>
03-2 HTML 구조 파악하기
웹 브라우저에 내용을 표시하는 <body> 태그
문서 유형을정의하고문서 정보까지 입력했다면 �<body>와</body> 사이에 실제 웹 브라우저
에 표시할 내용을 입 력합니 다.
<body>~</body>
03-3 HTML 파일 만들기 (개인 선택)
(우리는 먼저 codepen.io에서 웹 사이트 연습을 하니까)
03-4 웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그 알아보기
HTML에는 웹 문서 구조를 나타내는 몇 가지 태그가 새로 추가되었습니다. 즉, 문서 내용에는 영향을 주지 않으면서 웹 브라우저가 문서 구조를 파악하는 데 중요한 역할을 하는 태그입니다.
03-4 웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그 알아보기
HTML의 태그는 그 이름만 봐도 의미를 알 수 였어 시맨틱(semantic) 태그라고합니다. 텍스트 단락(paragraph)을 줄인 <p> 태그나 앵커(anchor)를 줄인 <a> 태그 동 이름만으로도 어떤 역할을 하는지 쉽게 알수있죠.
03-4 웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그 알아보기
아직 HTML 태그를 배우지 않아 전체 웹 문서를 이해하기 힘들 수도 있습니다. 하지만 <header>, <footer>와 같은 시멘틱 태그는 이름만 봐도 웹 문서에서 어떤 역할을 하는지 추측할 수 였습니다.
03-4 웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그는 왜 필요할까요
웹 문서는시맨틱 태그를사용하지 않더라도 만들 수 있습니다. 시맨틱 태그를 사용하든 사용하지 않든 웹 문서에 특별히 차이가 나는 것도 아닙니다. 그렇다면 시맨틱 태그는왜 필요할까요?
03-4 구조를 만드는 시맨틱 태그
웹 문서 구조를 만드는 주요 시맨틱 태그
문서 구조를 만드는 시맨틱 태그가 있다는 것을 알았다면 쓰임새에 맞는 태그를 사용하는 것이 좋습니다.
<header> 태그는 사이트에서 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트메뉴를 삽입합니다.
<nav> 태그는 웹 문서의 위치에 영향을 받지않으므로 헤더나 푸터, 사이드바 안에 포함할 수도 있고 독립해서 사용할 수도 있습니다.
그리고 웹 문서에서 <nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있습니다.
<header>~</header>
<nav>~</nav>
03-4 구조를 만드는 시맨틱 태그
웹 문서 구조를 만드는 주요 시맨틱 태그
03-4 구조를 만드는 시맨틱 태그
웹 문서 구조를 만드는 주요 시맨틱 태그
<main> 태그는 웹 문서 에서 핵심이 되는 내용을 넣습니다.
여기에는 메뉴, 사이드 바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여 주는 내용으로 구성합니다.
<main> 태그는웹 문서에서 한번만 사용할 수 있습니다.
<main>~</main>
03-4 구조를 만드는 시맨틱 태그
웹 문서 구조를 만드는 주요 시맨틱 태그
<article> 태그는 아티클article의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고싶은 내용을 넣습니다. 문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있습니다.
<section> 태그는 웹 문서에서 콘텐츠 영역을 나타냅니다. <section> 태그는 <article> 태그와 비슷해 보이 기도 합니다. 하지만 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 씁니다.
<article>~</article>
<section>~</section>
03-4 구조를 만드는 시맨틱 태그
웹 문서 구조를 만드는 주요 시맨틱 태그
03-4 구조를 만드는 시맨틱 태그
웹 문서 구조를 만드는 주요 시맨틱 태그
<aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듬니다.
<footer> 태그는 웹 문서에서 맨아래쪽에 있는 푸터 영역을 만듭니다. 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣습니다.
<div> 태그는 <div id="header" ＞나 <div class="detail" ＞처 럼 id나 class 속성을 시용해서 문서 구조를 만들거나 스타일을 적용할때 사용합니다.
<aside>~</aside>
<footer>~</footer>
<div>~</div>
03-4 구조를 만드는 시맨틱 태그
웹 문서 구조를 만드는 주요 시맨틱 태그
2주차
웹 문서에 다양한 내용 입력
04
04-1 텍스트 입력하기�04-2 목록 만들기�04-3 표 만들기�04-4 이미지 삽입하기�04-5 오디오와 비디오 삽입하기�04-6 하이퍼링크 삽입하기
pp. 72-120
04-1 텍스트 입력하기
<hn></hn> = 제목
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<p></p> = 단락
<br /> = Line break
04-1 텍스트 입력하기
<blockquote></blockquote> = 인용문
<strong></strong> or <b></b> = 강조
<em></em> or <i></i> = 기울인 텍스트
04-1 텍스트 입력하기
다양한 텍스트 관련 태그
04-2 목록 만들기
<ol></ol> = Ordered List (순서 있는 목록)
<li></li> = List Item (목록 아이템)
type와 start 속성 (1, 2, 3…)
04-2 목록 만들기
<ul></ul> = Unordered List (순서 없는 목록)
<li></li> = List Item (목록 아이템)
04-2 목록 만들기
<dl></dl> = Description / Definition List (설명 / 정의 목록)
<dt></dt> = Definition Term (이름)
<dd></dd> = Definition Description (값)
04-3 표 만들기
<table></table> = 테이블 / 표
<caption></caption> = 표 제목
<tr></tr> = Table Row (행)
<th></th> = Table Header (강조한 셀)
<td></td> = Table Description (셀)
04-3 표 만들기
<thead></thead> = Table Header
<tbody></tbody> = Table Body
<tfoot></tfoot> = Table Footer
표의 구조를 지정하면 시각 장애인도 화면낭독기 를 통해 표를 쉽게 이해할 수 있습니다.
또한 CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수도 있습니다.
표의 본문이 길어 한 화면을 넘 어갈 경우, 자바스크립트를 이용해 <thead>와 <tfoot> 태그는 표의 위 아래에 고정하고 <tbody> 태그만 스크롤하도록 만들 수 있습니다.
04-3 표 만들기
행이나 열을 합치는 rowspan, colspan 속성
행을 합치려면 rowspan 속성을 사용하고 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 지정하면 됩니다.
04-3 표 만들기
<col/> = 열을 1개만 지정
<colgroup></colgroup> = 열 2개 이상 지정
표의 내용이 시작되기 전에 열의 상태를 알려 주는 것이다. 그리고 <col> 태그를 사용할 때는 <colgroup> 태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col> 태그를 넣어야 합니다.
즉, 스타일 속성을 지정하지 않은 열이 있을 경우에는 각각 <col> 태그를 작성해야 합니다.
04-4 이미지 삽입하기
<img/> = 이미지
src와 alt 속성도 필요하다 (source URL + alternative text)
src 속성은이미지 파일의 경로를 지정하다.
alt 속성에는 화면낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력합니다.
04-4 이미지 삽입하기
Filetype
04-4 이미지 삽입하기
<img/> = 이미지
src와 alt 속성도 필요하다 (source URL + alternative text)
이미지나 음악, 동영상 파일 등을 웹 문서에 삽입할 때에는 경로를 주의해야 합니다. 경로란
현재 HTML 문서에서 이미지 파일이 있는곳까지 어떻게 찾아가야하는지를알려 줍니다.
alt 속성에 들어 갈텍스트는 이미지를 부연 설명하는 것이 아니라 이미지 안에 포함된 텍스트를 알려 주어야 합니다.
쇼핑몰사이트의 메뉴를 이미지로 삽입할 경우 alt=”메뉴”라고 입력해서는 안 됩니다. alt=”첫 화면”, alt=”신상품”...
04-4 이미지 삽입하기
<img/> = 이미지
width와 height 속성 (널비, 높이)
<img> 태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시됩니다.
만약에 이미지 파일은 수정하지 않고, 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶다면 width와 height 속성을 사용할 수 있습니다.
(2개 속성 모두를 사용할 수 있지만 1개만 지정해 주 세요. 둘 다 사용하면 이미지가 늘어납니다.)
04-5 오디오와 비디오 삽입하기
<object></object> = 미디어
<object> 태그는 오디오 파일뿐만 아니라 비디오, 자바애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용합니다.
data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정합니 다.
04-5 오디오와 비디오 삽입하기
<embed></embed> = 미디어
<embed> 태그는 HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있습니다. <embed> 태그에서는 src 속성을 사용해 삽입할 멀티미디어 파일을 지정합니다.
04-5 오디오와 비디오 삽입하기
웹 브라우저에서 지원하는 멀티미디어 파일의 종류
04-5 오디오와 비디오 삽입하기
<audio></audio> = 오디오
멀티미디어 파일 관련 태그는 HTML5 웹 표준이 정해지면서 가장 많이 변한 부분입니다.
HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입한 후에 재생하려면 플러그인 프로그램이 (Flash Player) 따로필요했습니다.
하지만 HTML5 에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있습니다.
오디오 파일을 삽입할 때는 <audio> 태그를 사용하고, 비디오 파일을 삽입할 때는 <video> 태그를 사용합니다.
04-5 오디오와 비디오 삽입하기
<video></video> = 비디오
방문자가 음악이나 동영상을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성을 함께 사용했습니다.
04-5 오디오와 비디오 삽입하기
<audio>, <video> 태그의 속성 알아보기
04-6 하이퍼링크 삽입하기
<a></a> (Anchor)와 href 속성 (Hyperlink REFerence)
하이퍼링크는 클릭만 하면 연결된 곳으로 바로 이동해 웹 사이트를 더욱 편리하게 사용할 수 있는 중요한 기능입니다. 웹 사이트에서 링크의 기능은 가장 많이 사용되며, 그 만큼 중요합니다.
04-6 하이퍼링크 삽입하기
target 속성 = 링크를 새 탭에서 열다
앞에서 만든예제의 텍스트나 이미지 링크를 클릭하면 현재 열려 있는웹 브라우저 창에서 섀로운 문서가 나타납니다.
그래서 링크를 클릭하기 전 문서로 돌아가려면 브라우저 창에서 매
번 [이전 페이지]를 눌러야 합니다.
이러한 번거로움을 줄이기 위해 target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열립니다.
4장 한 눈에 정리하기
4장 마무리 문제 (과제)
3) 개인 시간표를 만들어 보세요. �(table, colspan, 등)
pp. 119
pp. 120
Thanks!
Please keep this slide for attribution