본문 바로가기

추천 검색어

실시간 인기 검색어

비전공자를 위한 첫 코딩 챌린지 with HTML&CSS

HTML, CSS 입문부터 영상 서비스 앱 UI 만들기와 배포까지
임효성 지음
골든래빗(주)

2021년 06월 18일 출간

종이책 : 2021년 06월 10일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 pdf (14.42MB)
ISBN 9791197149856
쪽수 405쪽
듣기(TTS) 불가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 전자책 화면에 표기된 주석 등을 모두 읽어 줍니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.
  • '교보 ebook' 앱을 최신 버전으로 설치해야 이용 가능합니다. (Android v3.0.26, iOS v3.0.09,PC v1.2 버전 이상)
소득공제
소장
정가 : 20,000원

쿠폰적용가 18,000

10% 할인 | 5%P 적립

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

카드&결제 혜택

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

작품소개

이 상품이 속한 분야

★ ‘코딩 30일 챌린지’ 주인공과 함께하는
★ 비전공자ㆍ디자이너를 위한
★ 새로운 코딩 입문서
HTML·CSS는 작성한 결과가 눈에 보여 코딩 입문자에게 적합한 언어입니다. 이 책은 HTML·CSS 언어로 ‘나만의 웹 사이트’를 만들 수 있게 이끌어줍니다. 비전공자인 저자가 30일간의 코딩 도전으로 깨닫게 된 코딩 입문 방법을 알려줍니다. 코딩 초보자도 쉽고 명확하게 이해할 수 있도록 학습 목표를 일목요연하게 제시하고 핵심 내용을 정리해 보여줍니다. 단계별로 프로젝트를 구현하며 코딩을 직접 체험할 수 있게 했습니다. 또한 멋진 프로젝트를 만들고 결과물을 웹에 배포하는 방법도 알려줍니다. 개발자와 협업하고 개발에 필요한 기획과 디자인을 하는 배경 지식을 갖추고 싶은 분이라면 지금 당장 코딩 챌린지에 도전하세요.

★ Must Have 시리즈 안내
Must Have 시리즈는 내 것으로 만드는 시간을 드립니다. 명확한 학습 목표와 핵심 정리를 제공하고, 간단명료한 설명과 다양한 그림으로 학습 효과를 극대화합니다. 예제를 제공해 응용력을 키워줍니다. 할 수 있습니다. 포기는 없습니다. 지금 당장 밑줄 긋고 메모하고 타이핑하세요! Must Have가 여러분의 성장을 돕겠습니다.
00장 개발 환경 구축

[1단계 첫 코딩에 입문하기]

01장 나만의 코딩 목표 세우기
_1.1 이 책의 범위 안내
_1.2 목표와 일정 정하기
_1.3 프로젝트 기획하기

02장 웹, HTML이 뭐지?
_2.1 웹이 뭐지?
_2.2 웹 페이지는 뭘까?
_2.3 웹은 어떻게 동작하지?
_2.4 HTML은 또 뭐야?
_2.5 나도 안다! 코딩 상식!
학습 마무리

03장 첫 코딩 도전하기
_3.1 비주얼 스튜디오 코드 뜯어보기
_3.2 VSCode 확장 프로그램 설치하기
_3.3 Hello world : 새 파일을 생성해 코드 작성하기
_3.4 나도 안다 코딩 상식
학습 마무리

04장 태그로 웹 페이지 만들기
_4.1 태그 이해하기
_4.2 대표적인 태그 알아보기
학습 마무리

05장 HTML 특징 정복하기
_5.1 태그의 부모 자식 관계
_5.2 HTML과 검색되는 텍스트
_5.3 검색 엔진이 뭐야?
_5.4 검색 엔진 최적화가 뭐야?
학습 마무리

06장 코딩 맛보기 : 3가지 미니 코딩 챌린지
_6.1 사전 지식
_6.2 코딩 맛보기 : Hello World 출력하기 ☆☆☆☆
_6.3 코딩 맛보기 : 나만의 폼 만들기 ★☆☆☆
_6.4 코딩 맛보기 : 메뉴판 만들기 ★☆☆☆
학습 마무리

[2단계 CSS로 웹 꾸미기 113]

07장 CSS가 뭐지?
_7.1 CSS가 왜 필요해?
_7.2 CSS 적용하기
_7.3 외부 CSS 파일 적용하기
_7.4 글씨 크기, 정렬
_7.5 CSS 선택자
학습 마무리

08장 CSS 배치 속성과 반응형 웹
_8.1 배치 속성이 뭐야?
_8.2 박스 모델 : 마진, 테두리, 패딩
_8.3 실습 : 반응형 웹 페이지 만들기
학습 마무리

09장 CSS 레이아웃 : 플렉스박스
_9.1 플렉스박스의 등장
_9.2 플렉스가 필요한 순간 확인하기
_9.3 플렉스박스로 정렬하기
_9.4 플렉스 축 방향 바꾸기 : flex-direction
학습 마무리

10장 CSS 레이아웃 : 위치 지정
_10.1 자식이 부모가 될 수 있다?
_10.2 위치 지정하기
학습 마무리

11장 가상 선택자와 클래스
_11.1 가상 선택자 사용법
_11.2 동적 가상 클래스
_11.3 구조적 가상 클래스
_11.4 미니 퀴즈 풀어보기
학습 마무리

12장 CSS 애니메이션 만들기
_12.1 전환
_12.2 변형
_12.3 애니메이션 동시에 적용하기
_12.4 키프레임
학습 마무리

13장 깃/깃허브 배우기
_13.1 깃 입문하기
_13.2 깃허브 입문하기
_13.3 깃/깃허브 핵심 개념 알아보기
_13.4 [실습] 깃허브 사용하기
학습 마무리

14장 박스 레이아웃 만들기
_14.1 힌트
_14.2 풀이 보기
_14.3 STEP 1 : HTML 레이아웃 구성하기
_14.4 STEP 2 : 스타일링
_14.5 STEP 3 : 화면 중앙으로 위치시키기
학습 마무리

15장 햄버거 만들기
_15.1 사전 지식
_15.2 힌트
_15.3 풀이 보기
_15.4 STEP 1 : HTML 레이아웃 구성하기
_15.5 STEP 2 : 햄버거 스타일링
학습 마무리

16장 프로필 UI 구현하기
_16.1 사전 지식
_16.2 힌트
_16.3 풀이 보기
_16.4 STEP 1 : 배경과 HTML 구성하기
_16.5 STEP 2 : 배너와 프로필 사진 만들기
_16.6 STEP 3 : 텍스트와 버튼 만들기
학습 마무리

[3단계 도전, 영상 서비스 앱 UI 클론 코딩]

17장 〈Project #1〉 로그인 페이지 만들기
_17.1 뜯어보기
_17.2 사전 지식
_17.3 STEP 1 : 파일 정리하기
_17.4 STEP 2 : 헤더 만들기
_17.5 STEP 3 : 로그인 폼 만들기 - 로그인 폼
_17.6 STEP 4 : 로그인 폼 만들기 - 스타일링 준비
_17.7 STEP 5 : 로그인 폼 만들기 - 배경과 폰트 스타일링
_17.8 STEP 6 : 로그인 폼 만들기 - 로그인 폼 스타일
학습 마무리

18장 〈Project #2〉 콘텐츠 추천 페이지 만들기
_18.1 뜯어보기
_18.2 사전 준비
_18.3 STEP 1 : 검색바 만들기
_18.4 STEP 2 : 추천 작품 만들기
_18.5 STEP 3 : 다른 작품 추천 기능 만들기
_18.6 STEP 4 : 네비게이션바 만들기
학습 마무리

19장 〈Project #3〉 마이 페이지 만들기
_19.1 뜯어보기
_19.2 사전 준비
_19.3 STEP 1 : 프로필 만들기
_19.4 STEP 2 : 이어보기 만들기
_19.5 STEP 3 : 내가 찜한 목록 만들기
_19.6 STEP 4 : 네비게이션 만들기
_19.7 STEP 5 : 미디어 쿼리로 화면 간격주기
학습 마무리

20장 〈Project #4〉 웹에 배포하기
_20.1 웹 호스팅이 뭐지?
_20.2 깃허브로 웹 호스팅하기
학습 마무리

부록. 리플잇 : 온라인 에디터

★ 50만을 감동시킨 「코딩 30일 챌린지」, 다 함께 첫 코딩 도전
코딩의 ‘ㅋ’도 모르는 문과생이 30일간 도전한 코딩 입문기를 담았습니다. 세상 모든 비전공자에게 희망을 주고자, 조금 더 알찬 내용으로 채워서 누구나 할 수 있는 코딩 맛보기를 제공합니다. 이 책을 읽고 나면 다음 단계로 나아갈 작은 성취감을 얻게 될 겁니다.

숫자로 보는 책의 특징
_0 아무것도 몰라도 OK
코딩의 ‘ㅋ’도 모르는 분을 대상으로 설명합니다. IT 비전공자, 디자이너, 기획자 모두를 환영합니다.

_1달간의 코딩 첫걸음
총 20개 장을 제공하지만, 챌린지 기간을 30일로 잡으세요. 공부하다 보면 막히는 부분이 있을 겁니다. 게다가 뒤로 갈수록 분량도 많아지고 내용도 깊어집니다.

_2가지 언어, HTML과 CSS
웹 UI를 만드는 HTML과 CSS 모두를 배워요.

_3단계 코딩 챌린지
1단계와 2단계에서 HTML로 구조를 잡고, CSS로 꾸미는 방법을 배운 후, 3단계에서는 배운 내용을 종합해서 영상 서비스 앱 UI 만들기에 도전합니다.

_3가지를 챙겨드립니다.
첫 코딩 뭣이 중합니까? 코딩 재미, 코딩 개념 장착, 성취감 아니겠습니까? 비주얼하게 보이니까 재밌습니다. 문법 외우기보다는 개념을 중심으로 알려줍니다. 클론 코딩으로 도전 결과물을 멋지게 만들어 성취감도 챙겨가자고요!

_4가지 프로젝트 제공
입문 수준부터 완성된 앱 UI 클론 코딩까지 다양한 난이도의 프로젝트를 제공합니다.
___★★☆☆ 박스 레이아웃 만들기
___★★☆☆ 햄버거 만들기
___★★★☆ 프로필 UI 구현하기
___★★★★ 영상 서비스 앱 UI 클론 코딩

대상 독자께 드리는 편지
_코딩의 ‘ㅋ’도 모르는 IT 비전공자께
문과생 관점에서 차근차근 설명했습니다. 너무 깊은 내용 대신 비전공자에게 딱 필요한 만큼 설명합니다. 처음엔 생소하게 느껴질 수도 있지만 하다 보면 새로운 세계에 눈을 뜨실 수 있습니다. 다만 한 가지 꼭 지켜주셔야 하는 게 있습니다. 직접 코드를 작성하며 책을 따라와주세요. 읽을 땐 이해되는 것 같지만 책을 덮으면 기억이 나지 않을 거예요.

_프로그래머와 협업하는 디자이너께
디자이너가 왜 코딩까지 해야 할까요? 아는만큼 보이기 때문입니다. 개발자와 협업하는 디자이너라면 “안 돼요”라는 말을 들어보셨을 겁니다. 왜 안 되는지, 정말 안 되는지, 그렇다면 되는 디자인은 어떤 건지 알고 싶지 않으신가요? 심지어 개발자와 회의를 할 때도 의사소통이 더 잘 됩니다. 원활한 의사소통은 더 나은 결과물로 이어질 수 있어요. 그러면 일 잘하는 디자이너로 인정받을 수도 있겠죠. 코딩, 한 번 경험해보세요.

_‘나도 정말 코딩을 할 수 있나’라는 의구심에 빠진 분께
파이썬, C, 자바 같은 프로그램 언어는 결과를 텍스트 기반으로 보여줍니다. 그래서 낯설고 어렵습니다. 반면 웹 코딩은 눈에 결과가 비주얼하게 보이기 때문에 좌절하지 않고 코딩 자체를 체험하고 코딩 개념을 맛보는 데 더 적합합니다. 이 책은 모든 걸 알려주는 것보다, 재미있게 하나하나 만들어가는 데 목적이 있습니다. 정말 할 수 있을까 의구심이 든다면 도전해보세요.

저자와 4문 4답
[Q] 왜 디자이너와 비전공자가 코딩을 배워야 할까요?
A. 직장인이라면 회사에서 개발자와 협력하는 일이 많을 거예요. 사업을 시작하더라도 웹 사이트나 앱은 필수로 만들어야하는 시대입니다. 개발자와 효율적으로 커뮤니케이션하
려면 코딩 관련 최소한의 지식을 알아두는 게 좋습니다.
예를 들어 디자이너라면 개발자가 구현할 수 있는 디자인을 고안해야 합니다. 열심히 디자인을 했는데 개발자가 못한다고 하면 그것만큼 허무한 것도 없겠죠. 진짜 못하는 건지, 어떻게 다른 디자인을 해야 하는지를 안다면 일의 효율이 팍팍 올라갈 거예요. 추가로 픽셀, 아이콘 등 작은 부분을 직접 수정할 수 있다면 더할 나위 없이 좋겠습니다.

[Q] 왜 HTML&CSS로 첫 코딩을 해야 하나요?
A. 매일 웹에 전 세계 사람이 접속합니다. 웹은 이미 생활의 일부이고 HTML과 CSS는 웹 페이지를 이루는 기본입니다. 게다가 HTML과 CSS의 코딩 결과물은 친숙한 웹 브라우저 창에서 보입니다. 브라우저는 검정 바탕에 hello world가 출력되는 터미널 환경보다 훨씬 친숙하고 익숙한 환경입니다. 터미널 환경은 비전공자에게 두려움을 줍니다. 자바, C, 파이썬은 터미널로 결과를 출력합니다.
코딩은 재미있어야 합니다. 그래야 포기하지 않습니다. HTML과 CSS로 코딩에 입문하세요. 코딩 결과가 눈에 보여 재미있습니다. 다른 언어에 비해 훨씬 쉽습니다. 이 두 가지면 코딩 맛보기를 끝까지 완수하는 데 충분하지 않겠습니까?

[Q] 직접 진행한 30일 챌린지, 정말 할 만하던가요?
[A] 네~ 정말 도전하길 잘했다고 생각합니다. 이 도전으로 새로운 꿈이 생겼고, 생활습관에도 변화가 생겼습니

작가정보

저자(글) 임효성

저자 : 임효성
영상, 디자인, 개발 등 다양한 분야에 관심을 가지고 있습니다. 유튜버이자 프리랜서로 일하고 있습니다. 비전공자를 위한 코딩 30일 챌린지 영상으로 50만 조회수를 기록했으며, 개발자와 협업하여 웹 사이트 제작을 담당했습니다. 현재는 웹 프론트엔드 개발자의 꿈을 더 키워 가고 있습니다.

이 상품의 총서

Klover리뷰 (0)

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

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

문장수집

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

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

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

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

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

    교보e캐시 1,000원
    TOP
    신간 알림 안내
    비전공자를 위한 첫 코딩 챌린지 with HTML&CSS 웹툰 신간 알림이 신청되었습니다.
    신간 알림 안내
    비전공자를 위한 첫 코딩 챌린지 with HTML&CSS 웹툰 신간 알림이 취소되었습니다.
    리뷰작성
    • 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
    • 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
    감성 태그

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

    사진 첨부(선택) 0 / 5

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

    신고/차단

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

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


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

    문장수집 작성

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

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

    P.
    비전공자를 위한 첫 코딩 챌린지 with HTML&CSS
    HTML, CSS 입문부터 영상 서비스 앱 UI 만들기와 배포까지
    저자 모두보기
    저자(글)
    낭독자 모두보기
    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일)