-
-
완성된 웹사이트로 배우는 HTML&CSS 웹 디자인 - 5개 예제로 배우는 효율적인 웹사이트 제작 노하우
Mana 지음, 신은화 옮김 / 한빛미디어 / 2022년 5월
평점 :
처음 개발쪽에 관심을 보이고 접하게 되는 부분이 html & css입니다.
화면에 보여지는 html요소는 쉽게 개발적인 흥미를 보이고, 관심을 느끼게 됩니다.
그러면서 자연서럽게 css요소의 학습하게 됩니다.
html/css은 컴파일 하지 않고, 잘못되어도 오류가 발생하지 않기 때문에 조금더 편하게 개발이라는 분야에
접근할수 있고, 오래된 기술이기 때문에 시중에 책도 많이 있습니다.
이책에서는 기존의 html책들과 다른점이 무엇이고, 협업에서도 도움을 받을 수 있는 부분이 무엇이 있을까
하는 부분으로 책을 살펴보았습니다.
■ 책 구성
· 책의 부제는 "5개 예제로 배우는 효율적인 웹사이트 제작 노하우" 입니다.
이 부분이 이 책에서 내용을 쉽게 전달하기 위한 방법입니다.
웹사이트는 보통 많이 사용하는 패턴이 있습니다. 이러한 가장 많이 사용하는 구성을 Template이라고 하는데
이러한 구성중에 5가지를 학습하면서, 기본에 충실하고 다양한 활용법을 가질수 있습니다.
TemplateA의 요소를 TemplateC에서도 적용하여서 구성할수 있습니다.
- chapter2 : 랜딩 페이지
- chapter3 : 블로그 사이트
- chapter4 : 회사 사이트
- chapter5 : 이벤트 사이트
- chapter6 : 갤러리 사이트
■ 내용 살펴보기
· 개발과 관련된 기술적인 요소만 설명하는 것이 아니고, 기획자 입장에서 화면 구성등에 대해서 어떠한 부분을 고민해야 하는지 알려주고
기본적인 가이드를 제공합니다.
예) 2장에서 풀사이즈 배경으로 구성할때, 이미지 사이즈는 몇 px로 해야 할까요?
☞ 가로폭 1200~1300px 정도인 이미지를 준비해야 좋은 화질을 유지할수 있다고 설명합니다.
· 좋은 Tip들이 곳곳에 있습니다.
예) 이미지 파일 용량 압축하기
이미지 사이즈가 크다면 사이트 로딩 시간도 들어나고, 서버 비용도 자연스럽게 증가할수 밖에 없습니다.
☞ Shrink Me / Compressor.io 사이트가 있으며, 잘 활용할수 있게 알려줍니다.
예) 폰트에 대하여
폰트는 저작권이 있고, 사이트의 look&feel을 구성하는데 매우 중요한 역활을 합니다.
☞ 웹폰트, 구글 폰트, 어도비폰트등에 대한 설명과 한글폰트를 사용할때 주의점에 대해서 언급하고 설명해주는 부분도 별도 설명을 합니다.
· 반응형 사이트 구축시 기분 BreakPoint에 대해서
media쿼리 사용시, Device별로 화면 사이즈를 어떻게 구분하고 별도 처리 할지는 매우 중요한 부분입니다.
대표적으로 많이 사용하는 사이즈가 있지만, 태블릿 가로 모드의 경우에는 일반 PC웹화면과 비슷한 구조를 가질수도 있습니다.
☞ 책에서 이렇게 가이드가 나와서 좋았습니다.
보통 구분을 모바일 / 태블릿 / 테스크톱 3단계로 구분하는데, 여기서는 태블릿 가로모드를 별도 구성한 부분도 처음 구조를 구성하는 입장에서는 도움이 되는 가이드 입니다.
· 좋은 참고 url을 제공합니다.
☞ html 관련소스는 소스보기를 통해서 쉽게 참고 할수 있습니다. 이러한 요소가 곳곳에 참고url이 제공되어서, 이론적으로만 느낄수 없는 실제 사용하고 있는 사이트를 보면서 도움을 많이 받을수 있습니다.
· 가상요소 / 가상 클래스 / 커스텀 속성
::before / ::after / nth-child 등등
☞ 일반적인 화면 구성이 아닌, 디자인요소가 나왔을때 화면구성시 해당 요소를 알고 있으면 도움이 되는데, 실무에 필요한 부분이 잘 설명되어 있습니다.
· 화면 디자인 요구사항이 이런 사선모양이 디자인 되었다면, 어떤 css요소를 사용해야 할까요?
News의 녹색영역이 사선모양으로 구성되어 있습니다.
☞ clip-path를 이용한 구성 원리를 설명합니다.
· display속성
flex, grid, table등 화면 구성시 많은 부분을 커버하는 요소입니다.
해당 부분에 대해서 예제를 통해서 설명을 하는데, 상세한 설명하는 부분은 없어서 요 부분은 조금 아쉽습니다.
■ 대상 독자
· 이 책의 대상은 html / css를 조금 알고 계신데, 막상 활용을 하기에 어려우신 분들이 많은 도움을 받으실거 같습니다.
· 실무에서 도움되는 좋은 개념과 현실적인 설명이 있습니다.
예를 들어 화면에 동일한 Layout을 가진 화면도 다양한게 구성할수 있습니다.
그런 부분에서 조금더 활용도 높은 방식을 예제를 통해서 학습하실수 있습니다.
· 화면기획에 업무를 하시는 분들도 어떻게 하면 화면구성을 하는것이 좋을지 "여러 고려사항"을 알아보실수 있습니다.
· 책의 내용이 어떠한 요소를 기술적으로 설명하는것이 목적이 아닌, 화면구성을 위해서 무엇을 해야 할지를 기술적으로 알려주는것으로 생각이 되어서 조금더 현업에서 도움이 되는 내용이 많았고 설명도 친절하게 잘 구성되어 있습니다.
"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."