HTML CSS 자바스크립트 무작정 따라하기
Download
Report
Transcript HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트
무작정 따라하기
길벗
Chapter 01.
HTML과 CSS
학습목표
• HTML이 무엇인지 알 수 있다.
• 웹 브라우저와 편집기의 종류와 특징을 알 수 있
다.
• HTML과 XHTML, 자바스크립트, 서버 스크립트
언어와의 관계를 알 수 있다.
• HTML 파일을 저장할 때의 주의점을 알 수 있다.
• 스타일 시트가 무엇인지 이해하고 사용해야 하
는 이유를 알 수 있다.
• 스타일의 종류와 특징을 이해할 수 있다.
3
HTML CSS 자바스크립트 무작정 따라하기
HTML이란?
HTML
HTML이란
Hyper Text Markup Language의 약자
웹 문서를 만들기 위해 사용하기로 약속한 언어
자바나 비주얼 C++ 같은 전문적인 프로그래밍가 아니라 웹 문서를 만들기 위해 사용하는 특
별한 약속
HTML을 왜 배울까?
웹 브라우저를 통해 보게 되는 모든 사이트들이 HTML로 만들어져 있다.
직접 홈페이지를 만들기 위해서 필요하다.
다른 사람이 만들어 놓은 웹 문서를 이해하기 위해서도 HTML을 알고 있어야 한다.
4
HTML CSS 자바스크립트 무작정 따라하기
웹 브라우저
인터넷 익스플로러
HTML
한국마이크로소프트 홈페이지(www.microsoft.com/korea)
윈도우를 설치할 때 기본으로 설치되는 웹 브라우저
국내에서 가장 많은 사용자를 확보하고 있다.
ActiveX 컨트롤 설치로 인한 불편함이 있다.
파이어폭스
모질라 한국 사이트 (www.mozillar.or.kr/ko)
오픈소스 웹 개발 프로젝트인 모질라(Mozillar)에서 개발한 웹 브라우저
인터넷 익스플로러 다음으로 많은 사용자 층을 가지고 있다.
추가 기능(애드온)을 더하며 사용할 수 있다.
오페라
오페라 소프트웨어 (www.opera.com)
파이어폭스 등장 이전부터 빠른 속도와 다양한 기능으로 주목받는 웹 브라우저
브라우저에 옷을 갈아입히듯 테마를 바꿀 수 있다.
5
HTML CSS 자바스크립트 무작정 따라하기
HTML 편집기
HTML
텍스트 편집기
HTML 태그와 속성을 모두 알고 있어야 한다.
직접 태그를 제어할 수 있으므로 소스 코드가 깔끔하다. 하지만 입력 오류가 생기기 쉽다.
예) 메모장
HTML 전용 편집기
주요 태그를 자동 입력해 주고 태그 속성도 쉽게 선택할 수 있다. 입력 오류를 줄여준다.
HTML 태그와 속성에 대해서 알고 있어야 한다.
예) 에디트플러스(EditPlus), 울트라 에디터(Ultra Editor) 등
위지윅 편집기
HTML 태그를 잘 몰라도 웹 문서를 작성할 수 있다.
불필요한 태그가 추가되어 파일의 크기가 커질 수 있다.
예) 드림위버, 나모 웹 에디터 등
6
HTML CSS 자바스크립트 무작정 따라하기
HTML과 기타 언어들
HTML
HTML과 XHML
HTML이 점점 대중화되면서 문법이 느슨해지고, 웹 브라우저에서도 그런 점을 의식해
HTML 문법에 맞지 않아도 내용을 화면에 표시해 줌 좀더 엄격한 문법을 적용한 XHML
언어의 등장
HTML과 자바스크립트
HTML로 작성된 웹 문서는 이미지나 텍스트를 통해 내용을 보여주는 것 외에는 별다른 기
능이 없기 때문에 웹 문서에 좀더 동적인 효과를 추가하기 위해 사용하는 프로그래밍 언어
를 ‘자바스크립트(Javascript)’라고 한다.
HTML 과 ASP/PHP
서버 컴퓨터에 있는 데이터베이스를 처리하기 위한 서버 스크립트 언어.
리눅스 서버라면 PHP를 사용하고 윈도우 서버라면 ASP를 사용한다.
ASP나 PHP를 사용하더라도 기본 웹 문서는 HTML을 이용해 만든다.
7
HTML CSS 자바스크립트 무작정 따라하기
HTML 파일 저장시 주의 사항
HTML
① 파일 확장자는 html이나 htm을 사용한다.
웹 브라우저에서 first.html 이나 first.htm은 다른 파일로 인식하므로 주의한다.
② 중간에 파일 이름을 바꾸지 않는다.
웹 문서에서는 파일 이름들이 하이퍼링크로 서로 연결되어 있기 때문에 파일 이름을 바꾸면 홈페
이지가 정상적으로 동작하지 않을 수도 있다.
③ 파일 이름은 되도록 영문을 사용한다.
한글 파일 이름(예: 배경.jpg)을 인식하지 못하는 서버도 있어서 오류를 만들 수도 있다.
④ 파일 이름 안에 여백을 두거나 특수 문자를 사용하지 않는다.
웹 서버에 저장했을 경우에는 오류를 일으킬 수 있으므로 my_gallery.html처럼 하나의 단어로 연
결하는 것이 좋다.
8
HTML CSS 자바스크립트 무작정 따라하기
스타일 시트
CSS
스타일 시트(CSS)란?
•CSS는 캐스캐이딩 스타일 시트(Cascading Style Sheet)의 약자
•스타일 : HTML 문서에서 자주 사용되는 글꼴이나 색상, 각 요소들의 배치 등 외형을 결
정하는 요소들
예)
웹 문서에 <h4> 태그를 적용하는 모든 텍스트를 12픽셀 크기의 파란색으로 표시할 때
스타일 시트를 사용하지 않는다면 : 사용한 <h4> 태그를 모두 찾아 일일이 수정해야 한다.
스타일 시트를 사용한다면 : 스타일 시트에서 한번만 수정하면 된다.
스타일 시트를 사용해야 하는 이유
•웹 문서의 디자인과 내용을 분리할 수 있다.
•다양한 매체에 적합한 문서를 만들 수 있다.
9
HTML CSS 자바스크립트 무작정 따라하기
스타일 시트의 종류
CSS
1) 내부 스타일 시트
- 스타일 시트가 간단하거나 한 문서 안에서만 사용할 경우에는 <style> 태그를 사용하여 웹 문서
안에 스타일 시트 소스를 적어준다.
- 웹 문서를 가져올 때마다 스타일 시트 정보도 가져와야 하고, 여러 문서에서 사용되는 스타일을
수정해야 할 경우 각 문서마다 스타일 시트 소스를 수정해야 하기 때문에 번거롭다.
기본형식
<style type="text/css">
스타일1;
스타일2;
......
</style>
예
<style type="text/css">
body {
background-image:url(images/bg4.jpg);
background-repeat : repeat-x;
background-attachment: fixed; }
</style>
2) 외부 스타일 시트
- 웹 사이트를 제작할 때 여러 문서에서 사용할 스타일들을 별도의 파일로 저장해 놓는 것.
- 파일 확장자 *.css
- <link> 태그를 이용해 외부 스타일 시트 파일을 연결한다.
기본형식
예
<link rel="stylesheet" type="text/css" href="외부 스타일 시트 파일">
<link rel="stylesheet" href="mystyle.css" type="text/css">
10
HTML CSS 자바스크립트 무작정 따라하기
스타일 시트의 종류
CSS
3) @import 문 이용
- 스타일 시트를 지원하지 않는 브라우저에서 아예 스타일 시트를 참조하지 않게 하려면 @import
문을 사용한다.
- @import문을 사용할 때는 <link> 태그와 함께 사용한다.
기본형식
<link rel="stylesheet" href=“상위 버전용 css 파
일">
<style type="text/css">
@import “4.x대 브라우저용 css 파일"
</style>
예
<link rel="stylesheet" href="style1.css">
<style type="text/css">
@import "style2.css"
</style>
4) 인라인 스타일
- 일부 태그에만 스타일을 적용하려고 할 때 사용한다.
- 태그의 style 속성을 이용한다.
기본형식
예
Style=“속성값, 속성값, ..”
<p style="font-size:15px; color:green">바질(Basil)</p>
11
HTML CSS 자바스크립트 무작정 따라하기
스타일의 종류
– 태그 스타일
CSS
태그 스타일 : 문서 안의 특정 태그에 모두 적용된다.
기본형식
예
태그 {속성:속성값, 속성:속성값, …}
<html>
<head>
<title>주요 허브 소개 </title>
<style type="text/css">
h3 {color:blue}
p {font-size:12px; margin-left:20px;}
</style>
</head>
<body>
<h3>허브의 종류</h3>
<p>바질(Basil)</p>
<p>두통, 신경과민, ~ (중략) ~ 살균효과가 있
다.</p>
<p>캐모마일(Chamomile)</p>
<p>목욕제로 쓰면 ~ (중략) ~ 마시면 좋다. </p>
<p>레몬밤(Lemonbalm)</p>
<p>레몬밤의 차는 ~ (중략) ~ 청량음료로도 좋
다.</p>
</body>
</html>
12
HTML CSS 자바스크립트 무작정 따라하기
스타일의 종류
– 클래스 스타일
CSS
클래스 스타일 : 문서 안의 특정 부분에만 적용하는 스타일.
기본형식
예
.클래스 이름 {속성:속성값; 속성:속성값; ...}
<html>
<head>
<title>주요 허브 소개 </title>
<style type="text/css">
p {font-size:12px;}
.subtitle { color:blue; font-weight:bold;}
.accent1 { margin-left:20px; color:red;}
</style>
</head>
<body>
<h3>허브의 종류</h3>
<p>바질<span class="subtitle">(Basil)</span></p>
<p>두통, 신경과민, ~ (중략) ~ 살균효과가 있다.</p>
<p class="subtitle">캐모마일(Chamomile)</p>
<p>목욕제로 쓰면 ~ (중략) ~ 마시면 좋다. </p>
<p>레몬밤(Lemonbalm)</p>
<p class="accent1">레몬밤의 차는 ~ (중략) ~ 청량음료
로도 좋다.</p>
</body>
</html>
13
HTML CSS 자바스크립트 무작정 따라하기
스타일의 종류
– ID 스타일
CSS
ID 스타일 : 문서에서 특정 이름(id)을 가진 부분에 적용하는 스타일
기본형식
예
#ID {속성:속성값; 속성:속성값; ...}
<head>
<title>주요 허브 소개 </title>
<style type="text/css">
body {
background-image:url(images/bg5.jpg);
background-repeat : repeat-x;
}
p {font-family: 굴림; font-size:12px;}
.subtitle { color:blue; font-weight:bold;}
#green1 {color:green; font-family:바탕}
h3#under {text-decoration:underline;}
</style>
</head>
<body>
<h3 id="under">허브의 종류</h3>
<p id="under">바질(Basil)</p>
<p>두통, 신경과민, ~ (중략) ~ 살균효과가 있다.</p>
<p class="subtitle">캐모마일(Chamomile)</p>
<p>목욕제로 쓰면 ~ (중략) ~ 마시면 좋다.</p>
<p id="green1">레몬밤(Lemonbalm)</p>
<p>레몬밤의 차는 ~ (중략) ~ 청량음료로도 좋다.</p>
</body>
14
HTML CSS 자바스크립트 무작정 따라하기
스타일 적용 단계
CSS
스타일과 우선 순위
① 스타일을 정의할 때 !important를 넣어주면 적용 위치에 상관없이 가장 먼저 적용됩니다.
② 여러 가지 스타일 시트가 적용되었을 때 가장 마지막에 적은 스타일 시트가 우선 순위를
가집니다.
③ 해당 요소에 대한 스타일이 정의되어 있지 않다면 상속된 값을 따릅니다. 만일 상속된 값
도 없을 경우에는 브라우저의 기본 값을 따릅니다.
④ ID 스타일 > 클래스 스타일 > 태그 스타일의 순서를 따릅니다.
예
스타일 정의 부분
스타일 적용 부분
<style type="text/css">
p {font-family: 굴림; font-size:12px;}
.subtitle { color:blue; font-weight:bold;}
</style>
<p style="color:red; font-family:바탕" class=
"subtitle">캐모마일(Chamomile)</p>
결과는 어떻게 될까? 클릭!
15
HTML CSS 자바스크립트 무작정 따라하기
CSS
16
HTML CSS 자바스크립트 무작정 따라하기