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

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

임효성 지음

골든래빗(주) 2021년 06월 18일 출간 종이책 : 2021년 06월 10일 출간

작품소개

책소개

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