(Must Have) 비전공자를 위한 첫 코딩 챌린지 with HTML&CSS : HTML, CSS 입문부터 영상 서비스 앱 UI 만들기와 배포까지
- 저자임효성 저
- 출판사골든래빗
- 출판일2021-06-10
- 등록일2021-12-06
보유 2, 대출 0,
예약 0, 누적대출 42, 누적예약 4
책소개
‘코딩 30일 챌린지’ 주인공과 함께하는비전공자·디자이너를 위한새로운 코딩 입문서HTML·CSS는 작성한 결과가 눈에 보여 코딩 입문자에게 적합한 언어다. 『비전공자를 위한 첫 코딩 챌린지 with HTML&CSS』는 HTML·CSS 언어로 ‘나만의 웹 사이트’를 만들 수 있게 이끌어준다. 비전공자인 저자가 30일간의 코딩 도전으로 깨닫게 된 코딩 입문 방법을 알려주 코딩 초보자도 쉽고 명확하게 이해할 수 있도록 학습 목표를 일목요연하게 제시하고 핵심 내용을 정리해 보여준다. 단계별로 프로젝트를 구현하며 코딩을 직접 체험할 수 있게 했다. 또한 멋진 프로젝트를 만들고 결과물을 웹에 배포하는 방법도 알려준다. 개발자와 협업하고 개발에 필요한 기획과 디자인을 하는 배경 지식을 갖추고 싶은 분이라면 지금 당장 코딩 챌린지에 도전하자.
저자소개
영상, 디자인, 개발 등 다양한 분야에 관심을 가지고 있다. 유튜버이자 프리랜서로 일하고 있다. 비전공자를 위한 코딩 30일 챌린지 영상으로 50만 조회수를 기록했으며, 개발자와 협업하여 웹 사이트 제작을 담당했다. 현재는 웹 프론트엔드 개발자의 꿈을 더 키워 가고 있다.
목차
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 깃허브로 웹 호스팅하기 학습 마무리 부록. 리플잇 : 온라인 에디터
한줄 서평
