Chpater 2. HTML5를 이용한 기본 문서 만들기.
1. !DOCTYPE HTML
이 명령어는 이 문서가 HTML5로 작성될 것이라는 것을 알려준다. 반드시 첫 줄에 나와야 한다.
2. 주석문
HTML 문서 내에서의 주석문은 <!---->를 이용하여 작성하며, 브라우저에 의해 출력되지 않는다.
Ctrl + / 를 이용하여 사용할 수도 있다.
3. 헤드 부분
<head></head>로 표현되는 부분으로, 메타 태그, CSS스타일 시트, 자바스크립트 시트 등이 포함된다.
4. 바디 부분
<body><body>로 표현되는 부분으로, 이곳은 자바스크립트 코드를 포함할 수 있고, 본문 내용이 들어간다.
헤드 부분과 바디부분 사이에는 아무것도 들어갈 수 없다.
5. HTML 기본 문서 만들기
5-1. 타이틀 달기 <title>
페이지의 제목으로, head 내의 title 태그를 이용하여 작성한다.
5-2. 문단 제목 달기 <h1>,<h2>...
h1~h6까지 있으며, 숫자가 작을수록 글자의 크기는 커진다.
글자 크기는 브라우저가 결정하며, CSS스타일 시트를 이용하여 크기를 변경 가능하다.
5-3. 툴팁 달기
태그의 title 속성에 지정하여 본문에 마우스가 올라갈 때 설명문이 출력되게 할 수 있다.
5-4. 단락 나누기
HTML에서 문단은 단락으로 나눌 수 있으며, 하나의 단락은 <p>로 표현할 수 있다.
여러 개의 빈 칸은 하나로 취급되며, 엔터 키 역시 하나의 빈 칸으로 처리된다.
5-5. 수평선 긋기와 새로운 줄로 넘어가기.
각각 <hr> , <br>으로 표현할 수 있다. HTML문서에서 엔터는 한 개의 빈칸으로 표현되기 때문에 br 명령어를 써주어야 한다.
5-6. 문자, 기호, 심볼 입력
HTML 문서에서 문자들은 유니코드 UTF-8 코드체계를 사용한다.
그러나 <, > 등 예약어로 사용하는 문자나, 키보드로 입력할수 없는 특수 글자들은 두 방법으로 입력할 수 있다.
엔터티 표현과, 코드 표현이 있으며, 내용은 교재에서 확인이 가능하다.
5-7. 개발자 포맷 그대로 출력하는 명령어 <pre>
평소 p, h1~h6에는 코딩 상
엔터를 쳐도 한칸 띈 형식으로 나오지만
이런식으로 pre를 쓰면
엔터를 치면 정말 엔터를 친 형식으로 나오게 된다.
5-7. 텍스트 꾸미기
글자를 진하게, 이탤릭체 등 다양하게 꾸밀 수 있다.
<b>는 글자를 진하게 바꾼다.
<strong>은 글자를 중요하다고 표시한다. b 명령어와 비슷하다.
<em>은 글자를 강조한다.
<i>는 글자를 이탤릭으로 강조한다.
<b><i>를 조합하여 진한 이탤릭으로 강조할 수도 있다.
<small>은 원래 글자보다 한 단계 작은 글자를 입력한다.
<del>은 삭제, 즉, 취소선을 표시한다.
<ins>는 추가, 즉, 밑줄을 표시한다.
<sup>은 윗첨자를 입력하는 명령어, <sub>는 아랫첨자를 입력하는 명령어이다.
<mark>는 하이라이팅, 형광펜을 긋는 것 같은 효과를 볼 수 있다.
5-8. 블록 태그와 인라인 태그
HTML 태그는 블록 태그와 인라인 태그로 나뉘어진다.
블록태그는 항상 새 라인에서 시작하고, 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.
인라인 태그는 블록에 삽입되어 블록 콘텐트의 일부를 표현하는데 이용된다.
블록 태그에서 자주 사용되는 명령어는 div, p 명령어다.
<div>태그는 블록 태그로써 한 줄을 다 차지합니다.
<p> 태그도 마찬가지로 한 줄을 다 차지합니다.
이렇게 p 태그 밖에 쓰면 다른 줄로 갑니다.
5-9. HTML에서의 메타 데이터 삽입
6. 고급 문서 만들기
6-1. 이미지 삽입
사진 올리기
![이미지가 없습니다.]()
6-2. 리스트 만들기
리스트 명령어를 이용하여 리스트를 만들 수 있다.
ol, ul, dl 명령어가 있다.
ol 명령어
ol명령어는 순서가 있는 리스트이다.
ex) ol 명령어를 이용한 라면 만드는 법 리스트 작성
라면을 만드는 법 - type 1
- 물을 넣는다.
- 물을 끓인다.
- 라면과 스프를 넣는다.
- 끓인다.
- 완성
라면을 만드는 법 - type A
- 물을 넣는다.
- 물을 끓인다.
- 라면과 스프를 넣는다.
- 끓인다.
- 완성
- 리스트 안에 리스트 만들기
- 리스트 안의 리스트 1
- 리스트 안의 리스트 2
- 리스트 안의 리스트 3
- 정의 리스트 만들기
- 박종명
- 중부대학교 15학번 박종명이다.
<ol type="1">명령어는 순서표시를 숫자로 해달라는 뜻이다.
type=i은 이태릭 기호순서로, type=A는 영어 대문자 순서로 표시한다.
6-3 표 만들기 <table>
table 명령어를 통해 기본적인 표를 만들 수 있다.
웹 프로그래밍 성적표
| 이름 | HTML5 | CSS3 |
Javascript | 총점 |
| 김지환 | 100 | 100 | 100 | 300 |
| 박종명 | 100 | 100 | 100 | 300 |
| 고지원 | 100 | 100 | 100 | 300 |
6-3-1 나만의 시간표 만들기
table 명령어를 통해 나의 학교 시간표를 만들어 본다.
| 종명's 시간표 |
91514787 박종명 |
| 시간 |
월 |
화 |
수 |
목 |
금 |
09:10
~
10:00 |
|
보안
자료구조
C6-815 |
|
|
공
강 |
10:10
~
11:00 |
발명과특허
C6-0719 |
컴퓨터
네트워크
C6-833 |
11:10
~
12:00 |
|
방송연화연출의이해
C7-126 |
12:10
~
13:00 |
대학생활지도및진로설계
C6-831 |
13:10
~
14:00 |
|
생활영어 중급
(speaking)
C6-435 |
|
웹프로그래밍
C6-832 |
14:10
~
15:00 |
웹프로그래밍
C6-832 |
15:10
~
16:00 |
암호수학1
C6-831 |
서버기초실습
C6-833 |
공간과건축
C6-444 |
16:10
~
17:00 |
보안
자료구조
C6-815 |
17:10
~
18:00 |
|
6-4. 하이퍼링크 만들기
- <a>명령어를 이용하여 네이버 링크 만들기
네이버
- 이미지를 이용하여 링크 만들기
- target 속성을 이용하여 링크 만들기
_blank 속성
네이버 새 창으로 열기
_self 속성
네이버 현재 창으로 열기
- download 속성을 이용하여 이미지 다운로드 받는 하이퍼링크 만들기
다음 이미지 파일 다운로드
- 앵커 만들기
같은 홈페이지에 있는 링크 된 위치로 이동합니다.
6-5. 인라인 프레임
iframe 명령어를 이용하여 목록 창과 홈페이지 창 만들기
6-6. 비디오 넣기
귀여운 고양이 비디오 삽입