[HTML] HTML 총정리 (1) _ 기본 문서 만들기
출처: HTML5+CSS3+JAVASCRIPT 웹프로그래밍 개정판 (황기태 교수님)
🎀 HTML 페이지 기본
HTML(HyperText Mark Language)는 웹 페이지를 작성하는 태그 언어이다.
<!DOCTYPE html>
<!--이 부분은 주석이다. 웹 브라우저는 주석을 화면에 출력하지 않는다. -->
<html>
<head>
문서 제목, 자바스크립트 코드, CSS 스타일 정의, 메타 데이터 정의
</head>
<body>
문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
</body>
</html>
<!DOCTYPE html>
문서가 HTML5 문서임을 브라우저에 알리는 지시어로서 반드시 첫 줄에 나와야한다.
<head>
<head></head>로 둘러싼 부분으로 문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다.
<body>
문서의 본문으로 <body></body>로 둘러싼다. 이곳은 자바스크립트 코드를 포함할 수 있다. 헤드와 바디 사이에는 아무것도 들어갈 수 없다.
타이틀 달기, <title>
HTML 페이지의 타이틀은 페이지의 제목으로, 브라우저의 타이틀 바에 출력된다. 타이틀은 <title> 태그를 이용하며 <head>내에서만 작성되어야 한다.
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title> 요게 바로 타이틀 </title>
</head>
<body>
페이지에 타이틀을 다는 예제 !
타이틀은 브라우저의 타이틀바에 보여진다 !
</body>
</html>
문단 제목(장,절 소제목 달기), <h1> , <h6>
HTML은 <h1>,<h2>,<h3>, ... <h6>의 6개의 태그를 제공하여 문단에 제목을 달 수 있게 한다.
개발자 포맷 그대로 출력하기, <pre>
브라우저는 개발자가 HTML 문서의 모양을 포맷하기 위해 삽입한 여러 개의 빈칸(' ', 탭) 이나 <Enter>를 모두 하나의 빈칸으로 처리하므로, 개발자가 의도한 모양대로 출력되지 않는다. 이때 <pre> </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>
블록 태그와 인라인 태그
HTML 태그들은 블록 태그(block)와 인라인 (inline) 태그로 나뉜다.
블록태그는 항상 새로운 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.
반대로 인라인 태그는 블록에 삽입되어 블록 콘텐트의 일부를 표현하는데 이용된다.
<!--
블록 태그 사례: <p>, <h1>, <div>, <ul>
인라인 태그 사례: <strong>, <a>, <img>, <span>
--!>
- 많이 사용하는 블록 태그, <div>
<div> 는 특별한 의미 없이 여러 HTML 태그들을 블록으로 묶는 컨테이너로 이용된다. 예를 들어 <div> 블록 전체에 동일한 CSS 스타일을 적용하거나 자바스크립트로 블록을 하나의 단위처럼 다루고자 할 때 사용된다.
- 많이 사용하는 인라인 태그, <span>
<span>태그는 텍스트 일부분에 특별한 모양을 주거나 자바스크립트 코드로 텍스트 일부분을 제어하고자 할 때 사용한다.
이미지 삽입, <img>
<img> 태그를 이용하면 HTML 문서에 이미지를 삽입할 수 있다. <img> 태그의 속성들을 보여주며 src 속성으로 지정할 수 있는 이미지 종류는 BMP, GIF, PNG, JPG, animated-GIF 가 있다.
<img src="이미지 파일의 URL" alt="문자열" width="이미지 폭" height="이미지 높이">
- src: 이미지 파일의 URL, 필수 속성
- alt: 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열. 필수 속성
- width: 이미지가 출력되는 너비로, 생략되면 원본 이미지의 폭. 픽셀 수
- 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="사진 없음 !!!">
</body>
</html>
리스트 만들기 <ol> ,<ul>, <dl>
순서 있는 리스트(ordered list) - <ol></ol>
순서 없는 리스트(unordered list) -<ul></ul>
정의 리스트(definition list) - <dl></dl>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 중첩 리스트 만들기</title>
</head>
<body>
<h3> 내가 사는 이유 </h3>
<hr>
<ul>
<li> 내가 좋아하는 음식 많아요 </li>
<ul>
<li>감자탕 </li>
<li>스파게티</li>
<li>올레국수</li>
</ul>
<li> 라면먹기 좋아해요 </li>
<ol type ="1">
<li> 물을 끓인다 </li>
<li> 라면과 스프를 넣는다</li>
<li> 파를 썰어 넣는다 </li>
<li> 한 입에 다 먹는다</li>
</ol>
<li> 여름에는 바다로 </li>
<li> 가을에는 산으로</li>
</ul>
</body>
</html>
표 만들기, <table>
표 전체는 <table> ... </table>로 감싸며 이 곳에 표제목, 헤드, 바디, 바닥을 모두 포함한다.
- <table> : 표 전체를 담는 컨테이너
- <caption> : 표 제목
- <thead> : 헤딩 셀 그룹
- <tfoot> : 바닥 셀 그룹
- <tbody>: 데이터 셀 그룹
- <tr>: 행. 여러개의 <td>,<th> 포함
- <th>: 제목(헤딩) 셀
- <td>: 데이터 셀
<table>
<caption> 표제목 </caption>
<thead> ... </thead>
<tfoot> ... </tfoot>
<tbody> ... </tbody>
</table>행과 열 만들기
표는 <tr> 태그를 이용하여 행 단위로 표현하며, 헤딩(제목) 정보를 가진 셀은 <th>로, 데이터 정보 셀은 <td> 로 표현한다.
<!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>(media 폴더에 사진이 있다는 전제 하)
하이퍼링크와 항해
HTML 페이지에서 다른 HTML 페이지를 연결하는 고리를 하이퍼링크(Hyper link)라고 부른다. 하이퍼링크는 텍스트나 이미지에 다른 웹 페이지의 주소를 달아서 만든다. 하이퍼링크는 같은 사이트에 다른 html 사이트뿐 아니라 다른 사이트에 있는 웹 페이지를 연결하기도 한다. 하이퍼링크를 따라 다른 웹 페이지로 이동하는 것을 항해 혹은 내비게이션(nevigation)이라고 부른다. 하이퍼링크는 줄여서 링크로 부르기도 한다.
href 속성 : 하이퍼링크로 이동할 HTML 페이지의 URL은 <a> 태그의 href 속성에 지정한다.
만약 이미지에 하이퍼링크를 만들고 싶은 경우엔 이미지 속성을 활용하면 된다.
<!-- 이미지에 하이퍼링크 만들기 !-->
<a href="http://www.naver.com>
<img src="naver.png" alt="네이버사이트">
</a><!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h3> 링크 만들기 </h3>
<hr>
포털 사이트
<ul>
<li> <a href="http://naver.com">네이버</a></li>
</ul>
신문 사이트
<ul>
<li><a href="http://www.etnews.com">
<img src="media/iconetnews.png" alt="전자신문">
</a></li>
</ul>
<hr>
<a href="2-17.html"> 예제 2-17로 이동</a>
</body>
</html>
인라인 프레임, <iframe>
<iframe> 태그를 활용하면 현재 HTML 페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 수 있다. <iframe> 태그에 의해 만들어지는 윈도우를 인라인 프레임 (inline frame) 이라고 부른다.
<!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>
<iframe> 태그는 <body> 태그 내에서만 사용되며, src 속성이 생략되면 브라우저에 영역만 만들어질 뿐 빈상태로 존재한다. 또한 인라인 프레임이 출력할 HTML 텍스트를 srcdoc 속성에 직접 작성할 수 있다. srcdoc 가 있으면 src는 무시된다.
target 속성
target 속성은 링크에 연결된 웹 페이지가 출력될 윈도우(탭)를 지정하는 것으로 사용할 수 있는 값은 _blank, _self, _parent, _top, 윈도우 의 다섯가지다.
- _blank: 새로운 브라우저 윈도우 (탭) 생성 (열기)
- _self: 현재 윈도우
- _parent: 부모 윈도우
- _top: 최상위 브라우저 윈도우
- 윈도우이름: 해당 이름의 윈도우
🎀