HTML+CSS 웹 디자인 입문

HTML, CSS 기초부터 반응형 웹 디자인, 실전 웹 사이트 제작까지

Mana 지음 | 윤인성 옮김

위키북스 2026년 01월 30일 출간 국내도서 : 2020년 01월 03일 출간

작품소개

책소개

이 책은 HTML, CSS, 웹 디자인 기초를 다루고, 예제를 만들면서 배워보는 책입니다. 웹 디자인에 대해 아무것도 몰라도 처음부터 차근차근 배울 수 있도록 HTML과 CSS 기초를 알려주며 반응형 웹, Flexbox, 그리드 등 최신 기술까지 익힐 수 있도록 도와줍니다. 나아가 뒷부분에서는 앞에서 배운 내용을 바탕으로 직접 하나의 웹 사이트를 제작해 봅니다. 코드를 보고, 직접 손으로 입력하고, 만들면서 배우므로 실제 웹 사이트를 만드는 제작 흐름을 체험해 볼 수 있습니다.

더불어 이 책에서는 HTML과 CSS 같은 기본적인 기술 외에도 배색, 레이아웃, 타이포그래피 같은 ‘디자인 기초’도 함께 설명합니다. 또, 웹 페이지 디자인을 위한 편집 툴과 디자인 관련해서 참고할 만한 다양한 정보도 소개합니다. 어떻게 하면 예쁜 웹 페이지를 만들지 고민하는 독자에게도 유용한 책이 될 것입니다.

★ 이 책의 대상 독자 ★

◎ 이제 처음 웹 사이트 제작을 시작해 보려는 초보자
◎ HTML과 CSS를 기본부터 배우고 싶은 사람
◎ 아름다운 디자인의 웹 사이트를 만들고 싶은 사람
◎ 최신 웹 기술을 알고 싶은 사람

목차

▣ CHAPTER 1: 기억해 두어야 하는 웹 사이트 기본
1-1 좋은 웹 디자인이란?
__디자인의 목적은 상대방에게 무언가를 전달하는 것
__쉬운 사용
__보다 좋은 생활을 제공하는 것
1-2 다양한 종류의 사이트
__기업 사이트
__프로모션 사이트
__포트폴리오 사이트
__쇼핑 사이트
__미디어 사이트
__SNS
__ “사용하기 쉬움”을 생각하기
__보기 쉽게 디자인하기
1-3 사용성이란?
__읽기 쉬운 글 만들기
__사용하기 쉬운 조작성
1-4 웹 사이트의 구조
__인터넷이란?
__웹이란?
__웹 페이지의 구조
__URL이란?
1-5 장치의 종류
__단말기
__주변기기
1-6 웹 브라우저의 종류
__웹 페이지는 웹 브라우저에서
1-7 제작 흐름
__제작 흐름
__기획
__사이트맵 제작
__와이어프레임 만들기
__와이어프레임 작성 예
__디자인
__코딩
__웹에 공개
1-8 제작을 시작하기 전에
__텍스트 에디터 설치
__브라우저 설치
__구글 크롬 설치 방법
__그래픽 도구 확인

▣ CHAPTER 2: 웹 기본 구조 만들기 - HTML 기본
2-1 HTML이란?
__컴퓨터에 지시를 내리는 HTML
2-2 HTML 파일 만들기
__텍스트 에디터 실행하기
__코드 작성하기
__파일 저장하기
__웹 브라우저에서 열어 보기
__HTML 파일 이름 규칙
__[!doctype html]
__html~/html
__head~/head
__meta charset=“UTF-8”
2-3 HTML 파일의 골격
__title~/title
__meta name="description" content="~"
__body~/body
2-4 HTML의 기본 작성 방법
__HTML 기본 문법과 태그
__태그를 작성하는 규칙
__태그 내부에 있는 태그
__태그에 정보 추가하기
2-5 제목 붙이기
__제목 태그 h1~h6 태그
__제목 태그를 사용하는 순서
2-6 문장 출력하기
__단락을 출력하는 p 태그
2-7 이미지 삽입하기
__이미지를 출력하는 img 태그
__파일 경로 지정하기
2-8 링크 만들기
__링크를 만드는 a 태그
2-9 리스트 출력하기
__기본적인 리스트를 만드는 “ul 태그 + li 태그”
2-10 표 만들기
__순서 있는 리스트를 만드는 “ol 태그 + li 태그”
__표 기본
__셀 병합하기
2-11 입력 양식 만들기
__여러 개의 부품 조합하기
__입력 양식란을 만드는 form 태그
__입력 양식에 사용하는 부품
2-12 사용하기 쉬운 입력 양식 만들기
__입력 양식의 레이블을 만드는 label 태그
2-13 블록 요소로 그룹 나누기
__그룹 구분하기
__페이지 상부의 헤더를 만드는 header 태그
__내비게이션 메뉴를 만드는 nav 태그
__기사 부분을 만드는 article 태그
__테마를 가진 그룹을 만드는 section 태그
__페이지의 메인 콘텐츠 부분을 만드는 main 태그
__메인 콘텐츠가 아닌 추가 정보 aside 태그
__페이지 하부의 푸터 부분을 만드는 footer 태그
__의미를 가지지 않는 블록 요소를 만드는 div 태그
2-14 자주 사용하는 HTML 태그 목록

▣ CHAPTER 3: 웹 디자인 만들기 : CSS 기본
3-1 CSS란?
__HTML을 장식하는 언어인 CSS
3-2 CSS를 적용하는 방법
__CSS 파일을 읽어 들여 적용하기
__HTML 파일의 head 내부에 style 태그를 넣어 지정하기
__HTML 태그 내부에 style 속성 지정하기
3-3 CSS 파일 만들기
__텍스트 에디터 실행하기
__CSS 코드 작성하기
__CSS 파일 저장하기
__HTML 파일의 head 내부에서 CSS 파일 읽어 들이기
__웹 브라우저에서 열기
__CSS 파일의 이름 규칙
3-4 CSS 기본 작성 방법 익히기
__CSS 기본 문법
__CSS를 작성할 때의 규칙
3-5 문자와 문장 장식하기
__문자의 크기를 변경하는 “font-size 속성”
__폰트의 종류를 지정하는 “font-family 속성”
__문자의 두께를 바꾸는 “font-weight 속성”
__줄 높이를 바꾸는 “line-height 속성”
__문장 맞춤을 지정하는 “text-align 속성”
3-6 웹 폰트 사용하기
__웹 폰트란?
__웹 폰트 사용하기
3-7 색 넣기
__색 지정 방법
__문자색을 지정하는 “color 속성”
__배경에 색을 지정하는 “background-color” 속성
__배색 잘하기
__각 색을 메인으로 사용한 참고 사이트
3-8 배경 넣기
__배경에 이미지를 설치하는 “background-image 속성”
__배경 이미지의 반복 출력 “background-repeat 속성”
__배경 이미지를 출력하는 위치를 지정하는 “background-position 속성”
__배경 관련 속성을 한꺼번에 지정하는 “background 속성”
__사진을 내려받을 수 있는 웹 사이트
3-9 너비와 높이 지정하기
__크기를 지정하는 “width 속성”, “height 속성”
__웹 사이트에서 사용하는 단위
3-10 여백 조정하기
__여백의 개념
__요소 밖의 여백 “margin 속성”
__요소 내부의 여백 “padding 속성”
__여백을 사용해 그룹 만들기
__테두리와 문자 사이에 여백 만들기
3-11 선 긋기
__선의 두께 “border-width 속성”
__선의 종류 “border-style 속성”
__선 색 “border-color 속성”
__요소 주변에 선을 긋는 “border 속성”
__선 디자인을 효과적으로 사용하기
3-12 리스트 장식하기
__리스트 마커의 종류 “list-style-type 속성”
__리스트 마커의 출력 위치 “list-style-position 속성”
__리스트 마커로 사용할 이미지 “list-style-image 속성”
__리스트 마커와 관련된 장식을 한꺼번에 지정하는 “list-style 속성”
__리스트 마커를 효과적으로 사용하기
3-13 클래스와 ID를 사용한 지정 방법
__클래스와 ID
__클래스를 사용한 작성 방법
__ID를 사용한 작성 방법
__태그 이름과 함께 클래스와 ID를 사용하는 작성 방법
__클래스 이름과 ID 이름 규칙
__한 태그에 여러 개의 ID와 클래스 붙이기
__클래스와 ID의 차이
3-14 레이아웃 만들기
__Flexbox로 수평 정렬하기
__CSS 그리드로 타일 형태로 정렬하기
__보기 쉬운 레이아웃이란?
__레이아웃별 참고 사이트 목록
3-15 디폴트 CSS 리셋하기
__CSS 리셋이란
__브라우저에 따른 외관 차이
__리셋 CSS 사용하기
3-16 자주 사용하는 CSS 속성 목록

▣ CHAPTER 4: 풀 스크린 웹 사이트 제작하기
4-1 풀 스크린이란
__풀 스크린 레이아웃의 장점과 구성 요소
4-2 풀 스크린 페이지의 제작 흐름
__작성할 페이지
__제작 흐름
4-3 “head” 작성하기
__파일 준비하기
__HTML 골격 만들기
__ “meta” 정보와 “title” 작성하기
__필요한 CSS 파일 읽어 들이기
4-4 “header” 부분 만들기
__HTML에 “header” 부분 작성하기
__CSS 파일 준비하기
__공통 부분 작성하기
__로고 크기와 여백 조정하기
__내비게이션 메뉴 장식하기
__콘텐츠의 최대 출력 너비 설정하기
4-5 콘텐츠 부분 만들기
__문장과 버튼 설치하기
__화면을 꽉 채우는 배경 이미지 배치하기
4-6 파비콘 설정하기
__파비콘이란
__어떤 디자인이 좋을까?
__파비콘 전용 이미지 준비하기
__HTML의 “head” 내부에서 파비콘 읽어 들이기
__파비콘을 만들어주는 서비스 사용하기
4-7 풀스크린 페이지 변경해보기
__블랜드 모드로 배경 이미지에 색 겹치기
__배경을 그레이디언트 색상으로 설정하기
__배경 이미지에 블랜드 모드를 사용해서 그레이디언트 색상 섞기

▣ CHAPTER 5: 2-칼럼 웹 사이트 제작하기
5-1 2-칼럼 레이아웃이란
__2-칼럼 레이아웃의 장점과 구성 요소
__2-칼럼의 너비 비율
__반응형 웹에서의 배치
5-2 2-칼럼 페이지의 제작 흐름
__제작 흐름
5-3 페이지 전체의 제목 만들기
__파일 준비하기
__HTML 편집하기
__CSS로 장식하기
5-4 푸터 부분 만들기
__푸터 콘텐츠 작성하기
__CSS로 장식하기
5-5 수평 정렬 설정하기
__레이아웃 골격 만들기
__레이아웃 구성하기
5-6 메인 콘텐츠 영역 만들기
__기사 정보 부분 만들기
__이미지와 본문 작성하기
5-7 사이드바 만들기
__제목과 문장 장식하기
__카테고리 리스트 장식하기
5-8 반응형 웹 지원하기
__반응형 웹 디자인이란?
__반응형 웹을 지원하는 방법
__문자 크기와 여백 조정하기
__콘텐츠를 수직 정렬하기
__브레이크 포인트 생각해보기
5-9 칼럼 페이지를 변경해보기
__3-칼럼 레이아웃으로 설정하기
__출력할 칼럼의 순서 변경하기

▣ CHAPTER 6: 타일 형태의 웹 사이트 제작하기
6-1 타일 형태의 레이아웃이란
__타일형 레이아웃의 장점과 구성 요소
6-2 타일형 레이아웃의 제작 흐름
__제작 흐름
6-3 페이지 상부의 소개문 만들기
__파일 준비하기
__HTML 준비하기
__CSS로 장식하기
6-4 타일형 레이아웃 설정하기
__콘텐츠 준비하기
__CSS 그리드 사용하기
6-5 반응형 웹 지원하기
__요소를 반복 정렬하는 “repeat”
__요소 너비에 최솟값과 최댓값을 지정하는 “minmax”
__화면의 너비에 맞게 출력하는 “auto-fit”
6-6 타일형 레이아웃 변경 예
__크기가 다른 요소 배치하기
__큰 크기의 그리드 아이템 지정하기
__이미지의 높이 맞추기
__이미지 자르기
__반응형 웹 지원하기

▣ CHAPTER 7: 외부 미디어 사용하기
7-1 문의 페이지의 제작 흐름
__작성할 페이지
__제작 흐름
7-2 입력 양식 배치하기
__파일 준비하기
__HTML 편집하기
__CSS로 장식하기
__입력 양식 서비스 사용하기
7-3 지도 출력하기
__가게 정보 작성하기
__구글 지도 출력하기
__외관 조정하기
7-4 페이스북 플러그인 삽입하기
__SNS 부분의 레이아웃 잡기
__페이스북 플러그인 코드 받기
7-5 트위터 플러그인 삽입하기
__트위터 플러그인 코드 얻기
7-6 유튜브 영상 삽입하기
__유튜브 퍼가기 코드 추출하기
7-7 반응형 웹 지원하기
__미디어 쿼리로 수직 정렬하기
7-8 OGP 설정하기
__OGP란?
__OGP 설정하기
__페이스북에서 확인해보기
__트위터에서 확인해보기
7-9 외부 미디어 변경해보기
__구글 지도 변경하기

인물정보

저자(글) Mana

일본에서 2년 동안 그래픽 디자이너로 일한 뒤, 캐나다 밴쿠버에 있는 웹 제작 학교를 졸업했다. 캐나다, 호주, 영국 기업에서 웹 디자이너로 일했으며 현재는 일본에서 웹과 관련된 세미나를 진행하고, 웹 제작 컨설턴트로 교육에 힘쓰고 있다. 블로그 ‘웹 크리에이터 박스’는 2010년 일본 알파 블로거 어워드를 수상했다.

번역 윤인성

어쩌다가 책을 집필/번역하기 시작해서, 지금까지 계속해서 집필/번역하고 있다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하고 있다. 오전에는 커피, 오후에는 홍차를 마신다. 요리, 피아노, 기타, 작곡, 그림, 스컬핑 등의 취미를 갖고 있다. 《HTML5 웹 프로그래밍 입문》 《혼자 공부하는 파이썬》 《모던 웹을 위한 HTML5+CSS3 바이블》 등을 저술했으며 《최신 표준 HTML+CSS 디자인》 《파이썬을 이용한 머신러닝, 딥러닝 실전 개발 입문》 《파이썬을 이용한 웹 크롤링과 스크레이핑》 등을 번역하였다. 이 책의 역자 소개를 작성하는 시점을 기준으로 51번째 책이다.