콘텐츠 바로가기
본문 바로가기


블로그 전체검색
완성된 웹사이트로 배우는 HTML&CSS 웹 디자인

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

Mana 저/신은화 역

내용 평점 5점

구성 평점 5점

“약간의 노력으로 극적인 효과를 내는 마법의 한 줄을 찾아”

 

이 책은 CSS와 HTML을 학습하는 개발 기초서적이지만 책의 목차와 구성이 다른 책과 비교해서 매우 효율적입니다.

책의 전반은 아주 기초적인 CSS & HTML 문법을 학습하다가 중반부터는 실무에서나 다루는 완성된 5개의 사이트를 직접 설계하여 코딩하는 것을 배우게 됩니다.

우리가 학습하게 될 5개의 샘플 사이트는 개발을 하게 되면 반드시 한번은 접하게 되는 랜딩 페이지(LP), 블로그, 회사 홍보 사이트, 이벤트 사이트 그리고 갤러리 사이트입니다.

각 사이트마다 레이아웃 구조나 핵심적인 요소들이 구분되니 5개의 샘플 사이트만 잘 학습해 놓는다면 기업 홈페이지는 어렵지 않게 HTML과 CSS를 이용하여 개발이 가능합니다.

 

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

 

1장은 HTML과 CSS의 가장 기초적인 부분을 설명하는데 복습하는 의미로 가볍게 읽어 보시면 됩니다.

32p ~ 35p까지 CSS 네이밍 규칙을 설명하는데 업계에서 통용되는 거의 표준에 가까운 class명임으로 실무 협업할 때 도움이 될 것입니다.

그리고 의외로 웹 브라우저의 개발자 도구 기능을 상세히 아는 분이 드문데 1장 후반부에 개발자 도구를 이용한 CSS 확인 및 디버깅을 위한 중요한 팁이 소개되니 꼭 참고 바랍니다.

 

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

 

2장의 목표 사이트는1페이지 자리 랜딩 사이트지만 다양한 디바이스 크기에 대응하는 반응형 웹 디자인 기법도 함께 학습합니다. 

미디어 쿼리, 배경 이미지, 글꼴(웹 폰트, 아이콘 폰트), 레이아웃(그리드)이 어떻게 반응형 코딩에 활용이 되는지 살펴봅니다.

CSS의 스크롤 스냅(scroll-snap-) 속성은 랜딩 페이지 만들 때 자주 사용하는 기능임으로 7 페이지 걸쳐 비중 있게 다룹니다. 

 

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

 

블로그 예제는 앞에서 학습한 랜딩 사이트보다 복잡한 레이아웃과 다양한 디자인 요소를 가지고 있습니다.

일단 레이아웃이 블로그에 적합한 2단 레이아웃이고 움직이는 메뉴, 스티치 무늬의 버튼, 타이틀 텍스트, 이미지, 리스트, 페이지네이션 등 CSS로 예쁘게 꾸미는 방법에 대해 배웁니다.

특히 ::before, ::after 가상 요소를 이용한 요소 꾸미기는 실무에서 자주 사용하는 기법으로 예제와 함께 정리가 잘되어 있습니다.

 

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

 

여기부터 웹개발에서 가장 흔한 기업 소개 홈페이지를 제작하는데 필수 요소인 히어로 이미지, 문의사항 같은 양식, 표, 그래프, 타임라인 등을 상세하게 다룹니다. 

여기에 HTML 태그로 해결할 수 없는 다양한 사용자 상호작용, 동적 효과 등을 내기 위해 자바스크립트 라이브러리 사용법에 대해 배웁니다.

표(가격표, 시간표 등)의 경우 좁은 모바일 디바이스에서 데이터를 어떻게 표현해야 하는지 반응형 웹 디자인 설계로 잘 설명되어 있습니다.

 

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

 

이벤트 사이트에서 핵심은 단 시간에 고객의 마음을 움직여 광고 효과를 극대화하는 것입니다.

이렇게 하려면 단순한 이미지나 텍스트의 나열보다는 적당한 이미지 효과나 애니메이션 적용이 필수입니다.

우선 메뉴의 링크를 클릭했을 때 부드럽게 화면을 이동하는 smooth scroll, 그리고 상단 메뉴를 화면 스크롤 시 고정하는 CSS 속성에 대해 배웁니다.

최근 CSS코딩 시 커스텀 속성(변수)을 사용하는 경우가 많은데 기본적인 개념과 애니메이션 효과를 위한 트랜지션, 키 프레임 애니메이션에 대해 알아보고 후반부에는 슬라이드 메뉴를 어떻게 코딩하는지 알아봅니다.

CSS로 애니메이션을 구현하기 위한 트랜지션, 필터, 키프레임, 애니메이션 속성이 예제와 함께 상세히 설명되어 있어 소스 코드를 조금만 응용하면 멋진 동적 효과를 홈페이지에 적용할 수 있습니다.


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


6장은 갤러리 사이트 구현에 대한 내용인데, 갤러리 기능을 구현하는데 필요한 거의 모든 핵심 기술을 다루고 있습니다.

(1) 동영상을 배경으로 삽입하는 방법
(2) 마우스 호버(hover) 시 이미지 확대하기
(3) 라이트 박스(lightbox) 구현하기
(4) 스크롤 시 이미지 리스트에 애니메이션 추가하기
(5) 다크모드 대응 코딩 법


7장. HTML과 CSS로 더 빠르고 쉽게 관리하는 방법

7장과 8장 내용이 부록처럼 보이는 내용이지만 사실은 실무에서 중요한 빠른 코딩을 위한 에밋(Emmet) 사용법과 CSS 전처리기인 Sass에 대해 다루고 있습니다.


마지막으로…

요즘 프론트엔드 개발을 하기 위해서는 배워야 하는 것들이 많아서 무엇을 먼저 시작해야 하는지 고민하는 분들이 많습니다.

만일 HTML과 CSS를 조금 배웠다면 이 책에서 다루는 5개의 예제 사이트에 한번 도전해 보세요.

단 시간에 상용 사이트에 적용할 수 있는 실전 테크닉을 배울 수 있습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."
 


PRIDE2