비전공자를 위한 첫 코딩 챌린지 with HTML&CSS(Must Have)(Must Have 시리즈)

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



[Q] 챌린지 이후 무엇이 변화되었나요?

[A] 마케팅, 디자인만 바라보던 제게 새로운 꿈이 생겼습니다. 저는 웹 프론트엔트 개발자가 되고 싶습니다. 그래서 지금은 자바스크립트를 배우고 있습니다.

비전공자가 프로그래머를 꿈꾸는 건 굉장히 파격적인 변화라고 생각합니다. 하지만 오늘날 흔한 모습이기도 합니다. 이 책을 읽으시는 모든 분이 저처럼 개발자를 꿈꾸실 필요는 없다고 생각합니다. 중요한 건 하고 싶은 일을 하는 거라고 생각합니다. 나만의 코딩 챌린지 목표를 모두 달성하시길 빕니다.



이 책의 구성

이 책은 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만 조회수를 기록했으며, 개발자와 협업하여 웹 사이트 제작을 담당했습니다. 현재는 웹 프론트엔드 개발자의 꿈을 더 키워 가고 있습니다.