비전공자를 위한 첫 코딩 챌린지 with HTML&CSS (HTML, CSS 입문부터 영상 서비스 앱 UI 만들기와 배포까지)

임효성

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

00장개발환경구축

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

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

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

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

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

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

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

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

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

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.3STEP1:HTML레이아웃구성하기
_14.4STEP2:스타일링
_14.5STEP3:화면중앙으로위치시키기
학습마무리

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

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

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

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

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

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

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의코딩결과물은친숙한웹브라우저창에서보입니다.브라우저는검정바탕에helloworld가출력되는터미널환경보다훨씬친숙하고익숙한환경입니다.터미널환경은비전공자에게두려움을줍니다.자바,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단계전체가한프로젝트입니다.

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