완성된 웹사이트로 배우는 HTML&CSS웹 디자인

초중학교 때 웹 개발을 공부하여 이미 여러 웹사이트를 만들어보았습니다. 그렇기에 어느 정도 웹 개발을 할 줄 안다 생각하였으나 이 책을 보니 "이렇게도 개발할 수 있구나"라는 부분을 많이 느꼈습니다.

 

한빛 미디어의 '나는 리뷰어다'를 통해 받은 도서로 느낀 점을 짧게 요약해보겠습니다.

 

본 도서는 8개의 챕터로 구성되어있습니다.

• 웹사이트의 기본과 필수 도구
• 랜딩 페이지로 배우는 반응형 웹 디자인과 글꼴
• 블로그 사이트로 배우는 다단 레이아웃과 꾸미는 방법
• 회사 사이트로 배우는 표, 그래프, 폼, 자바스크립트
• 이벤트 사이트로 배우는 특정 페이지 만드는 법과 애니메이션
• 갤러리 사이트로 배우는 이미지와 동영상을 사용하는 방법
• HTML과 CSS를 더 빠르고 쉽게 관리하는 방법
• 사이트 올리는 법과 문제 해결 방법

웹사이트의 기본과 필수 도구

HTML에 대한 기본적인 내용과 자바스크립트, CSS가 무엇인지 설명합니다.
책을 읽기 시작한 지 얼마 되지 않아 바로 브라우저 별 지원과 CSS 셀렉터 정의법, 네이밍 규칙 그리고 자주 사용하는 클래스명 등 정말 실전에 초점 하여 책이 만들어졌다는 생각이 들었습니다.

 

랜딩 페이지로 배우는 반응형 웹 디자인과 글꼴

랜딩 페이지를 만들며 레이아웃과 기본적인 디자인과 폰트에 대해 배웁니다.

웹 폰트 적용하는 법과 조합하는 법 그리고 미디어쿼리로 모바일에 대응하는 반응형 웹 디자인을 만드는 법을 설명합니다.

 

블로그 사이트로 배우는 다단 레이아웃과 꾸미는 방법

2단, 타일형, 모자이크, 다단, 프리과 같이 여러 레이아웃 종류와 CSS Shapes 그리고 ::before selector를 통한 커스터마이징을 통해 꾸미는 방법 중점으로 설명합니다.

 

표부터 헤더와 푸터, 페이지네이션 등 여러 부분을 꾸미되 "읽기 쉽고 디자인적으로 아름답도록"을 중점으로 설명하고 있습니다.

회사 사이트로 배우는 표, 그래프, 폼, 자바스크립트

기존의 틀에서 벗어난 레이아웃으로 회사 사이트를 만들어봅니다.

이번 챕터에서는 모바일 퍼스트로 구현하고 이후 미디어쿼리를 통해 데스크톱(PC)을 대응합니다.

 

Chartist.js, Chart.js와 같은 자바스크립트 라이브러리를 통해 차트 만드는 법과 표로 데이터를 만들거나 타임라인을 만들어보고 속성 셀렉터를 통해 꾸미는 법을 알려줍니다.

이벤트 사이트로 배우는 특정 페이지 만드는 법과 애니메이션

많은 사람들이 방문하는 이벤트 사이트를 방문자의 마음을 움직일 수 있게 만드는 법을 배웁니다.

 

CSS로 부드럽게 움직이는 방법과 블렌드 모드로 이미지 색을 바꾸는 기본적인 내용부터 커스텀 속성(변수)을 사용하는 법 그리고 트랜지션, 키 프레임 등 다양한 애니메이션을 적용하는 방법에 대해 소개하고 있습니다.

갤러리 사이트로 배우는 이미지와 동영상을 사용하는 방법

포트폴리오 사이트로 사용하 수 있는 갤러리 사이트를 구현합니다.

CSS Grid를 통해 다중 컬럼 레이아웃을 만들고 배경에 동영상을 넣으며 이미지에 필터, 그림자 등 여러 옵션을 넣어 꾸며봅니다. 또한 라이트박스의 개념과 적용 법 그리고 다크 모드 대응에 대해 설명합니다.

HTML과 CSS를 더 빠르고 쉽게 관리하는 방법

본 챕터에서는 효율적으로 관리 및 실수를 최소화하는 법에 대해 소개합니다.

에밋 익스텐션을 통해 html, css 자동완성과 여러 축약 예시를 설명하며 calc 함수로 계산하는 법 그리고 방대한 CSS를 Sass로 빠르고 간략, 분할하여 관리하는 방법이 담겨있습니다.

 

특히 Sass의 경우 그동안 "굳이 사용을 해야할까?" 라는 생각이었지만 책에 나오는 설명과 따라 해 보니 정말 그동안 불편하게 개발을 해왔구나라는 생각이 들 수밖에 없었습니다...

사이트 올리는 법과 문제 해결 방법

마지막 챕터에서는 문제 해결 중점으로 일종의 팁과 같은 내용이 담겨있습니다.

자주 발생할 수 있는 문제를 HTML/CSS, 자바스크립트, Sass 카테고리별 분류 후 상황별 케이스를 체크할 수 있도록 카테고리로 분류하여 체크할 수 있도록 체크 리스트가 있어 기본적인 실수에 대한 사항은 대게 처리할 수 있지 않을까라는 생각이 들었습니다. 또한 자주 발생하는 오류 메시지와 웹 사이트에 질문하는 방법도 함께 설명하고 있습니다.

마치면서

제목처럼 기초적인 내용을 원리 하나하나 설명하는 것 보다는 실제로 바로 사용할 수 있도록 핵심만 콕콕 잡았다는 것이 많이 느껴졌습니다.

 

특히 중요한 부분은 하이라이트가 되어있어 핵심 포인트를 잡기 좋았으며, 내용 외적으로도도 여러 가지 팁을 알려주는 부분들이 마치 "이것도 알면 더 좋을 거야 알아둬!!" 하는 것 같았습니다. 그리고 해당 팁들이 매우 중요하거나 꼭 알아두면 좋을 부분들로 구성되어있어 하나하나 신경을 많이 썼다는 것이 느껴졌습니다.

 

본 도서는 초반에 나오지만 실전 경험을 목표로 하는 도서이기에 기초 내용이 많지 않아 개발 관련 지식이 전무하신 분이 읽기에는 조금 어려울 수 있습니다. 그렇지만 어느정도 경험이 있다면 실제로 사용할만한 핵심 요소들로 콕콕 모아두었기에 빠르게 실력을 향상하는데 많은 도움이 될 것이라 생각이 됩니다.