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

HTML, CSS 입문부터 영상 서비스 앱 UI 만들기와 배포까지

지은이 : 임효성
발행일 : 2021년 06월 10일
난이도 : 입문, 초급
정가 : 25,000원
신간안내 :

ISBN : 979-11-971498-4-9 93000
분량 : 404쪽
판형 : 46배판형(183x235mm)
소스 코드 :

판매 중

22,500

설명

‘코딩 30일 챌린지’ 주인공과 함께하는
비전공자·디자이너를 위한 새로운 코딩 입문서

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

50만을 감동시킨 「코딩 30일 챌린지」, 다 함께 첫 코딩 도전

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

더 보기



이 책의 구성

이 책은 0~3단계까지 코딩 배경지식, HTML, CSS, 코딩 맛보기, 클론코딩을 차례대로 진행합니다. 비전공자의 눈높이에 맞추어 최대한 쉽게 설명하고자 노력했습니다.

_1단계 첫 코딩에 입문하기

첫 코딩 챌린지에 참여해주신 모든 분을 환영합니다. 1단계에서는 나만의 코딩 목표를 세우고, 웹이 무엇인지, 코딩이 무엇인지 알아봅니다. 웹 코딩의 첫 관문인 HTML로 첫 코딩에 입문해봅시다.

_2단계 CSS로 웹 꾸미기

CSS는 HTML로 만든 웹 페이지를 꾸미는 스타일링 코드입니다. 크기나 색을 지정하거나 변경할 수 있습니다. 회전이나 이동하는 애니메이션도 구현할 수 있습니다. 밋밋했던 웹 페이지에 생동감과 감성을 불어넣어주는 CSS 세계로 함께 여행을 떠나 보시죠.

더 보기

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

HTML과 CSS만으로도 앱 화면을 구현할 수 있습니다. 이번 최종 프로젝트에서는 영상 서비스 앱을 만듭니다. 우리가 항상 즐겨보는 영상 서비스 앱 UI를 어떻게 HTML과 CSS만으로 구현할 수 있는지 알아봅시다. 이 과정을 통해 여러분은 코딩이 더 재미있어지는 놀라운 경험을 하게 될 겁니다. 영상 서비스 앱을 웹에 배포도 해봅시다. 3단계 전체가 한 프로젝트입니다.

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

리플잇은 온라인 에디터입니다. 설치할 필요가 없어요. 간단히 사용 방법을 알아봅시다.

목차

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 깃허브로 웹 호스팅하기
학습 마무리

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

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

CONTNET

관련 콘텐츠들

VIDEO

임효성 저자의 영상들

Hover Box Element

Hover Box Element

SBS 뉴스토리 – 취업 사교육…코딩 열풍

Hover Box Element

Hover Box Element

비전공자가 한달동안 코딩을 배우면 얼마나 성장할까?

COMMUNITY

묻고 답해요beta

책을 읽다 이해가 되지 않거나 막히면 이곳에 질문을 남겨주세요. 저자님이 직접 답해드립니다.

전체 1
번호 제목 작성자 작성일 추천 조회
공지사항
질문을 올려주세요 🙂
god | 2021.08.17 | 추천 0 | 조회 356
god 2021.08.17 0 356
MISPRINT

오탈자를 알려주세요

알려주신 오탈자는 검토 후 다음 쇄에 반영되며,
내역은 정오표에서 확인할 수 있습니다.

SUBSCRIPTION

책 이야기를 들려드립니다.

『비전공자를 위한 첫 코딩 챌린지 with HTML & CSS』이 만들어지는 집필, 편집, 베타리딩 등의 출간 소식뿐 아니라,
관련 주제의 책 소식, 저자와의 만남, 강의, 오탈자 등 책 관련 소식을 전해드립니다.

    추가 정보

    지은이

    임효성

    발행일

    2021년 6월 10일

    ISBN

    979-11-971498-4-3 93000

    분량

    404쪽

    판형

    46배판형(183mm x 235mm)

    상품평

    아직 상품평이 없습니다.

    “[Must Have] 비전공자를 위한 첫 코딩 챌린지 with HTML&CSS”의 첫 상품평을 남겨주세요

    이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다

    ©2020 GoldenRabbit. All rights reserved.
    서울시 마포구 신촌로2길 19 302호 (우)04051
    master@goldenrabbit.co.kr
    개인정보처리방침