완성된 웹사이트로 배우는 HTML&CSS 웹 디자인 - 5개 예제로 배우는 효율적인 웹사이트 제작 노하우
Mana 지음, 신은화 옮김 / 한빛미디어 / 2022년 5월
평점 :
장바구니담기


제가 23년차 디자이너이고, 그 중 15년을 웹디자인을 하며 살아갔기 때문에...

반응형이 나오기 전부터... 나모(이거 알면 시조새~)를 이용해 코딩했던 시절부터 웹페이지를 만들었기 때문에

이 책에 대해 아주 가까이 들여다 볼 수 있었습니다.


첫번째 챕터에서는 역시 이론이 나오겠죠~

웹페이지를 구성하는 HTML의 기본구성부터 필요한 요소들을 아주 쉽게 다루고 있습니다.

글이 많은 이론이라고해서 그냥 넘어가면 안됩니다.

웹페이지의 아주 기초적인 부분부터 요즘 사용하는 반응형에 이르기까지 정말 압축해서 잘 소개되어있습니다.

이렇게 압축하기도 쉽지 않을듯....


이 책은 HTML을 전혀 모르는 분들이 보기는 조금 어렵게 다가올 수도 있습니다.

기본적인 HTML에 대해 설명을 하긴 하지만 아주 자세히 나오진 않고 요약해서 핵심적으로 다루고 있거든요.

그렇지만 복잡한 HTML 소스를 수비게 이해할 수 있도록 형광펜에, 박스에, 밑줄에 정말 최선을 다한 편집이 눈에 띕니다.


두번째 챕터에서부터는 이제 본격적으로 웹사이트를 만들면서 공부가 시작됩니다.

우선 가볍게, 랜딩 페이지부터~!

랜딩 페이지는 한페이지로 스크롤이 되어 내용이 모두 표현되는 요즘 많이 사용하는 웹사이트입니다.

실습파일도 다운 받아서 따라할 수 있는데, 그 파일들을 어떻게 폴더로 정리가 되어있는지 폴더구성도 잘 표현되어있고요.

중간중간 좀더 심도있게 다룰 내용들은 칼럼으로 잘 설명이 되어있습니다.

개인적으로 이 칼럼 부분은 정말 실전에서 사수에게 배울 수 있는 꿀팁들이 많이 있습니다.


이 책에서 감동 받은 부분들은...

실제적으로 해보지 않으면 보기 어려운 다양한 요소들(폰트나 효과 등)을 일목요연하게 한눈에 보기 쉽게 잘 정리가 되어있다는 것입니다.

이 챕터에서는 폰트들을 어떻게 구성하면 좋은지 폰트들의 모습을 쫙~~~보여주는데 정말 감동적이었습니다.

HTMK 소스를 잘 이해할 수 있도록 현재 설명되고 있는 부분을 박스로 잘 표현되어있고요

중요한것은 형광펜으로도 잘 표시가 되어있어서 이 책을 볼때에는 그냥 따라하기만 하면됩니다~!


세번째 챕터에서 다루는 두번째 웹사이트는 블로그 사이트입니다.

지금 우리가 사용하는 네이버 블로그가 아니라 이렇게 네이버 블로그처럼 블로그 형태의 사이트를 만드는 것입니다.

단, 여기에서는 글쓰기 프로그램이 들어간게 아니라 정말 HTML로 꾸미는 거라서

글쓰기 버튼을 누르고 글이 씌여지는 것은 프로그래머가 작업을 해야겠죠~?

개인적으로 사용하는 블로그 사이트를 만들기에는 손색이 없습니다.

여러가지 블로그 형태들의 레이아웃도 칼럼으로 만나볼 수 있고요

한빛미디어 사이트에서 받아볼수 있는 샘플 페이지들의 데모 파일이 어떻게 구성되어있는지도 잘 표현되어있습니다.


네번째 챕터에서 다루는 세번째 사이트는 회사 사이트입니다.

저처럼 1인 기업이라해도 회사 사이트는 필요하죠~

웹에이전시에 맡기기에는 부담이 되니.. 이렇게 책을 보고 우리 회사 사이트를 만들어도 좋을것 같아요.

저는 개인적으로 1인기업을 운영하고 있어서인지 이 챕터도 정말 많이 도움이 됬습니다.

개인적인 페이지와는 달리 공식적인 기록과 신뢰성을 주는 페이지를 만들어야하는데

그런 페이지를 만드는데 꼭 필요한 기능들이 많이 소개되어있습니다.

사실.. 그래프 만드는건 저도 몰랐어요.

 저는 그냥 그래프를 이미지로 만들어서 넣었었다는... ^^;;

회사 페이지를 만드는게 아니라면 접하기 어려운 여러가지 데이터를 표현해야하는 소소한 기능들이 많이 나와있습니다.


다섯번째 챕터에서 다루는 네번째 사이트는 이벤트 사이트입니다.

이벤트 사이트는 그때그때 필요한 이슈가 있을때 만들 수 있는 사이트죠~

이벤트 사이트는 회사 사이트에도 같이 접목해서 사용하면 좋을것 같아요.

아무래도 이벤트 사이트이다 보니 화려한 기술들이 많이 선보여집니다~

포토샵을 사용하지 않고도 CSS를 활용해 이미지에 효과를 주는 아주 화려하고 다양한 방법들이 소개됩니다.

이미지를 자르거나 이미지에 블렌딩효과를 주거나 움직이는 애니메이션을 넣는 등

이벤트 사이트에 어울리는 HTML과 CSS가 많이 소개되어있습니다.

이 부분도 저는 사용해본적이 없는 것들도 소개되어있어서 재미있었습니다.


여섯번째 챕터에서는 마지막 사이트로 갤러리 형식의 페이지를 만드는 방법이 나옵니다.

이 부분도 제가 디자이너이기 때문에 포트폴리오를 표현할 때 사용할 수 있어 유용했습니다.

디자이너나 사진작가에게는 꼭 필요하고

개인 홈페이지에서도 사진 갤러리 하나쯤은 있어야하기에 모든 사이트에 유용한 기능입니다.

아무래도 갤러리 사이트이기 때문에 사진에 대한 효과가 가능한 CSS가 많이 소개되어있습니다.

그리고 따라할 수 있는 연습문제도 있으니 꼭 풀어보시면 좋을것 같습니다.


일곱번째 챕터에서는 HTML과 CSS를 더 잘 관리할 수 있는 방법들이 나옵니다.

저도 사용해보지 못한 툴들도 소개되어있어서 실제적으로 도움이 되는 챕터였습니다.

실습 위주였던 챕터들과는 달리 간략하게 다루고 있으니 꼭 보면 도움이 됩니다.


그리고 마지막 여덟번째 챕터에서는 페이지를 구성하여 사이트를 올릴 때 

접할 수 있는 문제들을 어떻게 해결할지, 무엇을 점검해야할지 체크리스트가 부록처럼 나와있습니다.


댓글(1) 먼댓글(0) 좋아요(2)
좋아요
북마크하기찜하기 thankstoThanksTo
 
 
뛰벅이 2022-11-10 15:01   좋아요 0 | 댓글달기 | URL
우와 23년차! 대단하십니다! 실제 돈받으면서 디자인한건 6년차 정도 되는데 멋지십니다! 워낙 이쪽 서적들이 다 뻔한 느낌이여서 구매를 할까 말까 하다가 23년차라는 글에 인사드리고 갑니다! 대선배님이시네요. 저는 중학교때 나모를 가지고 과제로 사이트를 만든적이 있었죠 ㅎㅎ 지금은 없어진 드림위즈였나 한미르였나 무료계정 받아서ㅎㅎ 갑자기 추억이 새록새록 나네요! 좋은 리뷰 잘 봤습니다! 고맙습니다!