Transcript Document
www.kyobobook.co.kr 웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 교보문고 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML이란? HyperText Markup Language • HTML 기본 문법 구조 <element attributes = “value” attributes = value” .....> contents </element> <태그명 속성=“값” 속성=“값” 속성=“값”....> 내용 </태그명> www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • 태그란? ‘< >’ 두 괄호 안에 설정된 명령어 1. 2. 3. 4. 5. HTML 태그는 시작 태그와 끝 태그가 쌍을 이루고 있음 <HTML> 태그로 시작하고 반드시 </HTML> 태그로 끝나야 함 <태그명>을 시작 태그라 부르며, </태그명>을 종료태그라고 부름 태그를 교차하여 사용하지 못함 띄어쓰기와 줄바꿈를 인식하지 못함 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML의 기본 구조 1. 2. <html>, <head>, <title>, <body> 4가지의 기본태그로 구성 DOCTYPE과 문자 인코딩을 지정 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="UTF-8"> 05: <title> html 문서의 제목이 들어갑니다.</title> 06: </head> 07: <body> 08: html 문서의 본문 내용이 들어갑니다. 09: </body> 10:</html> www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • DOCTYPE 어떤 유형으로 만들어진 것인지 작성한 HTML 문서의 유형을 정의하 는 요소 1. HTML5 이전 버전에서 사용한 DOCTYPE 중에서 가장 많이 사용 한 형태 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2. HTML5에서는 DOCTYPE은 아주 간단한 형태로 정의 어떤 브라 우저에서도 표준 모드로 랜더링할 것으로 간주하기 때문 <! DOCTYPE html> www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • 인코딩 문자셋을 컴퓨터가 이해할 수 있는 바이트와의 매핑 규칙 한글 인코딩에서 MS949(윈도 OS에서 기본으로 사용), UTF-8 • UTF-8 방식 <meta charset="UTF-8"> • MS949 방식 <meta charset="EUC-KR"> UTF-8 전 세계적으로 모두 통용될 수 있는 표준화된 텍스트 데이터를 표현하기 위해서 만들어진 인코딩 방식 charset 하나의 언어권에서 사용하는 언어를 표현하기 위한 모든 문자(활자)의 모임 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML 문서의 시작과 종료(<html> ~ </html>) 1. <html> ~ </html>는 지금 작성하고 있는 문서가 HTML 언어로 만들어 졌다는 것을 알려줌. 2. HTML 문서의 시작을 <html> 로 종료를 </html> 로 명시해 줌. 3. 웹에 있는 모든 HTML 문서는 반드시 <html>로 시작해서 </html>로 끝나야 함. www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML 문서의 머리 부분(<head> ~ </head>) 1. <head> 태그는 HTML의 머리말에 해당되는 부분. 2. 이 태그 내부에 <title> 태그를 포함하는데, <title> 태그 내부에 기 술한 내용은 웹 브라우저의 화면 상단에 나타남. 3. 타이틀(title)을 제외하고는 HEAD 부분에 기술한 내용은 웹 브라우 저를 통해 사용자에게 보이지 않음. 4. HTML 문서에 관한 정보들만을 알릴 뿐임. 5. 자바스크립트나 스타일시트로 문서의 형태를 정의할 때 사용. www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML 문서의 타이틀(<title> ~ </title>) 1. 2. 3. 4. <title> 태그에 기술한 내용은 웹 브라우저의 화면 상단에 나타남. HTML 문서의 제목(타이틀)을 지정하는 태그 이 태그에는 64문자 이내로 타이틀을 기입하는 것이 좋음 HTML 문서의 타이틀만 보고도 문서의 내용을 알아낼 수 있도록 간단하고 명료한 문구로 정하는 것이 좋다. www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML 문서의 몸통 부분(<body> ~ </body>) 1. <body>와 </body> 안에 기술한 내용은 웹 브라우저 화면에 바로 나타남. 2. <body> 태그는 HTML 문서의 실제적인 내용이 들어가는 곳임. 3. <head> 부분에 들어가는 태그를 제외하고는 모든 태그가 <body> 안에 기술. 4. 웹 브라우저를 통해 보여 지는 HTML 문서들은 BODY 부분에 기 술한 각 태그 및 텍스트임. www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML문서의 기본태그 사용하기 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • 소스 내에 주석 삽입하기 1. 주석은 HTML 문서에 기술된 내용에 대해 HTML 작성한 사람에게 알리는 설명 2. 웹 브라우저는 주석문에 대해서는 인식할 수 없는 영역 3. HTML 문서에 대한 이해를 돕기 위한 문장들을 주석 태그 내부에 기술하면 주석 태그로 둘러싼 부분 전체가 설명으로 취급되어 브라우저에 의해 출력되지 않음. 4. 주석 태그는 '<!--'로 시작해서 '-->'로 끝나야 함. 5. 이 태그를 사용할 때 한 가지 주의해야 할 점은 주석 태그인 '<!--'을 기술할 때 문자 사이에 공백이 있어서는 안 됨. 6. HTML 문서에 주석태그를 삽입하여 결과를 확인해 보면, 주석 태그내의 문장들은 웹 브라우저를 통해 볼 수 없음. www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 01. HTML 기본 문법 익히기 • HTML 문서에 주석 처리하기 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 엔터키로 줄 바꾸기 실패 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • <br/>태그로 줄 바꾸기 성공 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 문단을 나누는 <p>태그 1. <p> 태그는 paragraph의 약어로서 문단을 나눌 때 사용. 2. <p> 태그는 줄을 바꾼 후 한 줄을 공백으로 만들어 줌. 3. <br> 태그와 <p> 태그는 줄을 바꾸어주지만 차이점 • <br> 태그는 단순히 줄 바꿈을 위한 태그이므로 여러 번 기술하면 기술한 횟수만큼 빈 줄이 생기지만 • <p> 태그는 연속적으로 여러 번 사용해도 문단을 나눈다는 의미를 갖는 태그이기 때문에 처음 나온 <p> 태그로 이미 하나의 문단을 구성하였다고 인식하고 나머지 <p> 태그에 대해서는 무시해 버림 • <p> 태그를 여러 번 연속적으로 기술해봐야 아무런 효과를 얻을 수 없다. www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • <p>태그로 문단 나누기 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 스페이스바로 공백 처리 실패 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 로 공백 처리하기 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 특수 문자를 출력하는 &특수이름, &#아스키코드 1. 특수 문자는 없는 문자나 2. 특수 문자를 3. 지정할 때는 넣어 지정할 특수문자 키보드로 직접 입력하여 웹 브라우저로 보여줄 수 HTML 문서에 예약어로 사용하고 있는 문자를 의미 나타낼 때는 “&”로 시작하여 “;”로 끝냄. 특수문자의 이름을 지정하거나 아니면 아스키 코드를 수 있음. 특수이름 아스키코드 특수문자 특수이름 아스키코드 < < < Ⓒ © © > > > ? ® ® & & & ™ ™ “ " " ( ( 공백   ) ) www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 특수 문자 출력하기 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 자유롭게 표현하는 <pre>태그 1. HTML에서 작성한 문장 형태가 그대로 브라우저에 출력 2. 원하는 곳에 지정한 문장을 배치하고 싶을 때 사용 3. <pre>와 </pre> 안에 포함되는 모든 텍스트는 시스템의 고정 폰트로 보여지며, 탭이나 엔터, 연속된 공백으로 편집한 모양 그대로 브라우저에 나타난다. 4. <pre> 태그 안에서는 다른 태그를 사용하지 않아야 한다. www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 입력한 대로 자유롭게 표현하는 <pre>태그 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 제목을 위한<Hn>태그 1. Headline의 약어로 문서의 제목을 표현하기 위해 사용 2. 제목 글자의 크기는 6단계(H1~H6)로 나타낼 수 있는데, 숫자가 작을 수록(H1) 제목의 크기는 크고, 숫자가 클수록(H6) 제목의 크기는 작다. <hn> ~ </hn> www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 다양한 크기의 제목 텍스트 출력하기 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 수평선을 그리는 <hr>태그 1. <hr>태그는 horizontal ruler의 약어 2. <hr>태그를 사용하면 자동으로 줄바꿈이 실행되기 때문에 문단을 구분하는 용도로도 사용 <hr width="길이" color="색상명/색상코드" noshade> 속성 내용 width 브라우저의 너비에 대한 비율이나 픽셀 수로 수평선의 길이를 지정 (pixel 또는 %) color 수평선의 색상 지정 (색상명/색상코드) noshade 선의 입체감을 제거하여 평면 느낌으로 적용 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 다양한 형태의 수평선 출력하기 www.kyobobook.co.kr 01. 홈페이지 제작을 위한 필수 선택 HTML 기본 문법 익히기 Section 02. 기본 태그 익히기 • 다양한 형태의 수평선 출력하기 www.kyobobook.co.kr