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

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

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

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

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

_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일 내내 미친 듯이 달리는 방식 대신 꾸준히 조금씩 나아가는 방식의 챌린지를 채택했습니다. 그렇기 때문에 누구나 하실 수 있다고 생각합니다. 각자 자신이 부족했던 부분을 개선하는 계기가 될 겁니다. 30일 챌린지에 도전하시고 모두 저처럼 자신만의 의미를 찾기 바랍니다.

[Q] 챌린지 이후 무엇이 변화되었나요?
[A] 마케팅, 디자인만 바라보던 제게 새로운 꿈이 생겼습니다. 저는 웹 프론트엔트 개발자가 되고 싶습니다. 그래서 지금은 자바스크립트를 배우고 있습니다.
비전공자가 프로그래머를 꿈꾸는 건 굉장히 파격적인 변화라고 생각합니다. 하지만 오늘날 흔한 모습이기도 합니다. 이 책을 읽으시는 모든 분이 저처럼 개발자를 꿈꾸실 필요는 없다고 생각합니다. 중요한 건 하고 싶은 일을 하는 거라고 생각합니다. 나만의 코딩 챌린지 목표를 모두 달성하시길 빕니다.

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

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

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

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

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

“비전공자의 눈높이에 맞춰 설명합니다. 재밌게 따라 할 수 있는 예제가 좋아요. 어려움을 느끼지 않고 따라 할 수 있습니다. 비전공자가 웹 프로그래밍을 시작하기에 딱 좋은 책입니다.”
마동석 | 11번가 개발팀장

“IT 비전공자가 웹 프로그래밍을 시작하기에 딱 좋은 책입니다. 초보자에게 적절한 난이도로 재미있게 설명합니다. 무리해서 모든 것을 설명하려고 하지 않아 지루하지 않습니다. 각 장이 짧아 하루에 시간을 많이 투자하지 않아도 되어 더욱 마음에 들어요.”
조현석 | 개발자

“이 책은 구어체로 쉽게 설명되어 있어 과외 선생님께 배우는 것 같은 친근함이 느껴집니다. HTML과 CSS는 웬만한 프로젝트를 진행하면서 거의 필수로 사용되는데 의외로 간과됩니다. 바쁜 현업 중에 빠르게 HTML과 CSS를 익혀야 한다면 이 책이 좋은 선택이 될 겁니다.”
김진웅 | 넥스클라우드 Product Owner

“인터넷을 하다 보면 감탄이 나오는 홈 페이지를 본 경험이 있을 겁니다. 어떻게 만드는지 궁금하지 않던가요? 이 책은 코딩 초보자에게 웹 페이지가 어떻게 화려한 화면을 보여주는지, 그러한 페이지를 만들려면 어떻게 해야 하는지를 친절하게 설명합니다. 많은 궁금증이 풀릴 겁니다.”
사지원 | 현대엠엔소프트 책임 연구원

“저자의 설명을 듣고 문제를 풀어보고, 안 되면 저자가 주는 힌트를 보고 풀어보고, 그래도 안 되면 저자의 풀이 방식을 보면서 하나하나 익혀봅시다. 자신도 모르게 코딩 재미에 빠질 겁니다.”
송진영 | 프로그래머

“코딩을 전혀 해보지 않았지만, 웹 사이트를 만들고 싶은 분이 맨 처음 보기에 딱 적절한 책. HTML과 CSS가 뭔지 모르는 비전공자도 즐겁게 읽을 수 있습니다. 저자가 이해한 방식대로 쉽게 설명하기 때문에 예제 난이도도 적절하고 책장도 유쾌하게 잘 넘어가는 매력이 있습니다.”
이요셉 | IT인

“코딩 입문자라면 하나씩 따라 해보며 코딩의 즐거움을 만끽할 수 있을 겁니다. 다른 언어를 배운 초보자라면 HTML과 CSS의 개념을 잡을 수 있을 겁니다. 현업에서 HTML과 CSS를 사용한다고요? 클론 코딩은 의미가 있다고 생각합니다.”
이태헌 | 프로그래머

“나만의 웹 페이지를 갖고 싶다는 생각은 누구나 합니다. 그런데 어떻게 해야 하는지 모른다고요? 이 책으로 시작하고 도전해보세요. 코딩한 결과물을 웹에 직접 배포하거든요. 개발 환경을 구성하고 기본 문법과 개념을 익히는 첫걸음 첫 코딩 책으로 추천합니다.”
최희욱 | 프로그래머

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장 로그인 페이지 만들기
_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장 콘텐츠 추천 페이지 만들기
_18.1 뜯어보기
_18.2 사전 준비
_18.3 STEP 1 : 검색바 만들기
_18.4 STEP 2 : 추천 작품 만들기
_18.5 STEP 3 : 다른 작품 추천 기능 만들기
_18.6 STEP 4 : 네비게이션바 만들기
학습 마무리

19장 마이 페이지 만들기
_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장 웹에 배포하기
_20.1 웹 호스팅이 뭐지?
_20.2 깃허브로 웹 호스팅하기
학습 마무리

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