본문내용 바로가기
MD의선택 무료배송 사은품 소득공제

Do it! 인터랙티브 웹 페이지 만들기

최성일 지음 | 이지스퍼블리싱 | 2021년 08월 23일 출간

이 책의 다른 상품 정보

  • 정가 : 28,000원
    판매가 : 25,200 [10%↓ 2,800원 할인]
  • 혜택 :
    [기본적립] 1400원 적립 [5% 적립] [추가적립] 5만원 이상 구매 시 2,000원 추가적립 안내 [회원혜택] 회원 등급 별, 3만원 이상 구매 시 2~4% 추가적립 안내 [리뷰적립] 리뷰 작성 시 e교환권 최대 300원 추가적립 안내
  • 추가혜택 : 포인트 안내 도서소득공제 안내 추가혜택 더보기
  • 배송비 : 무료 배송비 안내
  • 배송일정 : 서울특별시 종로구 세종대로 기준 지역변경
    당일배송 지금 주문하면 오늘(26일,화) 도착 예정 배송일정 안내
  • 바로드림 : 인터넷으로 주문하고 매장에서 직접 수령 안내 바로드림 혜택
    휴일에는 바로드림 픽업으로 더 빨리 받아 보세요. 바로드림 혜택받고 이용하기

이 책의 이벤트

해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.
  • 2022 캘린더 수록한 IT독자를 위한 readIT 노트 사은품
    2021.10.14 ~ 2021.11.30
상품상세정보
ISBN 9791163032823(1163032824)
쪽수 480쪽
크기 189 * 257 * 24 mm /985g 판형알림

책소개

이 책이 속한 분야

이 책의 주제어

이 책에 나온 HTML, CSS, 자바스크립트만 알아도 충분하다!
비전공자도 만드는 최신 프런트엔드 웹 사이트 8가지!
최신 프런트엔드 웹 디자인은 물론 인터랙티브 웹 사이트 8개를 한 번에 완성할 수 있는 책이 나왔다! 베테랑 웹 디자이너이자 프런트엔드 개발자인 저자가 HTML, CSS, 자바스크립트만으로 누구나 화려한 웹 사이트를 만들 수 있게 알려 준다. 또한 실무에서 잘 쓰지 않는 기본 문법을 모두 배우느라 지치지 않게, 실전 예제에 꼭 필요한 웹 표준 문법만 간추려서 빠르고 쉽게 익힐 수 있도록 도와준다.
이 책에서 제공하는 8가지 프런트엔드 웹 사이트는 현업에서 최신 트렌드로 자리 잡은 인터랙티브 웹 포트폴리오를 만들 수 있게 구성했다. 완성된 웹 사이트를 직접 클론 코딩하면서 실력을 높이고, 덤으로 나만의 웹 포트폴리오를 가질 수 있는 기회를 놓치지 말자. 웹의 기초가 필요한 비전공자부터 화려한 디자인이 필요한 웹 디자이너, 최신 웹 기술을 반영하려는 웹 퍼블리셔까지 프런트엔드 기술이 필요한 사람이라면 꼭 읽어야 할 책이다.

★ 이 책에서 만드는 포트폴리오 8가지!
1. 온라인 프로필 카드 웹 페이지
2. 기업형 기본 웹 페이지
3. 밤낮이 바뀌는 마을 애니메이션 페이지
4. 306도 회전하는 파노라마 회사 소개 페이지
5. FLEX 레이아웃 기반의 동영상 웹 페이지
6. 자동으로 음악이 나오는 뮤직 플레이어
7. 핀터레스트 스타일의 반응형 웹 갤러리
8. 웹 플러그인을 사용한 스와이프 갤러리(무료 전자책 제공)
▶ 『Do it! 인터랙티브 웹 페이지 만들기』 북트레일러

* 출판사의 사정에 따라 서비스가 변경 또는 중지될 수 있습니다.
*window7의 경우 사운드 연결이 없을시, 동영상 재생에 오류가 발생할 수 있습니다. 이어폰, 스피커 등이 연결되어 있는지 확인 하시고 재생하시기 바랍니다.

상세이미지

Do it! 인터랙티브 웹 페이지 만들기 도서 상세이미지

목차

[필수 문법]
HTML, CSS, 자바스크립트
한 번에 끝내기
-----------------
01장 웹 페이지 제작 준비하기
__01-1 웹 페이지를 만들기 전에
____인터랙티브 UI/UX
____UI/UX 작업 방식의 변화와 코딩의 중요성
____비전공자와 디자이너도 코딩을 할 수 있는 이유
____HTML, CSS, 자바스크립트의 역할
__01-2 웹 브라우저와 웹 에디터
____웹 브라우저 설치하기
____웹 에디터 설치하기
____비주얼 스튜디오 코드 설치하기
__01-3 제작 속도를 2배 높여 줄 작업 도구
____[Do it!] 비주얼 스튜디오 코드의 확장 기능 설치하기
__01-4 웹 페이지의 필수 재료
____[Do it!] 기본 폴더와 HTML 파일 만들기

02장 HTML 기본 문법 빠르게 끝내기
__02-1 HTML 파일 둘러보기
____태그란
____부모 태그와 자식 태그
____HTML의 기본 구조
____[Do it!] 에디터에서 HTML 파일 수정하기
__02-2 시맨틱 태그 - 웹 페이지 구조 나누기
__02-3 서식 태그 - 텍스트를 넣어 웹 페이지 채우기
____〈h1〉~〈h6〉 - 문서의 제목 지정하기
____〈p〉 - 문단 지정하기
____〈div〉 - 콘텐츠 그룹화하기
____〈strong〉, 〈em〉 - 특정 단어 강조하기
____〈a〉 - 웹 페이지에 링크 연결하기
____〈span〉 - 인라인 요소 태그 그룹화하기
____〈img〉 - 문서에 이미지 삽입하기
____〈br〉 - 강제 줄 바꿈 구현하기
__02-4 목록 태그 - 메뉴를 깔끔하게 정리하기
____〈ul〉 - 순서가 없는 목록 만들기
____〈ol〉 - 순서가 있는 목록 만들기
____〈dl〉, 〈dt〉, 〈dd〉 - 정의형 목록 만들기
____[Do it!] 중첩된 목록 작성하기
__02-5 폼 태그 - 사용자 정보 입력받기
____〈input〉 - 다양한 정보 입력받기
____〈select〉 - 드롭다운 메뉴로 항목 선택하기
____〈textarea〉 - 텍스트를 여러 줄 입력받기
____〈form〉 - 여러 입력 양식을 그룹화하고 전송하기
__02-6 비디오·오디오 태그 - 멀티미디어 콘텐츠 삽입하기
____〈audio〉 - 오디오 파일 재생하기
____〈video〉 - 동영상 파일 재생하기

03장 CSS 기본 문법 빠르게 끝내기
__03-1 HTML에 CSS 연결하기
____[Do it!] HTML 파일에 외부 CSS 파일 연결하기
__03-2 CSS로 HTML 요소 다양하게 선택하기
____전체 선택자 - 모든 HTML 요소를 한꺼번에 선택하기
____태그 선택자 - 태그명을 이용하여 선택하기
____자손 선택자 - 자식과 하위 요소를 모두 선택하기
____자식 선택자 - 직계 자식 요소만 선택하기
____그룹 선택자 - 여러 개의 요소를 그룹으로 선택하기
____순서 선택자 - 형제 요소의 순서를 이용하여 선택하기
____수열 선택자 - 수식을 이용하여 선택하기
____마지막 요소 선택자 - 형제 요소 중 마지막 요소를 선택하기
____홀수, 짝수 선택자 - 홀수 또는 짝수 요소를 선택하기
____속성 선택자 - 속성값을 이용하여 선택하기
____가상 선택자 - 가상의 요소를 선택하기
____클래스 선택자 - 클래스명으로 요소를 선택하기
____아이디 선택자 - 아이디명으로 요소를 선택하기
__03-3 폰트 스타일링하기
____폰트 굵기 바꾸기
____폰트 크기 바꾸기
____폰트 모양 바꾸기
____[Do it!] 구글 웹 폰트 사용하기
____[Do it!] 웹 폰트 아이콘 적용하기
____폰트 색상 바꾸기
____텍스트 줄 간격 바꾸기
____텍스트 정렬 방향 지정하기
____텍스트 자간 지정하기
__03-4 웹 페이지에서 영역별 크기 정하기
____너비와 높이 지정하기
____바깥쪽 여백 지정하기
____안쪽 여백 지정하기
____기존 박스 크기를 유지하면서 안쪽 여백 지정하기
____테두리의 형태 지정하기
____블록 요소와 인라인 요소 태그
03-5 웹 페이지의 배경 꾸미기
____배경색 지정하기
____배경 이미지 삽입하기
____배경 이미지 크기 조절하기
____[Do it!] 두 배경 이미지를 웹 브라우저에 고정하기
03-6 웹 페이지의 레이아웃 구성하기
____CSS 초기화하기
____float - 블록 요소 좌우로 배치하기
____position - 요소를 자유롭게 배치하기
____object-fit - 콘텐츠를 특정 영역에 채우기
____z-index - 겹쳐 있는 요소의 z축 순서 지정하기
____opacity - 요소의 투명도 설정하기
__03-7 다양한 그래픽 효과 적용하기
____box-shadow, text-shadow - 요소의 그림자 만들기
____border-radius - 모서리를 둥글게 만들기
____linear-gradient, radial-gradient - 그레이디언트 적용하기
____filter - 특수 효과 사용하기

04장 인터랙티브 웹을 위한 CSS 다루기
__04-1 콘텐츠 모양을 자유롭게 변형하기
__04-2 사용자 행동에 반응하는 전환 효과 만들기
__04-3 자동으로 움직이는 애니메이션 효과 만들기
__04-4 벡터 이미지 파일 제어하기
____비트맵 이미지와 벡터 이미지의 차이
____[Do it!] SVG 파일을 웹 브라우저에 출력하기
____[Do it!] SVG의 path 스타일 변경하기
____패스의 stroke-dasharray와 stroke-dashoffset 속성 이해하기
____마우스 포인터를 올리면 선이 그려지는 모션 만들기
__04-5 화면 너비에 따라 웹 페이지 디자인 변경하기
____[Do it!] 미디어 쿼리를 사용하여 배경색 바꾸기

05장 flex 방식으로 레이아웃 만들기
__05-1 부모 요소에 flex 적용하기
____display - 자식 요소의 배치 방법 지정하기
____flex-direction - 자식 요소의 정렬 방향 변경하기
____flex-wrap - 자식 요소에 줄 바꿈 적용하기
____flex-flow - flex-direction, flex-wrap 속성을 한꺼번에 적용하기
05-2 자식 요소 정렬하기
____justify-content - 기본 축으로 정렬하기
____align-content, align-items - 반대 축으로 정렬하기
05-3 자식 요소의 순서 지정하기
05-4 요소의 여백 비율 지정하기
____flex-grow - 요소의 안쪽 여백 확대하기
____flex-shirink - 요소의 안쪽 여백 축소하기
____flex - 전체 너빗값의 비율 조절하기

06장 자바스크립트로 웹 페이지 제어하기
__06-1 자바스크립트 시작하기
____[Do it!] HTML과 자바스크립트 연결하기
__06-2 자바스크립트로 HTML 요소 선택하기
____document.querySelector( ) - 요소 선택하기
____document.querySelectorAll( ) - 요소를 모두 선택하기
____[Do it!] 부모, 자식, 형제 요소 선택하기
__06-3 자바스크립트로 스타일 제어하기
__06-4 자바스크립트로 이벤트 연결하기
____클릭 이벤트 연결하기
____호버 이벤트 연결하기
____반복되는 요소에 이벤트 한꺼번에 연결하기
____클릭 이벤트가 발생할 때 숫자를 증가, 감소하기
____문자 안에 변수 삽입하기
____[Do it!] 클릭하면 좌우로 회전하는 박스 만들기
__06-5 자바스크립트로 클래스 제어하기
__06-6 함수를 활용하여 코드 패키징하기
____함수 정의 및 호출로 기능 재활용하기
____[Do it!] 활성화 기능 함수 정의하고 사용하기
__06-7 HTML 요소의 속성값 제어하기
____속성값 알아내기
____속성값 변경하기
__06-8 자바스크립트로 사용자 브라우저 판단하기


-----------------
[실전 예제]
실무에서 바로 쓰는
포트폴리오 완성하기
-----------------
07장 온라인 프로필 카드 제작하기

08장 기업형 웹 페이지 제작하기

09장 마을 애니메이션 제작하기

10장 파노라마 회사 소개 페이지 제작하기

11장 flex 기반 동영상 웹 페이지 제작하기

12장 뮤직 플레이어 제작하기

13장 핀터레스트 스타일의 반응형 웹 갤러리 제작하기

[스페셜] 깃허브 페이지에 작업물 배포하기

찾아보기

[PDF 책] 스와이프 갤러리 제작하기

출판사 서평

“아무것도 모르는 비전공자도 웹 개발자가 될 수 있나요?”
“물론이죠! 저도 그랬거든요.”
--------------------------
비전공자였지만 프런트엔드 웹 개발자가 된 저자는 비전공자나 코딩 왕초보에게는 결과물부터 만들면서 이론을 배우는 것이 효과적이라고 말한다. 그래서 이 책은 비전공자 눈높이에 맞춰서 최소한의 문법만 활용하여 다양한 결과물을 계속해서 만들 수 있도록 구성했다. 또한 초보자가 헷갈릴 수 있는 CSS 선택자, 플렉스 레이아웃, 미디어 쿼리, 반응형 웹, 자바스크립트 함수 등의 내용도 쉽게 이해할 수 있도... 더보기

Klover 리뷰 (0)

북로그 리뷰 (2) 전체보기 쓰러가기

북로그 리뷰는 본인 인증 후 작성 가능합니다.
책이나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 내용은 비공개 처리 될 수 있습니다.
※ 북로그 리뷰 리워드 제공 2021. 4. 1 종료
  •   구성은 개발 환경 셋팅부터 html, css, js의 기본 문법을 다루고 앞에서 배웠던 기본 문법들을 가지고 응용하여 웹 페이지를 8개나 만들 수 있는 구성이었습니다.     웹 공부나 프로그래밍 언어들을 배울 때 초심자들이 많이 생각하는 것 중 하나가 오래걸릴 것이다는 생각을 많이 하는데, 개인의 공부량에 따라서 10일 완성, 20일 완성 등 목표를 세워 효율적으로 공부할 수 있게 진도표가 있었습니다.   이 책을 처음 보자마자 html, css, javascript 세 가... 더보기
  •   이 책은 크게 HTML, CSS, JavaScript 문법을 공부할 수 있는 파트와 실제로 포트폴리오로 쓸 수 있을 퀄리티의 인터랙티브 웹페이지 예제들로 구성된 파트로 나뉘어져 있습니다. 상황에 따라서 HTML, CSS, JavaScript를 먼저  공부하신 후에, 이 책으로 복습하셔도 좋을 것 같고 아니면 아예 이 책으로 처음부터 공부하셔서 나중에 추가적으로 공부하고 싶은  문법이 생기면 그때 인터넷을 통해 더 공부하는 방법도 좋을 것 같습니다. 그만큼 알차게 구성되어 있어요. ... 더보기

문장수집 (0) 문장수집 쓰기 나의 독서기록 보기
※구매 후 문장수집 작성 시, 리워드를 제공합니다. 안내

교환/반품/품절안내

※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

교환/반품/품절안내
반품/교환방법 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 ,
[1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900)

※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불]
    또는 고객센터 (1544-1900)
반품/교환가능 기간 변심반품의 경우 수령 후 7일 이내,
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
반품/교환비용 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
반품/교환 불가 사유
  • 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
  • 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
  • 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
  • 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
  • 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
  • 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
  • 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에
    해당되는 경우
(1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시 ‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①서양도서-판매정가의 12%, ②일본도서-판매정가의 7%를 적용)
상품 품절 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는
이메일과 문자로 안내드리겠습니다.
소비자 피해보상
환불지연에 따른 배상
  • 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
    소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨
  • 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
    소비자 보호에 관한 법률에 따라 처리함
바로가기
  • 우측 확장형 배너 2
  • 우측 확장형 배너 2
최근 본 상품