본문 바로가기

추천 검색어

실시간 인기 검색어

완성된 웹사이트로 배우는 자바스크립트

Mana 지음 | 신은화 옮김
한빛미디어

2024년 04월 01일 출간

국내도서 : 2024년 04월 03일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 pdf (14.78MB)
ISBN 9791169218009
지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어
교보eBook App 듣기(TTS) 불가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.

PDF 필기가능 (Android, iOS)
소득공제
소장
정가 : 21,600원

쿠폰적용가 19,440

10% 할인 | 5%P 적립

이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.

카드&결제 혜택

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
  • 리뷰 작성 시, e교환권 추가 최대 200원

작품소개

이 상품이 속한 분야

아무리 디자인을 잘해도 자바스크립트를 제대로 활용하지 못한다면 표현하고자 하는 웹사이트를 만들기 어렵습니다. 사용자와 전하고자 하는 콘텐츠에 따라 그에 맞는 디자인과 기능을 더해야 하는데 이때 필요한 것이 바로 자바스크립트이기 때문입니다. 하지만 자바스크립트를 이론부터 배우기 시작하면 어렵고 막막할 수 있습니다. 프로그래밍을 하다 보면 어떤 기능을 어떻게 구현해야 하는지 잘 떠오르지 않기도 합니다. 이 책에서는 이미 완성된 웹사이트를 기반으로 자바스크립트의 중요한 개념과 기능을 차근차근 설명합니다. 따라서 어떤 기능이 어떻게 활용되는지 쉽게 익히고 오늘 당장 나만의 웹사이트를 만드는 데 활용할 수도 있습니다. 자바스크립트를 처음 배운다면, 배우다가 포기했다면 이 책으로 시작해보세요!
CHAPTER 1 자바스크립트로 할 수 있는 것
1.1 자바스크립트란
1.2 자바스크립트로 할 수 있는 것
1.3 자바스크립트를 사용한 여러 웹사이트

CHAPTER 2 자바스크립트 맛보기
2.1 자바스크립트는 어디에 작성할까
2.2 자바스크립트를 작성하는 환경을 준비해보자
2.3 첫 자바스크립트를 작성해보자
2.4 자바스크립트를 작성할 때의 기본 규칙
2.5 콘솔을 사용해보자

CHAPTER 3 자바스크립트 기초 배우기
3.1 작성할 컬러 피커 소개
3.2 필요한 파일 준비하기
3.3 컬러 피커의 컬러값 가져오기
3.4 텍스트 바꿔보기
3.5 DOM 이해하기
3.6 템플릿 문자열로 표시하기
3.7 상수로 깔끔하게 코드 정리하기
3.8 컬러 코드를 표시하는 ‘계기’ 만들기
3.9 함수로 선택한 색 가져오기
3.10 페이지 배경색 바꾸기
3.11 조건을 붙여서 색상명 표시하기

CHAPTER 4 이벤트로 처리하기
4.1 이벤트란
4.2 로딩 중인 이미지 만들기
4.3 로딩 중인 이미지 만들기 - CSS 클래스 추가하기
4.4 버튼을 클릭하여 다크 모드로 바꾸기
4.5 버튼을 클릭하여 다크 모드로 바꾸기 - CSS 클래스 바꾸기
4.6 버튼을 클릭하면 다크 모드로 바꾸기 - 버튼 텍스트 바꾸기
4.7 입력한 글자 수 세어보기
4.8 입력한 글자 수 세어보기 - length로 카운트하기
4.9 입력한 글자 수 세어보기 - 글자 수에 따라 다르게 표시하기
4.10 버튼 상태 변경
4.11 버튼 상태 변경 - 체크하면 버튼 활성화시키기
4.12 버튼 상태 변경 - 더욱 효율적인 구현 방법 생각하기
4.13 페이지의 스크롤 양 표시
4.14 페이지의 스크롤 양 표시 - 스크롤 양 가져오기
4.15 페이지의 스크롤 양 표시 - 페이지 사이즈 가져오기
4.16 페이지의 스크롤 양 표시 - 계산식 작성

CHAPTER 5 여러 데이터 사용해보기
5.1 이미지 목록 페이지 소개
5.2 insertAdjacentHTML로 HTML 태그 삽입하기
5.3 배열로 여러 이미지 파일명 모으기
5.4 배열 안에 있는 이미지 표시하기
5.5 for 문의 반복 처리 개념 이해하기
5.6 for 문으로 이미지 목록 표시하기
5.7 변수 let과 상수 const의 차이점
5.8 객체로 이미지, 메뉴명, 가격 정리
5.9 객체 정보 가져오기
5.10 배열과 객체를 조합하여 데이터를 하나로 정리하기
5.11 목록 표시하기
5.12 분할 대입으로 깔끔한 코드 만들기

CHAPTER 6 애니메이션 추가하기
6.1 움직임이 있는 웹사이트 예시 보기
6.2 움직임이 있을 때 효과적인 이유
6.3 안정감을 주는 움직임이란
6.4 제목이 밑에서부터 떠오르는 것처럼 나타내기
6.5 제목이 밑에서부터 떠오르는 것처럼 나타내기 - 애니메이션 기본 작성법
6.6 제목이 밑에서부터 떠오르는 것처럼 나타내기 - 여러 애니메이션 추가하기
6.7 제목이 밑에서부터 떠오르는 것처럼 나타내기 - 움직임에 상세 설정 더하기
6.8 제목에 사용할 수 있는 다양한 애니메이션
6.9 여러 이미지를 순서대로 표시하기
6.10 여러 이미지를 순서대로 표시하기 - 모든 클래스 가져오기
6.11 여러 이미지를 순서대로 표시하기 - 하나씩 늦추기
6.12 이미지에 사용할 수 있는 여러 애니메이션
6.13 스크롤과 애니메이션 조합하기
6.14 스크롤과 애니메이션 조합하기 - Intersection Observer 조합
6.15 스크롤과 애니메이션 조합하기 - 교차 상태 정보 살펴보기
6.16 스크롤과 애니메이션 조합하기 - 움직임 추가하기

CHAPTER 7 웹 페이지 만들기
7.1 작성할 웹 페이지 소개
7.2 로딩에서 화면 바뀜
7.3 로딩에서 화면 바뀜 - 화면이 바뀌는 스크린 만들기
7.4 로딩에서 화면 바뀜 - 애니메이션 타이밍 조절
7.5 이미지 갤러리
7.6 이미지 갤러리 - 커서를 갖다 댔을 때의 애니메이션
7.7 이미지 갤러리 - 커서를 갖다 댔을 때 크게 표시
7.8 이미지 갤러리 - 여러 요소를 forEach로 작성하기
7.9 슬라이드 메뉴
7.10 슬라이드 메뉴 - 클릭해서 메뉴 열기
7.11 슬라이드 메뉴 - 위에서부터 순서대로 표시하기
7.12 스크롤로 요소 표시
7.13 스크롤로 요소 표시 - fadein 클래스의 HTML 요소 가져오기
7.14 스크롤로 요소 표시 - 부드럽게 표시하는 애니메이션 설정
7.15 스크롤로 요소 표시 - 여러 번 실행되지 않도록 제어

CHAPTER 8 오류와 해결 방법
8.1 오류 확인 방법
8.2 자주 발생하는 오류 리스트

누구나 재미있게 배울 수 있는 자바스크립트 입문서!
웹 디자인 인플루언서 저자 Mana가 알려주는
오늘 당장 적용 가능한 자바스크립트 기초의 모든 것

자바스크립트는 웹사이트에 생명을 불어넣는 프로그래밍 언어입니다. 단지 웹사이트를 더 편리하게, 예쁘게 만들어보고 싶을 뿐인데 복잡한 자바스크립트 문법 때문에 포기했다면 이 책으로 시작해보세요. 자바스크립트 기초 프로그래밍을 중심으로 이벤트, 데이터 활용, 애니메이션까지 누구나 재미있게 배울 수 있도록 구성했습니다.

★완성된 웹사이트로 배울 수 있는 자바스크립트 효과
● 로딩 화면
자바스크립트 이벤트, 애니메이션 타이밍 조절을 이용하여 사용자의 기대감을 높일 수 있는 화면을 만듭니다.
● 이미지 갤러리
섬네일 이미지에 커서를 대면 애니메이션과 함께 사진이 나타나는 효과를 만듭니다.
● 슬라이드 메뉴
햄버거 아이콘을 클릭하면 메뉴 패널이 나타났다가 다시 들어가는 구조를 만듭니다.
● 스크롤로 요소 나타내기
페이지를 스크롤하면 요소가 밑에서부터 부드럽게 나타나는 화면을 만듭니다.

★대상 독자
● HTML, CSS 기초 학습을 마치고 다음 목표를 찾고 있는 사람
● 자바스크립트를 공부하다 포기한 적 있는 사람
● 움직이는 웹사이트를 만들고 싶은 초보 웹 퍼블리셔/프런트엔드 개발자
● 웹 퍼블리셔/기획자/개발자와 협업을 원활하게 하고 싶은 웹 디자이너

작가정보

저자(글) Mana

일본에서 2년간 그래픽 디자이너로 일한 뒤 캐나다 밴쿠버에 있는 웹 제작 학교를 졸업했다. 캐나다, 호주, 영국 회사에서 웹 디자이너로 근무했으며 현재는 웹 사이트 제작에 대해 강의하고 있다. 블로그 ‘Webクリエイターボックス(웹 크리에이터 박스)’는 2010년 일본 알파 블로거 어워드를 수상했다. 저서인 『러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문』 『완성된 웹사이트로 배우는 HTML&CSS 웹 디자인』으로 각각 2019년, 2021년 CPU 대상 서적 부문 대상을 수상했다.

이화여자대학교에서 컴퓨터학을 전공했으며 일본 미에대학교에서 교환학생으로 정보공학을 공부했다. LG CNS에서 15년째 근무하며 프로그램 개발, 기획, 사업 개발 등 다양한 업무를 거쳐 현재는 클라우드 빌링 업무를 담당하고 있다. 옮긴 책으로는 『가장 쉬운 네트워크 가상화 입문 책』 『인프라 디자인 패턴』 『완벽한 IT 인프라 구축을 위한 Docker』 『완성된 웹사이트로 배우는 HTML&CSS 웹 디자인』이 있다.

이 상품의 총서

Klover리뷰 (0)

Klover리뷰 안내
Klover(Kyobo-lover)는 교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1. 리워드 안내
구매 후 90일 이내에 평점 작성 시 e교환권 100원을 적립해 드립니다.
  • - e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • - 리워드는 1,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다. (5,000원 이상 상품으로 변경 예정, 2024년 9월 30일부터 적용)
  • - 리워드는 한 상품에 최초 1회만 제공됩니다.
  • - sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.
2. 운영 원칙 안내
Klover리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다. 일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

구매 후 리뷰 작성 시, e교환권 100원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여 주는 교보문고의 새로운 서비스 입니다. 교보eBook 앱에서 도서 열람 후 문장 하이라이트 하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 ‘좋아요’ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보없이 삭제될 수 있습니다.
리워드 안내
  • 구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.
  • e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • 리워드는 1,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다. (5,000원 이상 eBook으로 변경 예정, 2024년 9월 30일부터 적용)
  • 리워드는 한 상품에 최초 1회만 제공됩니다.
  • sam 이용권 구매 상품 / 선물받은 eBook / 오디오북·동영상 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.

구매 후 문장수집 작성 시, e교환권 100원 적립

    교보eBook 첫 방문을 환영 합니다!

    신규가입 혜택 지급이 완료 되었습니다.

    바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)
    지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!

    교보e캐시 1,000원
    TOP
    신간 알림 안내
    완성된 웹사이트로 배우는 자바스크립트 웹툰 신간 알림이 신청되었습니다.
    신간 알림 안내
    완성된 웹사이트로 배우는 자바스크립트 웹툰 신간 알림이 취소되었습니다.
    리뷰작성
    • 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
    • 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
    • 콘텐츠 다운로드 또는 바로보기 완료 후 리뷰 작성 시 익일 제공
    감성 태그

    가장 와 닿는 하나의 키워드를 선택해주세요.

    사진 첨부(선택) 0 / 5

    총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.

    신고/차단

    신고 사유를 선택해주세요.
    신고 내용은 이용약관 및 정책에 의해 처리됩니다.

    허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
    있으니 유의하시어 신중하게 신고해주세요.


    이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.

    문장수집 작성

    구매 후 90일 이내 작성 시, e교환권 100원 적립

    eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.

    P.
    완성된 웹사이트로 배우는 자바스크립트
    저자 모두보기
    저자(글)
    낭독자 모두보기
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 프리미엄 이용권입니다.
    선물하실 sam이용권을 선택하세요.
    결제완료
    e캐시 원 결제 계속 하시겠습니까?
    교보 e캐시 간편 결제
    sam 열람권 선물하기
    • 보유 권수 / 선물할 권수
      0권 / 1
    • 받는사람 이름
      받는사람 휴대전화
    • 구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
    • 열람권은 1인당 1권씩 선물 가능합니다.
    • 선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
    • 선물한 열람권의 등록유효기간은 14일 입니다.
      (상대방이 기한내에 등록하지 않을 경우 소멸됩니다.)
    • 무제한 이용권일 경우 열람권 선물이 불가합니다.
    이 상품의 총서 전체보기
    네이버 책을 통해서 교보eBook 첫 구매 시
    교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 네이버 책을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)
    구글바이액션을 통해서 교보eBook
    첫 구매 시 교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 구글바이액션을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)