상세정보
HTML CSS 자바스크립트 무작정따라하기
- 저자
- 고경희
- 출판사
- 길벗
- 출판일
- 2008-06-23
- 등록일
- 2010-03-04
- 파일포맷
- PDF
- 파일크기
- 39MB
- 공급사
- 교보문고
- 지원기기
-
PC
프로그램 수동설치
뷰어프로그램 설치 안내
책소개
실무 예제 및 동영상으로 배우는 HTML, CSS, 자바스크립트 입문서!
이 책은 HTML, CSS, 자바스크립트를 컴퓨터 사용자가 혼자서도 학습할 수 있도록 따라하기 형식으로 구성한 안내서이다. HTML로 토대를 만들고 CSS로 디자인을 완성하고 자바스크립트로 동적인 효과를 살리는 과정을 설명한다. 본문은 새로이 배우게 되는 웹 프로그래밍의 기초 이론을 표와 그림을 통해 해설한다.
그런 다음 본문 내용에서 꼭 알아야 하는 부분을 무작정 따라해 볼 수 있도록 하여 웹 프로그래밍에 무난하게 접근하도록 해준다. 또한 공부한 내용을 직접 응용해 볼 수 있는 예제를 수록하였다. 부록 CD에서 이에 대한 해답을 찾을 수 있다. 부록 CD에는 예제 파일 및 동영상 강의 파일, 각종 웹 프로그래밍 관련 유틸리티가 수록되어 있다.
그리고 본문에는 학습의 흐름을 이어주면서 본문 내용의 길잡이 역할을 해주는 가정교사, 알고 있으면 유익한 상식이나 참고하면 좋은 홈페이지 제작 배경 지식들을 제시하는 잠깐만요, 입문자에서 중급 이상의 사용자가 되는 데 꼭 필요한 심화 이론을 소개한 한걸음 더 등 다양한 코너를 통해 추가의 팁을 제공한다.
▶ 이 책의 구매 포인트!
매뉴얼과 같은 나열식이 아닌 예제 중심으로 구성했으며, 배우기 쉬운 내용부터 정리하였다. 다양한 예제를 재미있게 따라 하면서 HTML, CSS, 자바스크립트를 자유자재로 실무에 적용할 수 있는 응용력을 키울 수 있다.
저자소개
고경희
홍익대학교 공과대학 전산과 및 동 대학원 졸업
현) 마이크로소프트 윈도우 비스타 공인 베타테스터
Adobe 유저 그룹 매니저
한국디지털대학교 웹 기초(HTML) 분야 강사
컴퓨터 활용 및 웹 프로그래밍 정보에 대한 다양한 의견을 개진하는
Webguru(http://www.webguru.pe.kr) 운영
저서)
《인터넷 무작정 따라하기》
《테마가 있는 HTML&CSS 무작정 따라하기》
《드림위버 8 무작정 따라하기》
《제로보드 무작정 따라하기》
《윈도우 비스타 무작정 따라하기》
《회사에서 바로 통하는 파워포인트 2007》
목차
머리말
베타테스터들의 말말말!
이 책의 구성
부록 CD 구성
이 책은 이렇게 공부하세요
첫째마당 HTML과 CSS
01 웹 문서를 논리적이고 깔끔하게 만드는 HTML과 CSS
HTML이란?
HTML을 배우는 이유
전문 HTML 통역사, 웹 브라우저
인터넷 익스플로러
파이어폭스
오페라
브라우저에서 HTML을 읽는 방법
[잠깐만요] HTML과 표준 규약
HTML 편집 프로그램
메모장
HTML 전용 편집기
위지윅 편집기
HTML과 관련된 웹 언어
XHTML
자바스크립트
서버 스크립트 언어
[잠깐만요] HTML 파일을 저장할 때 주의하세요.
스타일 시트란
스타일 시트를 사용해야 하는 이유
스타일 시트의 사용방법
스타일의 종류
태그 스타일
클래스 스타일
ID 스타일
스타일의 적용 규칙
상속
스타일의 우선순위
[잠깐만요] 웹 표준이란?
무작정 따라하기 실습 파일 설치하기
무작정 따라하기 나의 첫 번째 HTML 문서 만들기
무작정 따라하기 윈도우 탐색기에서 파일 확장자 표시하기
02 웹 문서의 형태를 결정하는 기본 구조와 배경 다루기
HTML 문서의 기본 구조
HTML 태그의 특징
여는 태그와 닫는 태그의 구분
대소문자를 구별하지 않고 사용
들여쓰기가 적용되지 않음
[잠깐만요] 태그나
태그가 빠진 이유
글자와 글자 사이는 한 칸만 인식
태그 안에 속성 정의가 가능
비추천 태그와 속성이 존재
문서 정보 지정하기 -
태그
문자셋 지정하기
키워드와 요약 정보 제공하기
웹 문서 제작 프로그램과 제작자 지정하기
[잠깐만요] 문서 유형을 알려주는 DOCTYPE
일정 시간 후 자동으로 다른 홈페이지 연결하기
문서 제목 지정하기 -
태그
<br> 단락 제목 지정하기 - <hn> 태그
<br> 수평선 삽입하기 - <hr> 태그
<br> 주석 삽입하기 - <!-- -->
<br> 글자색 바꾸기 - color 속성
<br> 색상 표시 방법
<br> [잠깐만요] 스타일 속성 표를 읽는 방법
<br> 웹 문서의 배경 다루기 - background 속성
<br> 문서 배경색 바꾸기 - background-color 속성
<br> 배경 이미지의 경로 지정하기 - background-image 속성
<br> 배경 이미지 반복하기 - background-repeat 속성
<br> 배경 이미지 고정하기 background-attachment 속성
<br> 배경 이미지의 위치 지정하기 - background-position 속성
<br> 모든 속성을 한꺼번에 지정하기 - background 속성
<br> 무작정 따라하기 자주 사용하는 메모장 프로그램의 바로 가기 만들기
<br> 무작정 따라하기 오른쪽 아래에 고정된 배경 이미지 삽입하기
<br> 무작정 따라하기 중요한 내용을 형광펜으로 색칠하기
<br> 실전예제
<br>
<br>03 웹 문서에 내용을 채우는 글자와 단락 다루기
<br> 단락 구분하기 - <p> 태그
<br> 줄 바꾸기 - <br> 태그
<br> [잠깐만요] <p> 태그를 줄바꿈 태그로 사용하지 마세요.
<br> 다양한 텍스트 관련 태그들
<br> 사용자의 입력 형식을 그대로 보여주기 - <pre> 태그
<br> 인용한 내용을 구별하기 - <blockquote> 태그
<br> 기타 텍스트 태그들
<br> 순서 목록 만들기 - <ol> / <li> 태그
<br> 순서없는 목록 만들기 - <ul> / <li> 태그
<br> 정의 목록 만들기 - <dl> / <dt> / <dd> 태그
<br> 글꼴 다루기 - font 속성
<br> 글꼴 지정하기 - font-family
<br> 글자 크기 지정하기 - font-size
<br> 이탤릭체 지정하기 - font-style
<br> 글꼴 굵기 지정하기 - font-weight
<br> 작은 대문자 표시하기 - font-variant
<br> 줄 간격 지정하기 - line-height 속성
<br> 글자 간격과 단어 간격 지정하기 - letter-spacing / word-spacing 속성
<br> 단락 다루기 - text 속성
<br> 단락의 첫 글자 들여쓰기 - text-indent 속성
<br> 텍스트 정렬하기 - text-align 속성
<br> 글자에 효과주기 - text-decoration 속성
<br> 무작정 따라하기 웹 문서에 텍스트 입력하기
<br> 무작정 따라하기 순서 없는 목록으로 항목 나열하기
<br> 무작정 따라하기 정의 목록을 이용하여 항목 나열하기
<br> 무작정 따라하기 글자를 보기 좋게 정리하기
<br> 무작정 따라하기 웹 문서의 텍스트 단락 구분하기
<br> 무작정 따라하기 스타일 시트를 이용한 텍스트 조절하기
<br>
<br>
<br>04 여백과 테두리를 잡아주는 박스 모델 스타일 시트 다루기
<br> 박스(box) 형태의 텍스트 단락
<br> 바깥 여백 지정하기 - margin 속성
<br> 안 여백 지정하기 - padding 속성
<br> 테두리 지정하기 - border 속성
<br> 테두리 두께 지정하기 - border-width 속성
<br> 테두리 색상 지정하기 - border-color 속성
<br> 테두리 스타일 지정하기 - border-style 속성
<br> 목록 스타일 지정하기 - list-style 속성
<br> 목록의 불릿 유형 지정하기 - list-style-type 속성
<br> 불릿 위치 지정하기 - list-st</p>
</div>
<!--
<div class="btnarea tac">
<a href="/ebook/?mode=" class="btn-d btn-main">목록</a>
</div>
-->
<!-- //신간도서 콘텐츠 -->
</div>
<section id="mbooks2">
<script type="text/javascript">
function onNoticeShow($thisObject, targetObjectId) {
$('#notice01_menu, #notice02_menu, #notice03_menu').hide();
$('#notice01_add, #notice02_add, #notice03_add').hide();
$('#notice01, #notice02, #notice03').attr('class', 'tab-off');
$thisObject.removeClass('tab-off');
$thisObject.addClass('tab-on');
$('#'+targetObjectId+'_menu').show();
$('#'+targetObjectId+'_add').show();
}
</script>
<div id="mnotice2" class="d_width">
<div class="tit-wrap wow delay2 fadeInDown">
<span>연관도서</span>
<span>연관도서를 소개해드립니다!</span>
</div>
<!-- 인기도서 -->
<div class="tab-off" id="notice02"><a href="#notice02" onkeypress="" onclick="onNoticeShow($(this).parent(), 'notice02');return false;" class="dpb" title="출판사동일 탭 보기"><span>출판사동일</span></a>
<div class="tabcontent" id="notice02_menu" style="display:none;">
<ul>
<li>
<a href="/ebook/detail/?goods_id=4808975602818" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808975602818/M4808975602818.jpg" alt="GOOD DESIGN (좋아 보이는 것들의 비밀)">
</a>
<a href="/ebook/detail/?goods_id=4808975602818" class="subject">GOOD DESIGN (좋아 보이는 것들의 비밀)</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=120792145" class="thumb thumb-v1">
>
<img src="/images/bookimg/424232729.jpg" alt="그림으로 이해하는 네트워크 구조와 기술">
</a>
<a href="/ebook/detail/?goods_id=120792145" class="subject">그림으로 이해하는 네트워크 구조와 기술</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4808975607189" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808975607189/M4808975607189.jpg" alt="쇼핑몰 창업 운영 무작정 따라하기">
</a>
<a href="/ebook/detail/?goods_id=4808975607189" class="subject">쇼핑몰 창업 운영 무작정 따라하기</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4808975605963" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808975605963/M4808975605963.jpg" alt="풍경사진 잘 찍는 100가지 방법">
</a>
<a href="/ebook/detail/?goods_id=4808975605963" class="subject">풍경사진 잘 찍는 100가지 방법</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4808975604782" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808975604782/M4808975604782.jpg" alt="젊은 그녀 전쟁터를 즐겨라">
</a>
<a href="/ebook/detail/?goods_id=4808975604782" class="subject">젊은 그녀 전쟁터를 즐겨라</a>
</li>
</ul>
</div>
</div>
<!-- //인기도서 -->
<!-- 신간도서 -->
<div class="tab-off" id="notice01"><a href="#notice01" onkeypress="" onclick="onNoticeShow($(this).parent(), 'notice01');return false;" class="dpb" title="저자동일 탭 보기"><span>저자동일</span></a>
<div class="tabcontent" id="notice01_menu" style="display:none;">
<ul class="clearfix wow delay3 fadeInUp">
<li>
<a href="/ebook/detail/?goods_id=4808960471573" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808960471573/M4808960471573.jpg" alt="시나공 TOEIC 파트 1,2,3,4 실전 문제집. 2">
</a>
<a href="/ebook/detail/?goods_id=4808960471573" class="subject">시나공 TOEIC 파트 1,2,3,4 실전 문제집. 2</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4808975601590" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808975601590/M4808975601590.jpg" alt="컴퓨터 과학의 이해">
</a>
<a href="/ebook/detail/?goods_id=4808975601590" class="subject">컴퓨터 과학의 이해</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4808959952380" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808959952380/M4808959952380.jpg" alt="고릴라 토익 실전모의고사">
</a>
<a href="/ebook/detail/?goods_id=4808959952380" class="subject">고릴라 토익 실전모의고사</a>
</li>
</ul>
</div>
</div>
<!-- //신간도서 -->
<!-- 이책과 함께 대출한 도서 -->
<div class="tab-on" id="notice03"><a href="#notice03" onkeypress="" onclick="onNoticeShow($(this).parent(), 'notice03');return false;" class="dpb" title="함께 대출한 도서 탭 보기"><span>함께 대출한 도서</span></a>
<div class="tabcontent" id="notice03_menu">
<ul class="clearfix wow delay3 fadeInUp">
<li>
<a href="/ebook/detail/?goods_id=4808998934378" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808998934378/M4808998934378.jpg" alt="알아두면 쓸 데 있는 신 잡학상식">
</a>
<a href="/ebook/detail/?goods_id=4808998934378" class="subject">알아두면 쓸 데 있는 신 잡학상식</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4808954655972" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808954655972/M4808954655972.jpg" alt="여행의 이유">
</a>
<a href="/ebook/detail/?goods_id=4808954655972" class="subject">여행의 이유</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4801191043601" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4801191043601/M4801191043601.jpg" alt="위기주도학습법">
</a>
<a href="/ebook/detail/?goods_id=4801191043601" class="subject">위기주도학습법</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4808976162946" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4808976162946/M4808976162946.jpg" alt="영한 한영 의학사전 (컬러판)">
</a>
<a href="/ebook/detail/?goods_id=4808976162946" class="subject">영한 한영 의학사전 (컬러판)</a>
</li>
<li>
<a href="/ebook/detail/?goods_id=4801197743031" class="thumb thumb-v1">
>
<img src="/images/bookimg/kyobo/4801197743031/M4801197743031.jpg" alt="핏블리 헬스 스트렝스 전략집">
</a>
<a href="/ebook/detail/?goods_id=4801197743031" class="subject">핏블리 헬스 스트렝스 전략집</a>
</li>
</ul>
</div>
</div>
<!-- //신간도서 -->
</div>
</section>
<form name="action_form" method="post" action="/action/">
<input type="hidden" name="goods_id" >
<input type="hidden" name="action_mode" >
<input type="hidden" name="content_sort" value="017" >
<input type="hidden" name="return_url" value="/ebook/detail/?goods_id=4808975607547">
</form>
</div>
<div id="maside">
<p class="tit"><span>QUICK</span>SERVICE</p>
<ul>
<li><a class="ico ico1" href="/mylibrary?mode=1" title="대출현황 페이지로 이동합니다.">대출현황</a></li>
<li><a class="ico ico2" href="/mylibrary?mode=2" title="예약현황 페이지로 이동합니다.">예약현황</a></li>
<li><a class="ico ico3" href="/info/?mode=3" title="이용안내 페이지로 이동합니다.">모바일</br>이용안내</a></li>
</ul>
<a href="#header" class="top-btn">TOP</a>
</div>
<div id="maside-open" class="">
<a href="javascript:void(0);" onclick="mobile_aside();" title="메뉴 오픈"></a>
</div>
<script>
function mobile_aside() {
if($("#maside-open").hasClass("on")) {
$("#maside-open").removeClass("on");
$("#maside").css({
"display" : "none",
});
} else {
$("#maside-open").addClass("on");
$("#maside").css({
"display" : "block",
});
}
}
window.onresize = function() {
var browser_width = jQuery(window).width();
if(browser_width > 1670) {
$("#maside").css({
"display" : "block",
});
} else {
$("#maside").css({
"display" : "none",
});
}
}
</script>
<footer>
<div class="fmn">
<div class="d_width">
<ul class="clearfix">
<!--<li><a href="/pages/?mode=privacy" title="개인정보처리방침 페이지로 이동합니다.">개인정보처리방침</a></li>
<li><a href="/pages/?mode=email" title="이메일무단수집거부 페이지로 이동합니다.">이메일무단수집거부</a></li>-->
</ul>
</div>
</div>
<div id="address" class="d_width">
<p>(05006) 서울 광진구 능동로 209 세종대학교 학술정보원 <span class="mlp20">TEL. 02-3408-1826</span><span class="mlp20">FAX. 02-3408-3559</span><span class="mlp20"></p>
<p>COPYRIGHT ⓒ YES24. ALL RIGHTS RESERVED.</p>
</div>
</div>
<iframe title="process" frameborder=0 marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 name="process" height=0 width=0></iframe>
</footer>
</body>
</html> 
