설명
‘코딩 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
관련 콘텐츠들
[환경 설치] Must Have 《비전공자를 위한 첫 코딩 챌린지 with HTML&CSS》
반응형 웹을 위한 CSS 레이아웃 플렉스박스
웹에서 더 다양한 레이아웃을 만들고자 고안된 기법이 플렉스박스flexbox입니다. 플렉스는 ‘유연한’이란 뜻을 가지고 있어요. 이름만큼이나 화면 레이아웃을 유연하게, 자유자재로 배치할 수 있게 해줍니다.
Read More
[이벤트] [박미정×임효성] 깃&깃허브 협업 시나리오 방송
깃허브는 사용하는데 어떻게 협업해야 하는지 모르겠나요? 지금 제대로 소스 코드를 관리하는지 의문이 생기시나요? 깃허브를 더 효과적으로 사용하고 싶은 당신을 위해 준비했습니다.
Read More
[마감] 《박미정의 깃&깃허브 입문》을 리뷰할 ‘북 스포일러’를 찾습니다
이번 북 스포일러 모집에서는 《박미정의 깃&깃허브 입문》을 모집합니다. 서평으로 책을 평가해주셔도 되고, 책을 읽으며 내용을 블로그에 요약 정리해주셔도 됩니다. 많은 참여 부탁드립니다.
Read MoreCOMMUNITY
묻고 답해요beta
책을 읽다 이해가 되지 않거나 막히면 이곳에 질문을 남겨주세요. 저자님이 직접 답해드립니다.
SUBSCRIPTION
책 이야기를 들려드립니다.
『비전공자를 위한 첫 코딩 챌린지 with HTML & CSS』이 만들어지는 집필, 편집, 베타리딩 등의 출간 소식뿐 아니라,
관련 주제의 책 소식, 저자와의 만남, 강의, 오탈자 등 책 관련 소식을 전해드립니다.
Reviews
There are no reviews yet.