설명
‘코딩 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
관련 콘텐츠들
[출판편집자 노트] 기록하기 좋아하는 편집자의 옵시디언 책 만들기
안녕하세요. 골든래빗의 편집자 바이블입니다. ⟪세컨드 브레인은 옵시디언⟫의 출간을 앞두고 책이 만들어진 과정과, 이 책이 독자 여러분께 어떤 책이 되었으면 하는지 편집자의 생각을 정리해보았습니다.
Read More
[Obsidian] 옵시디언+챗GPT로 제텔카스텐 구축하기 | 오픈AI, 사용법, Smart connections
옵시디언에서 제텔카스텐을 실제로 적용하는 사례로 ChatGPT를 만든 OpenAI를 Smart Connections와 연동해보겠습니다. 이로써 노트 기반으로 AI와 대화하거나 유사한 노트를 단숨에 찾을 수 있습니다.
Read More
[Zettelkasten] 제텔카스텐이란? | 메모법, 실천, 예시, 옵시디언
제텔카스텐(Zettelkasten)은 지식 및 아이디어를 관리하는 방식입니다. 작은 단위의 노트를 만들고 그 노트를 연결해가며 생각을 발전시키는 방식이죠. 제텔카스텐은 옵시디언만의 매력을 가장 잘 보여주는 부분이기도 합니다. 제텔카스텐을 구축하기 위해 옵시디언을 시작하는 사람도 많죠.
Read More
[Obsidian] 옵시디언 동기화 방법 | 무료, 유료, 협업, 깃, 구글 드라이브, 아이폰
옵시디언 사용에서 가장 큰 장벽이 바로 기기 간 동기화입니다. 클라우드 기반의 노트 앱이 아니기 때문에 파일 저장 책임이 이용자에게 있습니다. 각자에게 알맞은 방법은 동기화하려는 기기에 따라 달라집니다. 옵시디언의 싱크 플러그인을 이용한 동기화 방법과 그 외의 동기화 방법들을 소개합니다.
Read MoreCOMMUNITY
묻고 답해요beta
책을 읽다 이해가 되지 않거나 막히면 이곳에 질문을 남겨주세요. 저자님이 직접 답해드립니다.
SUBSCRIPTION
책 이야기를 들려드립니다.
『비전공자를 위한 첫 코딩 챌린지 with HTML & CSS』이 만들어지는 집필, 편집, 베타리딩 등의 출간 소식뿐 아니라,
관련 주제의 책 소식, 저자와의 만남, 강의, 오탈자 등 책 관련 소식을 전해드립니다.
Reviews
There are no reviews yet.