HTML CSS 자바스크립트 무작정 따라하기
Chapter 01. HTML과 CSS
HTML CSS 자바스크립트 무작정 따라하기 학습목표 HTML이 무엇인지 알 수 있다. 웹 브라우저와 편집기의 종류와 특징을 알 수 있다. HTML과 XHTML, 자바스크립트, 서버 스크립트 언어와의 관계를 알 수 있다. HTML 파일을 저장할 때의 주의점을 알 수 있다. 스타일 시트가 무엇인지 이해하고 사용해야 하는 이유를 알 수 있다. 스타일의 종류와 특징을 이해할 수 있다. HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 Hyper Text Markup Language의 약자 웹 문서를 만들기 위해 사용하기로 약속한 언어 자바나 비주얼 C++ 같은 전문적인 프로그래밍가 아니라 웹 문서를 만들기 위해 사용하는 특별한 약속 HTML을 왜 배울까? 웹 브라우저를 통해 보게 되는 모든 사이트들이 HTML로 만들어져 있다. 직접 홈페이지를 만들기 위해서 필요하다. 다른 사람이 만들어 놓은 웹 문서를 이해하기 위해서도 HTML을 알고 있어야 한다. HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 웹 브라우저 인터넷 익스플로러 한국마이크로소프트 홈페이지(www.microsoft.com/korea) 윈도우를 설치할 때 기본으로 설치되는 웹 브라우저 국내에서 가장 많은 사용자를 확보하고 있다. ActiveX 컨트롤 설치로 인한 불편함이 있다. 파이어폭스 모질라 한국 사이트 (www.mozillar.or.kr/ko) 오픈소스 웹 개발 프로젝트인 모질라(Mozillar)에서 개발한 웹 브라우저 인터넷 익스플로러 다음으로 많은 사용자 층을 가지고 있다. 추가 기능(애드온)을 더하며 사용할 수 있다. 오페라 오페라 소프트웨어 (www.opera.com) 파이어폭스 등장 이전부터 빠른 속도와 다양한 기능으로 주목받는 웹 브라우저 브라우저에 옷을 갈아입히듯 테마를 바꿀 수 있다. HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 텍스트 편집기 HTML 태그와 속성을 모두 알고 있어야 한다. 직접 태그를 제어할 수 있으므로 소스 코드가 깔끔하다. 하지만 입력 오류가 생기기 쉽다. 예) 메모장 HTML 전용 편집기 주요 태그를 자동 입력해 주고 태그 속성도 쉽게 선택할 수 있다. 입력 오류를 줄여준다. HTML 태그와 속성에 대해서 알고 있어야 한다. 예) 에디트플러스(EditPlus), 울트라 에디터(Ultra Editor) 등 위지윅 편집기 HTML 태그를 잘 몰라도 웹 문서를 작성할 수 있다. 불필요한 태그가 추가되어 파일의 크기가 커질 수 있다. 예) 드림위버, 나모 웹 에디터 등 HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 HTML과 XHML HTML이 점점 대중화되면서 문법이 느슨해지고, 웹 브라우저에서도 그런 점을 의식해 HTML 문법에 맞지 않아도 내용을 화면에 표시해 줌 좀더 엄격한 문법을 적용한 XHML 언어의 등장 HTML과 자바스크립트 HTML로 작성된 웹 문서는 이미지나 텍스트를 통해 내용을 보여주는 것 외에는 별다른 기능이 없기 때문에 웹 문서에 좀더 동적인 효과를 추가하기 위해 사용하는 프로그래밍 언어를 ‘자바스크립트(Javascript)’라고 한다. HTML 과 ASP/PHP 서버 컴퓨터에 있는 데이터베이스를 처리하기 위한 서버 스크립트 언어. 리눅스 서버라면 PHP를 사용하고 윈도우 서버라면 ASP를 사용한다. ASP나 PHP를 사용하더라도 기본 웹 문서는 HTML을 이용해 만든다. HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 ① 파일 확장자는 html이나 htm을 사용한다. 웹 브라우저에서 first.html 이나 first.htm은 다른 파일로 인식하므로 주의한다. ② 중간에 파일 이름을 바꾸지 않는다. 웹 문서에서는 파일 이름들이 하이퍼링크로 서로 연결되어 있기 때문에 파일 이름을 바꾸면 홈페이지가 정상적으로 동작하지 않을 수도 있다. ③ 파일 이름은 되도록 영문을 사용한다. 한글 파일 이름(예: 배경.jpg)을 인식하지 못하는 서버도 있어서 오류를 만들 수도 있다. ④ 파일 이름 안에 여백을 두거나 특수 문자를 사용하지 않는다. 웹 서버에 저장했을 경우에는 오류를 일으킬 수 있으므로 my_gallery.html처럼 하나의 단어로 연결하는 것이 좋다. HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 스타일 시트 스타일 시트(CSS)란? CSS는 캐스캐이딩 스타일 시트(Cascading Style Sheet)의 약자 스타일 : HTML 문서에서 자주 사용되는 글꼴이나 색상, 각 요소들의 배치 등 외형을 결정하는 요소들 예) 웹 문서에 <h4> 태그를 적용하는 모든 텍스트를 12픽셀 크기의 파란색으로 표시할 때 스타일 시트를 사용하지 않는다면 : 사용한 <h4> 태그를 모두 찾아 일일이 수정해야 한다. 스타일 시트를 사용한다면 : 스타일 시트에서 한번만 수정하면 된다. 스타일 시트를 사용해야 하는 이유 웹 문서의 디자인과 내용을 분리할 수 있다. 다양한 매체에 적합한 문서를 만들 수 있다. HTML CSS 자바스크립트 무작정 따라하기
HTML 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"> HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 스타일 시트의 종류 3) @import 문 이용 - 스타일 시트를 지원하지 않는 브라우저에서 아예 스타일 시트를 참조하지 않게 하려면 @import 문을 사용한다. - @import문을 사용할 때는 <link> 태그와 함께 사용한다. <link rel="stylesheet" href="style1.css"> <style type="text/css"> @import "style2.css" </style> 기본형식 <link rel="stylesheet" href=“상위 버전용 css 파일"> <style type="text/css"> @import “4.x대 브라우저용 css 파일" </style> 예 인라인 스타일 - 일부 태그에만 스타일을 적용하려고 할 때 사용한다. - 태그의 style 속성을 이용한다. 기본형식 Style=“속성값, 속성값, ..” 예 <p style="font-size:15px; color:green">바질(Basil)</p> HTML CSS 자바스크립트 무작정 따라하기
HTML 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> 예 HTML CSS 자바스크립트 무작정 따라하기
HTML 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> 예 HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 스타일의 종류 – ID 스타일 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> 예 HTML CSS 자바스크립트 무작정 따라하기
HTML 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> 결과는 어떻게 될까? 클릭! HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기