신간보도자료	(주)도서출판 길벗 서울시 마포구 월드컵로 10길 56(서교동) 대표전화 (02)332-0931/팩스 (02)323-0586 홈페이지 www.gilbut.co.kr 담당자 : 신유진(backdoosan@gilbut.co.kr)

신간안내	웹앱 페이지 디자인을 위한 HTML+CSS 실전 입문서

웹앱 페이지 디자인을 위한

HTML+CSS 실전 입문서

▶ 발행 : (주)도서출판 길벗

▶ 발행일 : 2025년 7월 15일

▶ 지은이 : 김영일

▶ 쪽수 : 336

▶ 판형 : 183 * 235(mm)

▶ 높이(두께) : 14(mm)

▶ 정가 : 25,000원

▶ ISBN : 979-11-407-1470-4 93000

*분야

<교보문고> 국내도서 > 컴퓨터/IT > 웹프로그래밍 > 웹프로그래밍일반

국내도서 > 컴퓨터/IT > 웹프로그래밍 > HTML/CSS3

국내도서 > 컴퓨터/IT > 대학교재

국내도서 > 대학교재 > 컴퓨터

<예스24>  국내도서 > 컴퓨터/IT > 웹사이트 > HTML/JavaScript/jQuery

국내도서 > 컴퓨터/IT > 웹사이트 > 웹디자인

국내도서 > 컴퓨터/IT > 모바일 프로그래밍

국내도서 > 대학교재 > 공학계열 > 컴퓨터공학

<알라딘>  국내도서 > 컴퓨터/모바일 > 웹디자인/홈페이지 > HTML/JavaScript

국내도서 > 컴퓨터/모바일 > 프로그래밍 개발/방법론 > 웹 서비스/웹 프로그래밍

국내도서 > 대학교재 > 공학계열 > 컴퓨터공학 > 프로그래밍 언어

<영풍문고> 국내도서 > 컴퓨터/IT > 인터넷

국내도서 > 기술/공학 > 정보/통신공학 > 정보통신일반

[간단한 책 소개]

입문자도 예제를 따라하다 보면 완성하는 웹코딩 첫걸음

크로스 브라우징, 반응형 최신 웹 환경에 맞춘 실습 과정

현재는 ‘ai 시대’입니다. 빠르게 인간의 사회에서 점점 영역이 퍼져가고 있고, ai가 없으면 불편을 느낄 정도로 필수 도구로서 자리매김하고 있습니다.

이러한 디지털 서비스는 다양하게 웹, 앱에서 사용되며, 웹, 앱을 통해서 전달되고 있습니다. 그리고 웹, 앱을 만들기 위해서는 기본적으로 코드를 구성하는 html & css가 사용됩니다.

html과 css는 애플리케이션을 구성하는 바탕인 UI인터페이스를 만들 수 있으며, javascript, React 등 웹 애플리케이션의 동적 제어를 하기 전 필수 요소이고, 웹 인터페이스를 구성하기 위해 반드시 거쳐야 하는 과정입니다.

《웹앱 페이지 디자인을 위한 HTML+CSS 실전 입문서》에서는 웹, 앱을 구성하는 데 있어, 최소의 레이아웃과 실무에서 자주 사용하는 요소만 집중하여 다루고 있어, 실제 알아야 할 내용을 중요도 순서로 학습할 수 있습니다.

《웹앱 페이지 디자인을 위한 HTML+CSS 실전 입문서》는 누구나 쉽게 배울 수 있고, 직접적인 심도 학습이 아닌 가볍고, 비전공자를 포함한 누구나 이해할 수 있는 수준을 고려하여 소개하고 있습니다.

[출판사 리뷰]

누구나 쉽게 디자인하고 코딩한다!

AI의 시대의 근간이 되는 웹과 앱의 필수 학습 과정이자, 웹디자인, UI, 인터페이스를 구성하는 기본 구성인 HTML&CSS를 비전공자나 디자이너도 알기 쉽게 웹, 앱 구성의 필수 레이아웃 및 자주 사용하는 기능적 요소만 엄선하여 소개합니다.

STEP1 웹과 앱의 디자인 이론과 개념의 이해

STEP2 자주 쓰는 중요 기능 중심의 HTML5, CSS3 실습

STEP3 핵심요약 및 연습문제로 배운 내용 스스로 점검하며 완성

[저자 소개]

김영일(eden)│kim9668@gmail.com

홍익대학교 일반대학원 영상인터랙션과 박사학위와 홍익대학교 영상대학원 인터랙션디자인과에서 석사학위를 받았다.

2004년부터 CJ오쇼핑, SK커뮤니케이션즈의 Nate, Cyworld, 11번가 등에서 UIUX 디자이너로 근무하였고, Samsung PTKorea 글로벌삼성 그룹 디지털UIUX 팀장, GrouponKorea, 위메프 등에서 e-커머스 팀장으로 다양한 웹앱 디지털서비스를 제작하였다.

現) 한양여자대학교 스마트IT과 조교수로 재직 중이며, Web/App, UIUX, Html&Css, Javascript, React, Futter, Nodejs, FullStack developer,메타버스지향 C#, C++ Unity, Unreal VR, AR, 3D Blender 교육을 담당하고 있고, 한국 e-스포츠학회 부회장을 겸하고 있다.

저서로는 『기초 탄탄 UXUI 디자인을 위한 Adobe XD』 제이펍(2022), 『메타버스 교과서』(세종도서 학술부문 선정) 길벗캠퍼스(2023), 『블렌더 교과서』 길벗캠퍼스(2024) 등이 있으며, 다양한 분야의 집필 활동을 이어가고 있다.

[목차 소개]

1장 | 웹 이해 및 웹 표준화

1.1 실습 환경 IDE : Visual Studio Code(코드 실습 환경)

1.2 Internet의 시작

클라이언트와 웹서버의 관계

클라이언트 - 웹서버 - 데이터베이스의 관계

1.3 HTML + CSS + JAVASCRIPT의 유기적 구조

1.4 Web Standards & Web Accessibility(웹 표준화 접근성)

1.5 Web Application Architecture & Markup Language(웹 시스템 구조 및 웹 데이터의 논리적 구성)

1.6 Browser 점유율

전체 모든 플랫폼(데스크톱 + 모바일 + 테블릿)

데스크톱 환경

핵심 요약

2장 | HTML 기본 구조 및 필수 태그

2.1 HTML의 구조

2.2 head 태그

인코딩

반응형 웹 표시

브라우저 타이틀

외부 경로

자바스크립트 작성

스타일시트 작성

2.3 body 태그

Heading Text(헤딩 텍스트)

Text

주석 처리

문단(paragraph) 태그

list 태그

img 태그

2.4 공간 태그 : div/span

div 태그

span 태그

2.5 block level 태그 / inline level 태그

2.6 semantic 태그

2.7 form 태그

2.8 기타 태그

멀티미디어 태그

테이블 태그

color

2.9 상대/절대경로

핵심 요약

연습 문제

3장 | CSS : 선택자, 박스 모델

3.1 CSS 구조와 이해

CSS의 기능

CSS의 기본 구조

3.2 CSS 크로스브라우징 호환성 체크

3.3 CSS 초기화

3.4 CSS 사용법 3가지

EXTERNAL CSS(외부 링크)

INTERNAL CSS(STYLE 내부 작성)

INLINE CSS(body 태그에 삽입)

3.5 Selector(선택자)

3.6 background

3.7 Box Model – padding, border, margin

box-sizing : 박스 기준 설정

3가지 박스 모델

시계방향 1~4개 개수별 차이

핵심 요약

연습 문제

4장 | CSS : 폰트, 크기

4.1 font, text

텍스트 컬러

텍스트 정렬

텍스트 대문자 표현

텍스트 데코레이션

글자 그림자 표현

Font

4.2 width/height, px, %, vh, vw

PX(pixel) 고정 : 기본 절댓값

%(percent) 가변 : 상댓값

VW(viewport width)

VH(viewport height)

4.3 em/rem

4.4 line-height

4.5 vertical-align

핵심 요약

연습 문제

5장 | CSS : layout 1

5.1 가상 엘리먼트

앵커 가상 클래스

순서의 가상 클래스

가상 요소

5.2 box-sizing

5.3 고전적 float : left

5.4 overflow

5.5 display

display : none

display : inline

display : block

display : inline-block

display : flex

display : grid

5.6 Block Formatting Context(BFC)

핵심 요약

연습 문제

6장 | CSS : layout 2

6.1 layout 1 : clear : both;

6.2 layout 2 : overflow : hidden

6.3 layout 3 : clearfix

6.4 position / z-index

position

z-index

6.5 현대적 flex

부모 속성

자식 속성

6.6 현대적 grid

핵심 요약

연습 문제

7장 | CSS : 알아두면 유용한 팁

7.1 margin collapsing(마진 겹침 현상)

7.2 negative margin

7.3 inheritance(상속)

7.4 가로 또는 세로 정렬(center align)

1줄 텍스트 정렬일 경우

2줄 이상 텍스트 중앙 정렬일 경우

7.5 중앙 정렬(가로+세로)

마진과 위치 값을 활용한 방법

마진 오토와 양 끝 모서리 부분 0 값을 활용한 방법

display : table-cell 이용한 방법

flex 방법

7.6 가시성, 투명도, 애니메이션(visibility, transitions, transform, @keyframes, animation)

7.7 기타 유용한 팁

핵심 요약

연습 문제

8장 | CSS 함수 및 반응형 레이아웃

8.1 반응형 웹

8.2 css 함수 : var( )

8.3 css 함수 : calc( )

핵심 요약

연습 문제

9장 | HTML, CSS 입문 실습

9.1 HTML 기초 하이퍼링크

9.2 HTML 구조와 절대 / 상대경로

9.3 HTML, CSS 이미지와 내비게이션

9.4 HTML, CSS 반응형에 따른 메뉴 가로&세로

반응형에 따른 가로 형태

반응형에 따른 세로 형태

9.5 HTML, CSS 반응형 이미지 카드 갤러리

10장 | HTML, CSS 기초 레이아웃 실습

10.1 기초 웹페이지 응용 실습 1

10.2 기초 웹페이지 응용 실습 2

10.3 기초 웹페이지 응용 실습 3

11장 | HTML, CSS 활용 실습

11.1 forms 활용한 로그인 페이지

결과 미리보기

html

css

11.2 forms 활용한 회원 가입 및 요청 사항 폼

결과 미리보기

html

css

11.3 dropdown 가로 메뉴

결과 미리보기

html

css

11.4 dropdown 세로 메뉴

결과 미리보기

html + javascript

css

11.5 TABLE 활용한 리스트

결과 미리보기

html

css

11.6 이미지가 들어간 로그인 페이지 254

결과 미리보기

html

css

12장 | HTML, CSS 실전 실습

12.1 실전 학습을 위한 기초 내용 체크

html

css

12.2 실전 학습을 위한 예제 1

pc 화면

모바일 화면

html + css 전체 코드

12.3 실전 학습을 위한 예제 2

pc 화면

모바일 화면

html

12.4 실전 학습을 위한 예제 3

pc 화면

모바일 화면

html

style.css

12.5 실전 학습을 위한 예제 4

pc 화면

모바일 화면

html

css

13장 | GIT 데이터 버전 관리

13.1 GIT(깃) 버전 관리 프로그램

git 소개

git 설치

13.2 생성 공간에 파일 업로드 방법

가장 빠르게 업로드하는 방법

Git 코드 사용법

vscode에서 세팅 후 업로드 방법

업로드 / 다운로드 GIT 명령어 정리

13.3 GitHub 계정으로 생성형 ai 코드 활용법