Develop/HTML, CSS
[명품웹프로그래밍]2주차-1:HTML5 기본 문서 만들기
dawonny
2021. 10. 12. 04:27
728x90
반응형
웹 페이지의 타이틀을 달고 싶을 때에는 <title> 태그를 이용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>첫 타이틀</title>
</head>
<body>
페이지에 타이틀을 다는 예제 입니다.
타이틀은 브라우저의 타이틀바에 보여집니다.
</body>
</html>
<h1> ... <h6> 태그로 문단의 제목을 달아보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문단 제목 달기</title>
</head>
<body>
<h1>1장 홈페이지 만들기</h1>
<h2>1절 HTML 언어</h2>
<h3>1. 웹</h3>
<h4>1.1 인터넷</h4>
<h5>1.1.1 네트워크</h5>
<h6>1.1.1.1. 통신</h6>
</body>
</html>
title 속성으로 툴팁을 달 수도 있다. (툴팁이란 마우스를 갖다 댔을 때 나오는 것)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>툴팁 달기</title></head>
<body>
<h1 title="툴팁입니다.">1장 홈페이지</h1>
<h2 title="툴팁입니다.">1절 HTML 언어</h2>
</body>
</html>단락을 나눌 때에는 <p> 태그를 이용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>단락 나누기</title></head>
<body>
<h3>2 개의 단락 나누기</h3>
<p>
HTML 문서도 본문을 여러 단락으로
나눌 수 있다. CSS 스타일을 사용하면
단락 단위로 내어 쓰기와 들여 쓰기가 가능하다.</p>
<p>
여러 개의 빈 칸은 하나로 취급되며,
엔터 키 역시 하나의 빈 칸으로 처리된다.</p>
</body>
</html>
수평선을 그을 때에는 <hr> 태그를 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>수평선 긋기</title></head>
<body>
<h3>수평선 긋기</h3>
<hr>
<p>hr 태그는 horizontal에서 딴 글자입니다.</p>
<hr>
<p>종료 태그 </hr>를 사용하지 않습니다.</p>
</body>
</html>
<br>태그로 다음 줄로 넘어가기를 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>새로운 줄 넘어가기</title></head>
<body>
<h3>새로운 줄 넘어가기</h3>
<hr>
<br> 태그로 다음 줄로 넘어갑니다.<br>
2 개의 <br> 태그로 두 번 넘어 갑니다.<br><br>
잘 보이나요?
</body>
</html>
특수문자, 기호, 심볼을 삽입해보자.
HTML5의 문자 : 유니코드 문자셋, UTF-8 코드 체계
&엔터티;
혹은
&#코드값;
처럼 표현해주면 된다.
∑ 으로 표현하거나 ∑ 로 표현하면
시그마 기호가 나온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자, 기호, 심볼 표현</title>
</head>
<body>
<h3>기호 넣기</h3>
<hr>
10 ÷ 2 = 5<br>
√2 = 1.414<br>
2 < 3<br>
오늘 "Elvis" 노래를 들었다.
</body>
</html>
쓴 그대로 출력이 되도록 하고 싶으면 <pre> 태그를 쓰면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>개발자의 포맷 그대로 출력</title></head>
<body>
<h3>개발자의 포맷 그대로 출력하기</h3>
<hr>
<p>
<p> 태그를 사용하면
여러 개의 빈 칸은 하나로,
여러 줄은 한 줄에 붙여 출력됩니다.</p>
<hr>
<pre>
그러나 <pre> 태그를 사용하면
사용자가 입력한
그대로 출력됩니다.</pre>
</body>
</html>
텍스트를 꾸미고 싶을 때에는 여러 태그를 사용할 수 있다(진하게, 형광펜 하이라이트, 밑줄,,, 등)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 꾸미기</title></head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<p>
<b>진하게</b><br>
<strong>중요한</strong><br>
<em>강조</em><br>
<i>이탤릭으로 강조</i><br>
<b><i>진하게 이탤릭으로 강조</i></b><br>
보통 문자 <small>한 단계 작은 문자</small><br>
<del>삭제</del><br>
<ins>추가</ins><br>
보통문자의 <sup>윗첨자</sup><br>
보통문자의 <sub>아래첨자</sub><br>
<mark>하이라이팅</mark><br>
</p>
</body>
</html>
태그는 블록태그와 인라인 태그로 구분된다.
블록 태그는 새 라인에서 시작하여 출력이 되고 (<div>)
인라인 태그는 블록의 일부로 출력된다(<span>)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><div>블록과 <span>인라인</title></head>
<body>
<h3>사랑</h3>
<hr>
<div style="background-color:skyblue; padding:20px;">
내가 사람의 방언과 천사의 말을 할지라도
<span style="color:red">사랑</span>이 없으면 소리 나는 구리와 울리는 꽹과리가 되고,
<span style="color:red">사랑</span>이 없으면 아무 것도 아니라.
</div>
<p>
~우리 서로 사랑하며 살아요~
</p>
</body>
</html>
div style 에서는 배경색을 파란색으로 바꾸고
span으로 할 때에는 사랑이라는 글씨만 색이 변한다.
이미지를 삽입해보자
<img> 태그를 사용한다.
이미지가 없을 경우 나오는 텍스트는 alt에 넣어주면되고
src에 파일 위치를 넣거나 주소를 넣기
weight 나 height 등으로 크기를 지정해주자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 삽입</title>
</head>
<body>
<h3>이미지 삽입</h3>
<hr>
<p> 엘비스 프레슬리의 사진입니다.</p>
<img src="media/Elvis1.jpg" width="150" height="200"
alt="Elvis">
<img src="media/kitae.jpg" width="80" height="100"
alt="황기태사진없음" >
<img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"
alt="사진 주소 변경됨" width="100" height="100">
</body>
</html>
링크를 작성 할때에 math.html 이랑 science.html 이 둘다 http://www.mysite.com/score/ 에 있으면
<base> 태그에 http://www.mysite.com/score/ 을 써넣고 나머지에는 math.html, science.html 만 써넣어도 됨.
<link> 태그는 외부 자원 연결에 사용한다.
<meta> 태그는 웹페이지의 저작자, 문자 인코딩방식, 내용등을 쓸 때 사용한다.
리스트를 만들기 위한 태그 3가지
ol : 순서가 있는 리스트
ul : 순서가 없는 리스트
dl : 정의 리스트
저 태그들 안에 들어가는 건
리스트 아이템
<li> ... </li>
이건 생략 가능
ol 의 type 를 A말고 i나 1로 바꾸어 사용해볼 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라면을 끓이는 순서</title></head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A" >
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후 먹는다.</li>
</ol>
</body>
</html>
아래와 같이 ul 태그를 사용해서 리스트를 만들면
순서가 없는 리스트가 만들어진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내가 좋아하는 음식</title></head>
<body>
<h3>내가 좋아하는 음식</h3>
<hr>
<ul>
<li>감자탕
<li>스파게티
<li>올레국수
</ul>
</body>
</html>
중첩으로 리스트를 만들수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중첩 리스트 만들기</title></head>
<body>
<h3>내가 사는 이유</h3>
<hr>
<ul>
<li>내가 좋아하는 음식 많아요
<ul>
<li>감자탕
<li>스파게티
<li>올레국수
</ul>
<li>라면 먹기 좋아해요
<ol type="1" >
<li>물을 끓인다.
<li>라면과 스프를 넣는다.
<li>파를 썰어 넣는다.
<li>한 입에 다 먹는다.
</ol>
<li>여름에는 바다로
<li>가을에는 산으로
</ul>
</body>
</html>
정의 리스트를 만들 수 있다.
<dt> 와
<dd> 태그를 이용했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정의 리스트</title></head>
<body>
<h3>웹 브라우저 종류</h3>
<hr>
<dl>
<dt><strong>Internet Explorer</strong>
<dd>마이크로소프트에서 만든 브라우저로
현재 국내 시장에서 가장 많이 사용
<dt><strong>Firefox</strong>
<dd>Mozilla 재단에서 오픈 소스로 만든
것으로 W3C의 웹 표준을 선도
<dt><strong>Chrome</strong>
<dd>구글에서 만든 것으로 좋은 디버거를
갖추고 있어 디버깅에 많이 사용
</dl>
</body>
</html>
<caption> 을 통해 표제목을 쓴다.
이 태그는 반드시 <table> 태그의 첫번째로 삽입을 한다.
<thead> : 헤딩 셀 그룹
<tfoot> : 바닥 셀 그룹
<tbody> : 데이터 셀그룹
<tr> : 행
<th> : 열 제목 셀
border="1"로 하여 1픽셀의 테두리로 설정해주었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 구조를 가진 표 만들기</title></head>
<body>
<h3>기본 구조를 가진 표</h3>
<hr>
<table border="1">
<caption>1학기 성적</caption>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
<tr><th>합</th><th>225</th><th>230</th></tr>
</tfoot>
<tbody>
<tr><td>황기태</td><td>80</td><td>70</td></tr>
<tr><td>이재문</td><td>95</td><td>99</td></tr>
<tr><td>이병은</td><td>40</td><td>61</td></tr>
</tbody>
</table>
</body>
</html>
표에 이미지를 삽입할 수 있다.
이미지들은 html 파일이 있는 경로에 media 라는 폴더를 만들어 그곳에 넣어줌.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표에 이미지 삽입</title>
</head>
<body>
<h3>표에 이미지 삽입</h3>
<hr>
<table>
<caption>좋아하는 과일</caption>
<tbody>
<tr>
<td><img src="media/apple.png"></td>
<td><img src="media/banana.png"></td>
<td><img src="media/mango.png"></td>
</tr>
</tbody>
</table>
</body>
</html>
하이퍼링크를 만들때에는 <a> 태그를 이용한다.
<a> 태그의 href 속성을 이용하자
절대경로 URL 표기는 href="http://~~~"
상대경로 URL 표기는 href="hello.html" 이라고 쓰고 <base> 태그에 기본 URL을 지정해주는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 만들기</title>
</head>
<body>
<h3>링크 만들기</h3>
<hr>
포털 사이트
<ul>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
</ul>
신문 사이트
<ul>
<li><a href="http://www.etnews.com">
<img src="media/iconetnews.png" alt="전자신문">
</a>
</li>
<li><a href="http://www.chosun.com">
<img src="media/iconchosun.png" alt="조선일보">
</a>
</li>
</ul>
<hr>
<a href="ex2-17.html">예제 2-17로 이동</a>
</body>
</html>
target : 링크에 연결된 html 페이지가 출력될 윈도우 이름을 지정한다
blank 면 새로운 창을 만들고
self 는 현재 윈도우
parent 는 부모윈도우
top은 제일 위인 브라우저 윈도우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크의 target 속성 활용</title></head>
<body>
<h3>링크의 target 속성 활용</h3>
<hr>
<ul>
<li><a href="http://www.w3.org" target="_blank">W3C(새 윈도우, _blank)</a>
<li><a href="http://www.etnews.com" target="_self">전자신문(현재 윈도우, _self)</a>
<li><a href="http://www.naver.com" target="_parent">네이버(부모 윈도우, _parent)</a>
<li><a href="http://www.mk.co.kr" target="_top">매일경제신문(브라우저 윈도우, _top)</a>
</ul>
</body>
</html>
<a> 태그의 id 속성으로 앵커 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크와 앵커</title></head>
<body>
<h3>Elvis Presley</h3>
<hr>
<ul>
<li><a href="#love">Love me tender</a>
<li><a href="#can">Can't help falling in love</a>
<li><a href="#it">It's now or never</a>
</ul>
<h3 id="love">Love me tender</h3>
Love me tender, Love me sweet, Never let me go.<br>
You have made my life complete, <br>
And I love you so.<br>
Love me tender, Love me true, <br>
All my dreams fulfilled.<br>
For my darling I love you, And I always will.<br>
<h3 id="can">Can't help falling in love</h3>
Love me tender, Love me sweet, Never let me go.<br>
You have made my life complete, And I love you so.<br>
Love me tender, Love me true, All my dreams fulfilled.<br>
For my darling I love you, And I always will.<br>
<h3 id="it">It''s now or never</h3>
It's now or never, Come hold me tight<br>
Kiss me my darling, Be mine tonight<br>
Tomorrow will be too late,<br>
It's now or never. My love won't wait.<br>
</body>
</html>
파일 다운로드 링크를 만들어보자
download 를 써주면 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 다운로드</title></head>
<body>
<h3>친구들아! 여기서 다운받아!</h3>
<hr>
<ul>
<li><a href="media/Elvis.png" download>엘비스 이미지 다운로드</a>
<li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드</a>
<li><a href="media/EmbraceableYou.mp3" download>mp3 다운로드</a>
<li><a href="ex2-09.html" download>예제 2-9 HTML 파일 다운로드</a>
<li><a href="media/test.hwp" download>한글 파일 다운로드</a>
</ul>
</body>
</html>
인라인 프레임 <iframe>
html 페이지 내에 html 페이지를 삽입할 수 있다.
iframe1.html을 만들어 놓고
iframe src="iframe1.html" 을 해주면 그 안으로 들어감.
인라인 프레임에 출력할 문서를 srcdoc 속성으로 써줄수도 있다(이런경우 src 는 무시됨)
예를 들어 <iframe srcdoc="<html><head></head><body>hello</body></html>"></iframe>
이런식이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe을 가지는 웹 페이지</title>
</head>
<body>
<h3>2 개의 <iframe>을 가집니다.</h3>
<hr>
<iframe src="iframe1.html" width="200" height="150">
</iframe>
<iframe src="iframe2.html" width="200" height="100">
</iframe>
</body>
</html>
2개의 iframe 써보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe을 이용한 신문 사이트</title></head>
<body>
<h3>2 개의 신문 사이트입니다.</h3>
<hr>
<iframe src="http://www.etnews.com" name="upper" width="300" height="300"></iframe>
<iframe src="http://www.mk.co.kr" name="lower" width="300" height="300"></iframe>
</body>
</html>
브라우저 윈도우와 인라인 프레임의 계층관계
부모 자식 관계이다
parent 윈도우 = 부모 윈도우
child 윈도우 = 자식 윈도우
top 윈도우 = 최상위 브라우저 윈도우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 활용</title>
</head>
<body>
<h3>target 속성 활용</h3>
<hr>
<iframe src="ex2-24-sitelist.html" name="left" width="200" height="300">
</iframe>
<iframe src="http://www.w3c.org" name="right" width="300" height="300">
</iframe>
</body>
</html>
미디어를 삽입해보자
<audio> <video> 태그 등을 사용함.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비디오 삽입</title>
</head>
<body>
<h3>비디오 삽입</h3>
<hr>
<video src="media/bear.mp4" width="320" height="240"
controls autoplay>
브라우저가 video 태그를 지원하지 않습니다.
</video>
</body>
</html>
<audio> 태그를 사용해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오디오 삽입</title>
</head>
<body>
<h3>오디오 삽입</h3>
<hr>
페이지 로드 즉시 음악이 연주됩니다.
<p>
<audio src="media/EmbraceableYou.mp3" controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.
</audio>
</p>
</body>
</html>
728x90
반응형