나혼자 하는 코딩독학서, 코딩-레벨-업

HTML, CSS,Javascript 실습형 입문서

남은정 지음 | DedblangIca 사진

블랙크라운 2025년 02월 03일 출간

작품소개

책소개

본 교재는 프론트엔드 코딩 입문자용 책이며, HTML,CSS,JavaScript 에 대해서 다루고 있습니다.

모두 순수코딩으로 작업하며, 각각의 원리와 이해를 하면서 코딩을 배울 수 있도록 기초부터 설명합니다.
'코딩-레벨-업'은 웹페이지 제작의 기초부터 스스로 학습할 수 있도록 다양한 예제와, 보강영상을 같이 제공하고 있습니다.

[ 영상소개 ]
1,2장까지는 유튜브 영상을 보면서 설치 및 실행을 따라서 해보실 수 있도록 영상을 준비했습니다.
이후 3장부터는 유튜브 영상을 보시면서 학습에 대한 복습 또는 예습을 하면서 책을 보시면 가장 효율적일것같습니다

입문서는 총 '봄-여름-가을-겨울' 시즌으로 구성될 예정이며, 본 책은 시리즈의 첫번째 책으로 '봄(Spring)' 시즌 책입니다.

목차

Chapter 01-개발환경 준비하기
__01.1 VS CODE 및 익스텐션 설치하기
__01.2 크롬브라우저 설치 및 크롬 Extension
__01.3 첫 프로젝트 시작하기

Chapter 02 - HTML, CSS, JavaScript
__02.1 웹표준과 웹문서 그리고 웹브라우저가 하는일
__02.2 HTML이란?
__02.3 CSS란?
__02.4 JavaScript란?

Chapter 03 - 예제 따라하며 익히기
__03.1 HTML 마크업
__03.2 CSS 스타일 선언
__03.3 CSS 선택자
__03.4 JavaScript 사용하기

MISSION -I
__01. 크기, 여백, 정렬연습
__02. 모서리 둥글기 연습
__03. 프로필 이미지 만들기(따라하기)

Chapter 04- My Album 만들기
__04.1 레이아웃 파악하기
__04.2 HTML 마크업 하기
__04.3 CSS 스타일링 하기
__04.4 JavaScript로 DOM 조작하기
__04.5 a 태그와 button 태그 알아보기

MISSION - II
__04. 버튼 및 :hover 스타일링
__05 포털사이트 버튼 따라해보기

Chapter 05 - 카드형 레이아웃 만들기
__05.1 텍스트에 관련된 명령어 배우기
__05.2 텍스트 마크업 및 스타일링 연습
__05.3 블럭요소, 인라인요소 정렬하기
__05.4 FLEX 이해하기
__05.5 카드 레이아웃 예제 만들어보기

MISSION - III
__06 Flex-box 따라하기
__07 네이버상단메뉴 따라하기
__08 네이버 광고부분 레이아웃 따라하기

Chapter 06 - OTT사이트 만들어 보기
__06.1 웹문서 레이아웃 이해하기
__06.2 레이아웃 스케치
__06.3 header 헤더영역 만들기
__06.4 main 영역 만들기
__06.5 footer 푸터영역 만들기

미션해설노트

부록
__01무료 웹폰트 사이트
__02 무료 이미지 다운로드 사이트
__03 무료 웹아이콘 사이트
__04 HTML Element List
__05 CSS Selector List
__06 CSS Property List
__07 Javascript with HTML DOM

작가정보

저자(글) 남은정

컴퓨터관련학과를 전공하고도 디자인을 계속해왔던 저자는 처음 웹페이지를 만들고자 접했던 코딩책과 결과물을 만들어내며 느꼈던 신세계를 경험하며 디자인 + 코딩을 같이하는 프리랜서로 일하고 있습니다.

혼자서 독학으로 매번 산을 넘으며, 배워온 것들을 많은 학생들을 가르치면서, 내가 알고 있는 것들을 학생들에게 어떻게 전달해야하는지 어떤것이 가장 좋은 방법이었는지를 많이 연구하며, 그 결과를 책으로 만들게 되었습니다.

유튜브 '코딩고스트'를 운영하고 있습니다.

사진 DedblangIca

일러스트작가 DedblangIca의 '이랑이, 동백즈, Kosigi' 캐릭터가 책의 예제및 삽화로 사용되었습니다.