본문 바로가기

추천 검색어

실시간 인기 검색어

웹앱 페이지 디자인을 위한

HTML+CSS 실전 입문서

길벗캠퍼스

2025년 07월 15일 출간

국내도서 : 2025년 07월 15일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 PDF (80.51MB)   |  337 쪽
ISBN 9791140714957
지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어
교보eBook App 듣기(TTS) 가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.

PDF 필기가능 (Android, iOS)
소득공제
소장
정가 : 25,000원

쿠폰적용가 22,500

10% 할인 | 5%P 적립

이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.

카드&결제 혜택

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
  • 리뷰 작성 시, e교환권 추가 최대 200원

작품소개

이 상품이 속한 분야

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

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

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

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

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

작가정보

저자(글) 김영일 저자

kim9668@gmail.com 홍익대학교 영상대학원 인터랙션디자인과에서 석사 학위 졸업, 홍익대학교 일반대학원 영상인터랙션과 박사 학위를 받았다. 2004년부터 CJ오쇼핑, SK커뮤니케이션즈의 Nate, Cyworld, 11번가 등에서 UX/UI 디자이너로 근무하였고, 삼성 PTKorea, GrouponKorea, 위메프 등에서 e-commerce 팀장으로 근무하며 다양한 디지털 서비스를 제작했다. 현재 한양여자대학교 공과대학 SmartIT과의 조교수로 재직 중이며, We b /App UX/UI, HTML & CSS, JavaScript, React, Flutter, Front-end Node.js, SpringBoot Back-end, Framework 개발, 메타버스 지향 C#/C++ Unity & Unreal VR/AR, Blender3D 교육을 담당하고, 한국e스포츠학회 부회장을 겸하고 있다. 『기초 탄탄 UX/UI 디자인을 위한 Adobe XD』(제이펍, 2022), 『메타버스 교과서(2023 세종도서 학술부문 선정)』(길벗캠퍼스, 2023) 등 다양한 분야 도서를 집필하였다.

이 상품의 총서

Klover리뷰 (0)

Klover리뷰 안내
Klover(Kyobo-lover)는 교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1. 리워드 안내
구매 후 90일 이내에 평점 작성 시 e교환권 100원을 적립해 드립니다.
  • - e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • - 리워드는 5,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다. (2024년 9월 30일부터 적용)
  • - 리워드는 한 상품에 최초 1회만 제공됩니다.
  • - sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.
2. 운영 원칙 안내
Klover리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다. 일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

구매 후 리뷰 작성 시, e교환권 100원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여 주는 교보문고의 새로운 서비스 입니다. 교보eBook 앱에서 도서 열람 후 문장 하이라이트 하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 ‘좋아요’ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보없이 삭제될 수 있습니다.
리워드 안내
  • 구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.
  • e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • 리워드는 5,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다. (2024년 9월 30일부터 적용)
  • 리워드는 한 상품에 최초 1회만 제공됩니다.
  • sam 이용권 구매 상품 / 선물받은 eBook / 오디오북·동영상 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.

구매 후 문장수집 작성 시, e교환권 100원 적립

    교보eBook 첫 방문을 환영 합니다!

    신규가입 혜택 지급이 완료 되었습니다.

    바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)
    지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!

    교보e캐시 1,000원
    TOP
    신간 알림 안내
    HTML+CSS 실전 입문서 웹툰 신간 알림이 신청되었습니다.
    신간 알림 안내
    HTML+CSS 실전 입문서 웹툰 신간 알림이 취소되었습니다.
    리뷰작성
    • 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
    • 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
    • 콘텐츠 다운로드 또는 바로보기 완료 후 리뷰 작성 시 익일 제공
    감성 태그

    가장 와 닿는 하나의 키워드를 선택해주세요.

    사진 첨부(선택) 0 / 5

    총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.

    신고/차단

    신고 사유를 선택해주세요.
    신고 내용은 이용약관 및 정책에 의해 처리됩니다.

    허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
    있으니 유의하시어 신중하게 신고해주세요.


    이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.

    문장수집 작성

    구매 후 90일 이내 작성 시, e교환권 100원 적립

    eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.

    P.
    웹앱 페이지 디자인을 위한 HTML+CSS 실전 입문서
    저자 모두보기
    저자(글)
    낭독자 모두보기
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 프리미엄 이용권입니다.
    선물하실 sam이용권을 선택하세요.
    결제완료
    e캐시 원 결제 계속 하시겠습니까?
    교보 e캐시 간편 결제
    sam 열람권 선물하기
    • 보유 권수 / 선물할 권수
      0권 / 1
    • 받는사람 이름
      받는사람 휴대전화
    • 구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
    • 열람권은 1인당 1권씩 선물 가능합니다.
    • 선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
    • 선물한 열람권의 등록유효기간은 14일 입니다.
      (상대방이 기한내에 등록하지 않을 경우 소멸됩니다.)
    • 무제한 이용권일 경우 열람권 선물이 불가합니다.
    이 상품의 총서 전체보기
    네이버 책을 통해서 교보eBook 첫 구매 시
    교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 네이버 책을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)
    구글바이액션을 통해서 교보eBook
    첫 구매 시 교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 구글바이액션을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)