활용도 높고 실무에 자주 쓰이는 테크닉을 엄선해 한 권에 꽉 채웠다. 코드부터 배우고 웹사이트를 만들던 다른 책들과는 다르다. 이미 완성된 웹사이트를 먼저 살펴보고 각 디자인 요소에 적용된 HTML, CSS를 뜯어보며 익힌다. 프런트엔드에 입문했지만 막상 웹사이트를 만들려고 하면 손이 움직이지 않는 이들을 위해 너무 긴 코드나 복잡한 방법은 피했다. 이를 확인할 수 있는 연습 문제도 있어 직접 작성한 코드가 어떻게 반영되는지 확인 가능하다. 약간의 노력으로 극적인 효과를 내는 HTML, CSS 노하우가 궁금하다면 바로 이 책을 추천한다.
저자소개
저자
Mana
일본에서 2년간 그래픽 디자이너로 일한 뒤 캐나다 밴쿠버에 있는 웹 제작 학교를 졸업했다. 캐나다, 호주, 영국 회사에서 웹 디자이너로 근무했으며 현재는 웹 사이트 제작에 대해 강의하고 있다. 블로그 ‘Webクリエイターボックス(웹 크리에이터 박스)’는 2010년 일본 알파 블로거 어워드를 수상했다. 저서인 『러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문』 『완성된 웹사이트로 배우는 HTML&CSS 웹 디자인』으로 각각 2019년, 2021년 CPU 대상 서적 부문 대상을 수상했다.
이화여자대학교에서 컴퓨터학을 전공했으며 일본 미에대학교에서 교환학생으로 정보공학을 공부했다. LG CNS에서 15년째 근무하며 프로그램 개발, 기획, 사업 개발 등 다양한 업무를 거쳐 현재는 클라우드 빌링 업무를 담당하고 있다. 옮긴 책으로는 『가장 쉬운 네트워크 가상화 입문 책』 『인프라 디자인 패턴』 『완벽한 IT 인프라 구축을 위한 Docker』 『완성된 웹사이트로 배우는 HTML&CSS 웹 디자인』이 있다.
올해 초 프론트엔드 부트 캠프인 기업 강의를 들으면서, 프론트엔드의 필수 스택인 HTML, CSS 그리고 자바스크립트를 심도있게 배우게 되었다. 하지만 프론트엔드 특성상, 개발의 작업물을 포트폴리오로 구현할 수 있는 능력이 아주 중요하다고 느꼈고, 부트 캠프 이후에도 나만의 포트폴리오를 만들기 위해 시간을 쏟아야겠다고 생각했다.
올해 한빛미디어가 출간한 " 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인"은 프론트엔드를 공부하면서 부족하다고 생각되던 역량과 기술적인 부분들을 모두 채워줄 수 있는 책이었다. 우선 다섯 가지 예제의 프로젝트를 중심으로 나만의 결과물을 만들 수 있는 친절한 가이드인 동시에, 실무적인 응용 팁과 실전 지식들을 상당히 보완해줄 수 있다고 생각되었다.
이 책의 최대 장점은, 나만의 결과물을 혼자서도 문제 없이 만들어 낼 수 있다는 점이다. 다른 책들과는 달리 예제 하나하나 마다 설명이 정말 구체적이고 실무적인 팁들이 많아서 혼자 처음 입문하는 분들도 충분히 소화할 수 있다고 느껴졌다. 또한 다양한 예제들을 다루면서, 이를 나만의 것으로 응용하여 포트폴리오에 녹여낼 수 있는 부분이 많다고 느꼈다. 예전의 나처럼 포트폴리오에 어떤 프로젝트를 넣을지 고민되고 막막하신 분들에게 도움이 될 수 있고 특히 아직은 팀 프로젝트보다 혼자서 하는 프로젝트에 집중을 하고 싶은 분들에게 좋은 가이드가 될 것이라고 느꼈다.
2009년쯤이었던 것으로 기억합니다. 다른 팀에서 킥오프 워크샵까지 갔다오고나서 5개월 간이나 지연시키던 프로젝트를 이어 받았습니다. 프로젝트는 셋탑박스에 셋탑박스용 임베디드 브라우저를 올리고 브라우저 위에 웹 사양으로 어플리케이션을 올리는 것이었습니다. 다시 말해서 HTML과 CSS 그리고 자바스크립트로 셋탑박스 UI를 만드는 프로젝트였던 거죠.
도서관에가서 모든 자바스크립트 책과 HTML, CSS책을 열어보았습니다. 아직 새로운 HTML, CSS 그리고 Javascript 를 지원하지 않는 셋탑박스용 브라우저이지만, 동작하는 기능들을 하나씩 점검해야 했습니다. 필요한 개발 도구들도 직접 만들어야 했는데요. 예를 들어서, 작업한 코드를 셋탑박스에 올려서 결과를 보는 시간이 오래 걸렸기 때문에 ( 보려면 셋탑을 껐다 켜야 했습니다. ) 브라우저 위에 자바스크립트로 가상의 셋탑박스를 만들고, 제가 구현할 자바스크립트 인터페이스를 더미로 만들어서 셋탑화면을 에뮬레이트 했습니다. 더글라스 크록포드의 jsmin을 찾아서 적용해보기도 하고, jquery의 애니메이션 기능이 셋탑 브라우저에서는 제대로 동작하지 않아서, 애니메이션 기능을 새로 만들기도 했습니다.
그 모든 작업이 가능했던건, 결국 도서관에가서 모든 HTML, CSS, Javascript 책을 들춰봤기 때문이라는 교훈을 얻게 되었는데요. 그 이후로 가끔 HTML, CSS, JS에 대한 책을 기회가 될때마다 보곤 합니다. 특히 HTML, CSS, JS는 스펙이 계속해서 바뀌고 있기 때문에, 어느 순간 없어서 아쉬웠던 기능들이 새로 생긴걸 알게 되는 경우가 있는데요. 그러면 정말 쾌감을 느끼게 됩니다.
이 책을 읽는 것도 그런 쾌감을 얻기 위함이었습니다. 프론트엔드 개발자로 일하면서도 의외로 놓치고 있는 CSS, HTML 기능들이 있을 수 있거든요. 그리고 꽤 재미있게 읽을 수 있었네요.
HTML, CSS 책은 크게 두 부류로 나누게 되는 것 같습니다. 스펙을 충실하게 설명하는 쪽과 예제를 다루는 쪽입니다. 이 책은 후자에 속하는 책인데요. 현업에서 꽤 많이 쓰게 되는 형태의 토이 프로젝트를 5개 정도 설명하고 있습니다. 책을 보면서, 아차차 이런 기능이 있었나 싶었던 경우가 많았습니다. 게다가 책의 구성이 너무 깔끔하고, 필요한 이야기만 나오고있어서, 놀랐습니다.
게다가 snap, placeholder, grid, animation 기능들은 제가 주로 사용하던 방식과 좀 다른 방식으로 설명하고 있어서, 내일 부터 차근차근 테스트 해보고 제가 작업하는 데 적용해볼 생각입니다.
처음 프론트엔드 분야를 공부하시는 분이라면, 조금 어려울 수도 있을지 모르겠지만, 조금이라도 공부해본 경험이 있으신 분이라면, 정말 필요한 예제와 설명에 감동받으실 듯합니다.
해당 책의 경우 기존의 책과는 다르게, 코드를 보면서 웹사이트를 따라 만드는 방식이 아니라 이미 완성된 웹사이트를 기반으로 어떤 테크닉을 사용한 것인지 배워나가는 책입니다.
HTML 쪽은 프로그래밍을 처음 공부할때 배웠던 내용이라 가벼운 문법 지식은 알고있고, 활용 할 줄은 모르는 상태였습니다. 실제 그러한 상태로 책을 읽으니 용어, 문법 등에 대한 부분에서는 읽는 부분에 어려움이 있어서 내용을 좀 찾아볼 필요는 있었습니다. 하지만, 만일 문법을 알고있는 상황이라면 완성된 웹사이트를 기반으로 보는게 되게 신선했고, 도움이 될 것 같았고 중간 중간 예제가 많아서 도움이 많이 되는 것 같습니다.
“완성된 웹사이트로 배우는 HTML&CSS 웹 디자인”은 책 이름 처럼 완성된 웹사이트로 HTML과 CSS를 배울 수 있는 책입니다. 그동안 홈페이지를 여러 개 제작한 경험이 있지만 레이아웃이 동일한 사이트를 이미지와 텍스트만 바꾸는 형태여서 이 책을 통하여 다양한 홈페이지 제작 기술을 습득하고자 하였습니다.
랜딩페이지, 블로그 사이트, 회사 사이트, 이벤트 사이트, 갤러리 사이트로 이어지는 구성인데 점진적으로 기술을 익힐 수 있도록 저자께서 많이 신경쓰셨다는 것을 알 수 있었습니다. 정말 초보자도 이해하기 쉽게 이미지와 코드 설명이 친절하며, 내용 하나하나가 버릴 것이 없을 정도로 저자의 웹 제작 노하우를 아낌없이 설명해주십니다.
평소 헷갈렸던 가상 요소에 대해서도 정말 이해하기 쉽게 설명되어 있고, 스크롤에 맞춰 따라오는 기술이라든지 애니메이션 구현 방법은 실무에서 바로 적용해 사용해볼 정도로 활용도가 높은 내용들이 많았습니다.
HyperText Markup Language의 약어인 HTML은 프로그래밍이라고 하기엔 어딘가 부족한 듯한 느낌이 들지만, 결코 무시할 수 없는 영역에 들어와 있는 것도 사실이다. 그냥 그런 HTML로 페이지를 꾸미던 시절의 실력만 가지고 웹 페이지를 만든다면 별 것 아닐 수 있지만, 현재 어디에서나 쉽게 볼 수 있는 웹페이지를 하나 들이밀면서 그것을 구현해 보라고 하면 그것을 제대로 구현할 수 있는 사람이 몇이나 될까 하는 생각이다.(나를 포함하여)
물론 이것이 단지 HTML 만으로는 어려울 것이고, CSS와 JS 등의 기술을 활용하여 표현했겠지만서도 애초에 완성된 페이지인 HTML을 어떠한 제약조건이 없어도 만들기는 쉽지 않다. 그렇기에 이러한 영역에서 책이 필요하지만 찾아보려면 생각보다 책이 많이 나와있지 않은 것도 사실이다.
일반 개발자들도 쉽게 보지만 결코 쉽지 않은 이 영역에 대해서 책을 볼 일이 있어서 이 책을 리뷰해 본다.
> 책에 대한 간단한 정보
책의 앞 표지
이 책은 상당히 귀엽다. 고양이의 뒷모습과 커피와 디저트를 곁들인 랩탑이라니. 거기에 산세베리아로 추정되는 깔끔한 책상은 많은 개발자들이 꿈꾸는 휴가지에서의 책상 레이아웃일 것이다.
그렇게 설레는 마음과 가벼운 마음을 가지고 이 책을 즐길 수 있도록 표지를 그렇게 보여준 것이 아닌가 생각이 된다.
> 인상깊은 부분들
이 책의 주제를 한 눈에 볼 수 있는 페이지
이 책의 챕터는 총 8개로 되어있다. 그 중에서 1, 7, 8 챕터 세 개를 제외하고 나머지 챕터를 할애하여 각기 다른 주제로 웹 페이지를 구성하는 방법을 배워본다. 각 내용은 다음과 같다.
- 랜딩 페이지
- 블로그 사이트
- 회사 사이트
- 갤러리 사이트
- 이벤트 사이트
누구나 궁금해 할 수 밖에 없는 영역들이기에 너무 괜찮다고 생각이 들었다.
네이밍을 도와주는 영역
네이밍을 도와주는 페이지도 별도로 수록하였다.
특별히 사이트들을 돌아다니면서 각 페이지 내의 클래스 이름에서 사용되는 축약어를 제대로 잘 몰랐던 부분도 있었기에 이런 부분이 유용하다고 생각하였다. 다른 페이지에는 더 많은 클래스에서 사용되는 이름을 수록하였기에 궁금하다면 꼭 책을 참고하시길 바란다.
웹 페이지 구성을 위한 폴더 구조의 예
각 챕터의 앞에는 이렇게 폴더 구조를 보여주고 있다. 물론 복잡한 구조가 아니기에 그렇게 큰 도움이 될까 싶은 생각도 들지만, 이런 기본적인 영역에서 조차도 어려움을 느끼는 사람들이 많기 때문에 소소한 배려라고 생각이 든다.
체크리스트
웹사이트 구현시 문제가 발생한다면 체크할 수 있는 체크리스트를 제공한다.
웹사이트 구현은 일반적인 프로그래밍과는 조금은 달라서 그냥 컴파일하고 빌드 실패시 에러 내용 확인하고 디버깅 및 코드수정을 하는 것과는 달리, 에러내용도 제대로 나오지 않는 경우도 많고, 에러는 발생하지는 않았으나 화면에 원하는대로 표현이 제대로 안되는 경우도 많다. 그래서 이러한 체크리스트가 매우 도움이 된다고 생각이든다. 이 또한 저자의 작지만 작지 않은 배려라고 생각이 든다.
뒷표지
앞 표지와 다를바 없이 뒷 표지도 상당히 깔끔하다.
대상 독자 및 만들게 되는 사이트의 주제만 딱 표현하였다. 이것만으로 충분하다고 생각이 들었다.
> 괜찮은 부분
1. 매력적인 웹사이트에서 발견할 수 있는 요소들로 내용을 구성되어 있다.
이론으로만 한스텝 한스텝 밟아나가면서 기초부터 배우는 구성이 많다. 하지만, 이 책은 랜딩 페이지, 블로그 사이트, 회사 사이트, 갤러리 사이트, 이벤트 사이트로 주제를 잡고 만들 수 있는 방법을 소개하는 방식을 취하고 있다. 그래서 평소에 자주 접했지만 이것은 어떻게 만들 수 있는지 어려웠던 부분에 대해서 궁금증을 해소하면서 즐거움을 느낄 수 있도록 했다고 생각이 든다.
2. 풀컬러이지만 산만하지 않게 보이도록 하였다.
웹 페이지에 대한 내용이기에 그 특성상 풀컬러로 책이 구성되어 있다. 그래서 정신없어 보일 수 있다고 생각했다. 하지만 색을 과하게 사용하지 않음으로써 집중이 필요한 부분에 강조되어 있다고 생각한다. 코드의 강조 부분, 적용된 예제의 변경된 부분을 강조하였으며, 중요하다 싶은 문장은 형광펜으로 강조하였다. 그리고 중요한 속성에 대해서는 큰 글자로 각인시켰다고 생각한다.
3. 유용한 개발 팁, 유용한 사이트를 상당히 수록하였다.
웹 페이지 개발을 처음하는 관점에서 어려움을 겪을 수 있는 개발 순서와, 디버깅 방법, 자주 사용하는 클래스명, 유용한 글꼴 다운로드 사이트, 동영상 수집 사이트를 제공하였다. 특히 디자인적 관점에서 어떤 상황에서는 어떤 레이아웃이 좋은지, css 작성을 좀 더 쉽게 도와주는 사이트, 심지어 질문하는 방법까지… 이 밖에도 여러 개발 팁을 수록하여 실무에서 도움이 많이 된다.
> 아쉬운 부분
1. 이 책은 HTML보다는 CSS에 대해 집중적으로 알려주는 책에 가깝다.
HTML과 CSS를 각각 잘 활용하여 웹 페이지를 만드는 방법을 배울 수 있다고 생각하고 접근한다면, 아쉬울 수 있다. 여기에서는 대부분 CSS의 활용방법을 이야기 하고 있기 때문이다. 하지만 CSS로도 이렇게 할 수 있는게 많다는 점을 느낀다면 살짝 생각이 달라질지는 모르지만, 어쨌든 비중은 CSS가 압도적으로 높다는 점이 특징이다.(HTML을 깊게 배우고 싶었던 사람의 입장에서는 아쉬울 수 있다.)
2. 잘 만든 사이트의 예시를 모아서 보여주었다면 좋았을 것 같다.
학습하는 중간 중간 많은 페이지들이 예시로 나온다. 그것들을 참고하면서 어떤 방식으로 만드는 것이 좋을지 가시적인 목표를 세울 수 있다고 생각이 든다. 하지만 이것이 모여있지는 않다보니 많은 경험이 없는 입장에서는 막막하기도 하다. 현재 다섯 개의 카테고리로 나누어서 챕터가 구성된만큼 책에서 다루는 내용 외에도 다양한 예시를 각 챕터 앞에 보여주었다면 개인의 목표를 세우는 데 좀 더 유용하게 활용할 수 있을 것 같다.
> 추천 독자
- HTML, CSS의 문법을 공부했기 때문에 제대로 된 페이지를 만들고자 하는 사람
- 일반 백엔드 개발까지는 알고 있으나, 웹페이지를 만들지 못해서 표현을 하고싶은데 제대로 하지 못하고 있다고 느끼는 사람
한참 구글 블로그의 THML과 CSS를 수정하며 블로그를 꾸미고 있던 차에 이 책을 받게 되었다. 한빛미디어의 따끈따끈한 5월 신간, '완성된 웹사이트로 배우는 HTML&CSS 웹디자인'이다. 둥글게 몸을 만 고양이 한 마리와 시크한 선인장이 덩그러니 놓인 심플하면서 예쁜 표지의 책이다. HTML&CSS를 공부하다가 보면, 내가 작업한 것의 결과물이 어떻게 나오는지 잘 몰라서 감이 잘 오지 않을 때도 있고, 완성된 부분의 어느 부분이 어떤 스크립트가 쓰였는지 찾기 어려워 수정이 어려울 때가 있다. 이 책은 완성된 웹사이트를 예제로 보면서 배울 수 있기 때문에 그런 면에서 좀 더 내가 원하는 걸 직관적으로 찾아서 볼 수 있다.
구상하고 있는 웹 사이트를 어떻게 구현해야 할지 구체적인 부분을 몰랐던 사람, 이 웹사이트의 이런 표현은 어떻게 하는 건지 구글링을 하고 소스 보기를 해보면서 남의 페이지를 탐닉하던 사람, HTML, CSS의 기초 학습은 마쳤지만 응용이 막막했던 사람, 애니메이션 등의 움직임이 있는 멋진 웹페이지를 만들고 싶은 사람, 같은 구현을 하더라도 코드를 효율적으로 작성하고 싶은 사람을 위해 이 책이 만들어졌다.
이미 HTML과 CSS를 배운 사람을 대상으로 하지만, 책은 친절하게 웹 페이지 구조부터 알려준다. 웹사이트를 만드는 순서는 어떻게 되는지부터 기초를 다시 한번 짚고 넘어간다. 솔직히 말해서 기초 교육이 안된 생초짜도 책만 따라 하면 흉내는 낼 수 있을 것 같은 수준으로 가르쳐준다.
구현을 넘어서 디자인을 어떻게 뽑으면 더 예쁘게 보이는지, 구글 블로그를 꾸밀 때 자주 사용되는 이미 제작된 웹사이트를 커스터마이징을 할 때는 어떻게 하는지 등을 책에서 배울 수 있다.
모바일 환경에서 반드시 필요한 '다크 모드'를 대응하는 방법에 대해서도 다루고 있다. 블로그 사이트를 예제로 레이아웃을 배울 수 있고 반응형 웹디자인을 하는 방법에 대해서도 다룬다. 이론으로만 배우던 HTML의 요소들을 적재적소에 어떻게 사용하는지를 이 책을 통해 배울 수 있다. 웹디자이너로서, 웹 개발자로써 일하게 되면 주로 사용할 다양한 예제들, 랜딩 페이지, 블로그 사이트, 회사 사이트, 이벤트 사이트, 갤러리 사이트 등을 예제와 함께 배울 수 있으며 관리법과 심지어 사이트 올리는 방법까지도 다룬다. 솔직히 책 분량에 비해서 책 내용이 과하게 친절하기는 하다. 그래도 책만 잘 따라 한다면, HTML과 CSS를 겉핥기로 배운 사람이라도 웹페이지 커스터마이징을 할 수 있을 정도로 만들어 주기 때문에 한 권쯤 가지고 있으면 정말 유용할 것 같다. HTML 사전류의 서적도 좋지만 이렇게 현업에서 바로 써먹을 수 있는 내용들을 충실하게 다룬 책이 소장 가치는 더 높다고 생각된다.
프로그래밍 언어를 공부하는 방법은 여러 가지가 있을 텐데, 효과적이었던 방식은 개별 기능에 대한 작은 코드를 작성해보고 그 뒤 실제 환경과 유사한 미니 프로젝트를 개발해보는 것이다. 기본이 되는 내용은 공식 홈페이지나 별도 서적을 통해 습득한 뒤 바로 직접 개발을 하는 것이 가장 실용적이었다. 이러한 관점에서 본다면 이 책은 기능에 대한 코드와 미니프로젝트 중간쯤이라 말할 수 있으며 개발자가 빠르게 숙련될 수 있도록 기초 내용부터 설명하고 코드를 작성할 수 있게 도움을 준다.
2~3장까지 읽었을 때 일본에서 만들어진 IT 책들이 생각이 났다. 과하다 싶을 정도로 쉽고 친절하게 설명하는 책들을 많이 봤는데 이 책 또한 비슷한 인상을 받았다. 마지막 장까지 다 읽었을 때에는 숙련된 개발자가 옆에서 멘토링을 해주고 있다는 느낌을 받았다. 초보자가 미니 프로젝트를 상상하기 어려울 테니 이런저런 실용적인 상황을 미리 선정해서 기술 소개부터 어떻게 구현하는지 핵심을 알려주고 이를 고칠 수 있게 연습문제를 주어 자신의 코드가 될 수 있게 해 준다. 실제 사례들을 기반으로 설명하기 때문에 초보뿐 아니라 중급에 올라서는 프론트엔드 개발자들에게도 추천할만한 책이다.
2장부터는 아래와 같은 웹사이트 사례를 기반으로 다양한 기술들을 배울 수 있다. 독자가 직접 코드를 다룰 수 있게 각 장에는 연습 문제 또는 커스터마이징 가이드를 제공한다.
- 랜딩페이지로 배우는 반응형 웹 디자인과 글꼴
- 블로그 사이트로 배우는 다단 레이아웃과 꾸미는 방법
- 회사 사이트로 배우는 표, 그래프, 폼, 자바스크립트
- 이벤트 사이트로 배우는 특정 페이지 만드는 법과 애니메이션
- 갤러리 사이트로 배우는 이미지와 동영상을 사용하는 방법
백엔드 엔지니어들도 상황에 따라 프론트엔드 영역을 다뤄야 할 일이 있다. 어드민 페이지를 직접 만들어야 한다던가 아님 간단한 디자인이 거의 배제된 단일 페이지를 제공해야 할 수 있기 때문이다. 트렌드를 모두 따라가긴 어렵지만 프론트엔드 일을 종종 다루고 있다. 이러한 경험 바탕으로도 봐도 주옥같은 팁들이 수록되어 있다. 백엔드 엔지니어 입장에서 CSS는 잘 기억도 안나고 까다롭고 디버깅하기 어렵다. 하지만 이 책에서는 CSS에 대한 도움을 받을 수 있는 홈페이지나 오픈소스들을 알려준다.
숙련된 프론트엔드 엔지니어가 보면 대부분 아는 내용일 가능성이 높을 것이다. 웹 프론트엔드 영역은 굉장히 빠르게 변화하기 때문에 2~3년 안에 이 책의 일부는 오래된 또는 잘 사용하지 않는 내용이 될 수도 있다. 하지만 웹 개발에 대해 광범위하게 많은 키워드를 소개하고 설명하기 때문에 입문자용으로는 시간이 좀 흘러도 손색이 없을 듯하다.
완성된 웹사이트로 배우는 HTML&CSS 웹 디자인. 이 책은 제목대로 이미 완성된 웹사이트의 코드를 분석하면서 공부를 하는 책입니다. 인터넷에서 자주 만날 수 있는 5가지 스타일의 웹사이트를 집중 분석합니다. 랜딩 페이지, 블로그, 회사 사이트, 이벤트 사이트, 갤러리 사이트가 그것입니다. 이 책을 구매하기전 나에게 필요한 책인지는 목차만 봐도 알 수 있습니다.
이 책은 HTML, CSS의 기초를 아주 간략하게 설명하고 바로 웹사이트에서 이러한 요소들이 어떻게 사용되는지 확인합니다. HTML, CSS 기초를 공부했는데 어떻게 써야하는지 잘 모르겠거나 자주 사용하는 필수 기능을 구현하는 노하우가 궁금한 사람에게 어울리는 책입니다. 이 책을 꼼꼼하게 읽어보면 웹사이트를 만들때 자주 사용하는 거의 모든 기능을 자세하게 배울 수 있습니다. 개인적으로 인상적인 부분은 아래와 같습니다.
레이아웃을 다루는 법, 풀사이즈 배경이미지, 다양한 글꼴, 아이콘 폰트, 반응형 웹 디자인, 특정 위치로 이동(스크롤)하기, 버튼, 인용문, 테두리, 네비게이션, 표, 폼 꾸미기, 그래프 그리기, 표로 데이터 표시하기, 블렌드 모드, 커스텀 속성(변수), 애니메이션, 그라데이션, 배경에 동영상 넣기, 이미지 필터 적용, 라이트 박스 출력, 다크모드 등 정말 다양한 CSS 효과를 책에서 만날 수 있습니다.
이 책에서 사용하는 예제코드는 개인용은 물론 상업용으로도 자유롭게 사용 가능합니다. 예제 퀄리티가 나쁘지 않기 때문에 간단한 웹사이트같은 경우에는 이 코드를 베이스로 조금 수정해서 개발하는 것도 괜찮을 것 같습니다.
챕터7에서는 좀 더 효과적으로 HTML, CSS 사용하는 방법을 배웁니다. 에밋으로 빠르게 코딩하기, CSS를 직관적으로 만들 수 있는 Sass 등을 설명합니다. Sass가 궁금한 분이라면 좋은 정보를 얻을 수 있을 것 같습니다. 결국 개발은 혼자 스스로 하는 것입니다. 아무리 공부를 해도 문제가 발생하기 마련인데 그 해결 방법은 챕터8에서 볼 수 있습니다.
완성된 웹사이트로 배우는 HTML&CSS 웹 디자인. 이론 중심으로 거의 모든 기능을 처음부터 설명하는 책은 이미 많이 있고 이론 자체는 간단하기 때문에 쉽게 배울 수 있습니다. HTML, CSS 특히 CSS 경우 이런 내용을 바탕으로 어떻게 사용하는지가 참 중요합니다. 그래서 실력향상에는 이 책처럼 쓸만한 사이트를 분석하며 배우는 것이 도움이 된다 생각합니다. 어떤 내용이 책에 있었는지 어렴풋이 기억해두고 다음에 개발할 때 참고하면 될 것 같습니다. 괜찮은 책이네요.
HTML/CSS 기본 사용법을 알고 있음에도 웹사이트를 만드는 것이 막연하기만 한 이들을 위한 책이 나왔다.
바로 <완성된 웹사이트로 배우는 HTML&CSS 웹디자인> 책이다.
이 책을 읽으면 큰 도움이 될 대상 독자는 다음과 같다.
- HTML, CSS 기초 학습을 마친 사람
- 기본에서 한 단계 더 나아간 웹사이트를 제작하고 싶은 사람
- 애니메이션 등 움직임이 있는 웹사이트를 만들고 싶은 사람
- 효율적인 코드 작성법을 알고 싶은 사람
- 독학 시 마주하는 문제의 해결법을 배우고 싶은 사람 접기
책의 저자인 Mana는 일본에서 2년간 그래픽 디자이너로 일한 뒤, 캐나다, 호주, 영국 회사에서 웹 디자이너로 근무했으며 현재는 웹사이트 제작을 강의하고 있다. 일본 알파 블로거 어워드를 수상했으며. 저서 <러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문>으로 2019년 CPU 대상 서적 부문 대상을 수상한 이력이 있다.
이 책은 총 6장인데, 첫번째장은 웹개발에 필요한 기본 내용을 다룬다. 그 다음으로는 5개 예제를 통해 다양한 케이스를 익히게 된다.
1. 랜딩 페이지반응형 웹 페이지를 만들기 위한 세부 설정과 폰트 조합을 알아보고 알아두면 편리한 아이콘 폰트도 배운다.
2. 블로그 사이트점선, 곡선, 인덱스나 리스트, 헤더, 푸터 등 세부적으로 꾸미는 방법을 소개한다.
3. 회사 사이트자바스크립트 라이브러리를 활용해 그래프, 표 등 회사 사이트에서 자주 사용하는 데이터 정리 방법을 배운다.
4. 이벤트 사이트애니메이션, 블렌드 모드 등 사용자의 마음을 움직일 수 있는 표현 방법과 커스텀 변수 등 여러 사이트에서 응용 가능한 웹 디자인을 배운다.
5. 갤러리 사이트동영상, 다단 레이아웃, CSS 필터, 확대, 라이트 박스 등 자주 사용하는 여러 웹 기술을 배운다.
웹디자인 인플루언서인 저자 Mana가 알려주는 웹사이트 개발의 모든 것을 이 책을 통해 바로 당장 적용해볼 수 있다. 이 책의 특징은 클론코딩을 차용했다는 것이다. 클론 코딩은 이미 만들어진 페이지를 분석하면서 똑같이 따라 만들어 보는 방식이다. 각 디자인 요소에 적용된 HTML, CSS를 뜯어보며 익힌다. 프런트엔드에 입문했지만 막상 웹사이트를 만들려고 하면 손이 움직이지 않는 이들을 위해 너무 긴 코드나 복잡한 방법은 피했다. 이를 확인할 수 있는 연습 문제도 있어 직접 작성한 코드가 어떻게 반영되는지 확인 가능하다.
이 책을 읽고 난 다음에는 주위 어떠한 요소나 여백과 상관없이, 심지어는 겹쳐 보이게 요소를 배치하고 플렉스 박스를 활용한 반응형 웹 디자인으로 다양한 화면에 대응 가능하며 복사 가능한 예쁜 폰트의 텍스트, 확대해도 깨지지 않는 아이콘을 제공하는 웹사이트를 만들 수 있다. 더 나아가 자바스크립트 라이브러리로 그래프를 그리는 방법, 그림을 직접 편집하지 않고도 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 카테고리별 분류 후 상황별 케이스를 체크할 수 있도록 카테고리로 분류하여 체크할 수 있도록 체크 리스트가 있어 기본적인 실수에 대한 사항은 대게 처리할 수 있지 않을까라는 생각이 들었습니다. 또한 자주 발생하는 오류 메시지와 웹 사이트에 질문하는 방법도 함께 설명하고 있습니다.
마치면서
제목처럼 기초적인 내용을 원리 하나하나 설명하는 것 보다는 실제로 바로 사용할 수 있도록 핵심만 콕콕 잡았다는 것이 많이 느껴졌습니다.
특히 중요한 부분은 하이라이트가 되어있어 핵심 포인트를 잡기 좋았으며, 내용 외적으로도도 여러 가지 팁을 알려주는 부분들이 마치 "이것도 알면 더 좋을 거야 알아둬!!" 하는 것 같았습니다. 그리고 해당 팁들이 매우 중요하거나 꼭 알아두면 좋을 부분들로 구성되어있어 하나하나 신경을 많이 썼다는 것이 느껴졌습니다.
본 도서는 초반에 나오지만 실전 경험을 목표로 하는 도서이기에 기초 내용이 많지 않아 개발 관련 지식이 전무하신 분이 읽기에는 조금 어려울 수 있습니다. 그렇지만 어느정도 경험이 있다면 실제로 사용할만한 핵심 요소들로 콕콕 모아두었기에 빠르게 실력을 향상하는데 많은 도움이 될 것이라 생각이 됩니다.
평소에 백엔드나 프론트엔드 프레임워크에 치중된 웹개발 도서만 보다가, 이런 순수한 웹 디자인 도서를 읽어보니 정말 좋았습니다. 약간의 힐링 시간을 가진 듯한 느낌이었는데요. 하지만 그 내용 자체는, 오히려 웹 개발자들도 꼭 한번쯤 읽어봐야 할 것만 같았습니다.
웹 개발 직무가 프론트엔드/백엔드로 나뉘어져 있다보니, 아무래도 한 쪽을 선택해서 공부해야 할 것만 같은 마음이 들게 됩니다. 또, 실무에서 사용하는 여러 라이브러리나 프레임워크를 빨리 공부해서 따라가야 할 것만 같은 조급함이 듭니다. 현직 프론트엔드 개발자 분들 사이에선, 근래에 프론트엔드 개발로 지원하는 분들 중, HTML/CSS 기본기가 너무 부족한 상태로 프레임워크만 공부한 채로 지원하는 경우가 종종 있다고 한탄하는 목소리가 나오기도 합니다.
물론 프론트엔드 직무의 개발자가 직접 HTML/CSS를 하나하나 코딩하거나, 웹 디자인을 하는 경우는 많지 않을지도 모릅니다. 하지만 적어도 그 기본적인 내용 정도는 숙달한 필요가 분명히 있습니다. 존재조차 모르는 것과, 잘 모르지만 최소한의 존재를 아는 것은 차이가 무척 크니까요.
간단하게 웹 디자인, 개발과 개발자도구를 설명한 이후 진행되는 '랜딩 페이지로 배우는 반응형 웹 디자인과 글꼴' 파트만 읽어봐도, 제가 생각보다 더 많은 것들을 모르고 있었구나 하는 깨달음을 얻을 수 있었습니다.
웹에 사용할 이미지를 간편히 압축하여 Export 할 수 있는 웹 사이트부터, CSS 스크롤 스냅의 심화 사용법까지, 그냥 쭉 읽어보고 따라해보기만 해도 새롭게 배우는 것들이 많았습니다. 웹 디자인의 참고 모델들을 볼 수 있는 여러 사이트들 또한 덤으로 얻었습니다.
평소에 대충 사용법을 보고 뜨문뜨문 사용하던 미디어쿼리도 좀 더 확실한 사용법을 익힐 수 있었고, CSS를 사용해서 메뉴바, 네비게이션 바와 같은 기본적인 메뉴들을 더 심미적으로 만드는 방법 또한 배울 수 있었습니다. 사실 평소에 부트스트랩 하나면 대충 다 만들어진다는 생각을 가지고, 디자인에 대한 고민을 해본 적이 없었던 것 같습니다. 그러다보니, 안 그래도 부족한 디자인 감각은 더욱 열악해져왔고, 여기에 더해, CSS 기본기까지 부족하다보니, 항상 프로토타입에 그치는 웹 사이트만 만들 수 있었던 것 같기도 합니다.
후반부에서는 그래프 그리기, 표 그리기, JS를 이용한 다양한 애니메이션 효과 넣기 등을 실습할 수 있는 부분 또한 있는데요. 평소에 JS 애니메이션을 그냥 코드만 냅다 긁어와서 구현했던 분들이라면, 해당 부분을 심도깊게 읽어보시는 것이 많은 도움이 되실 것 같습니다.
React, Vue.JS, Svelte 등 다양한 프론트엔드 프레임워크, 라이브러리 들이 나오다보니, 너도 나도 빨리 최신 기술을 익혀야만 할 것 같은 기분입니다. 하지만 이러한 프론트엔드 프레임워크와 라이브러리를 익힌다고, 멋진 웹사이트가 만들어지는 것이 아닙니다.
특히 1인 개발을 하거나, 여러 사이드 프로젝트에 관심이 있는 분들이라면, 목업 완성 후 좌절에 빠지지 않기 위해서라도, 이러한 웹 디자인 책을 한권 쯤은 꼭 익혀보기를 권장 드립니다. (사실 저에게 하는 말입니다.)
모쪼록 웹 개발에 관심이 있는, 그리고 이미 웹 개발을 하고 있지만 디자인적인 측면에서 부족함을 느끼는 모든 분들께 추천 드립니다!
본 리뷰는 한빛미디어의 도서 서평단 <나는 리뷰어다 2022> 프로그램의 일환으로, 무상으로 도서를 증정 받고 작성된 리뷰임을 고지합니다.
웹 기반의 비디오 스트리밍 기능을 개발하는 일을 하고 있습니다. 원래 임베디드 소프트웨어 쪽 업무를 해오던 터라, 웹 애플리케이션 개발에서 백엔드라 불리는 영역은 조금은 익숙한 분야이긴 합니다만 프런트엔드 쪽은 생소하더군요. 웹 개발 쪽은 온라인 강의가 잘 되어 있습니다. 부족하다고 생각하는 부분인 CSS 관련 강의를 틈틈이 듣고 있는 와중에 이 책을 만나게 되었습니다. 기본 개념만으로는 한계가 있는 웹 페이지 개발 과정에 이 책은 목마름을 시원하게 가시게 해주는 단비 같은 책입니다.
글쓴이인 Mana 님은 그래픽 디자이너로 일하다가 웹 제작 학교를 거쳐 웹 디자이너로 일했고, 현재는 웹 사이트 제작을 강의하고 있습니다. 그래서인지 이 책의 표지를 비롯해 내용이, 디자이너가 쓴 글이라는 느낌을 물씬 풍기는 컬러풀한 사진과 도안이 많이 들어가 있습니다. 기술 서적임에도 불구하고 머리에 중압감을 느끼지 않고 읽을 수 있었습니다.
이 책은 웹페이지 개발을 처음 접해보는 사람보다는 기본적인 웹페이지를 작성해 본 사람에게 큰 도움을 줄 것입니다. 웹페이지를 아름답고 매력적이고 개성 있게 만들기 위한 테크닉과 팁이 많이 담겨 있습니다. 또한 페이지를 제작한 후에는 이를 응용해서 더 발전한 페이지를 만들어 볼 수 있는 과제도 제시하고 있습니다.
랜딩 페이지, 블로그 사이트, 회사 사이트, 이벤트 사이트, 갤러리 사이트, 이렇게 5가지의 사이트를 이 책을 통해서 제작해 볼 수 있습니다. 제작하는 각 페이지마다 중요한 웹 페이지 개발 테크닉을 다루고 있습니다. 반응형 웹, 글꼴, 레이아웃, 표 및 폼, 애니메이션, 이미지와 동영상, 자바스크립트 등, 효율적이고, 효과적이며, 눈을 뗄 수 없게 하는 매력적인 웹 페이지를 제작할 수 있는 기술을 배울 수 있습니다.
쉬운 설명과 한눈에 들어오는 도안이 풍부해서 이해가 쉽습니다. 무엇보다 눈이 즐거운 책입니다. 코드에 직접적으로 주석을 연결하고 표시해서 해설 내용을 빠르게 파악할 수 있습니다. 또한 코드를 적용했을 때의 실제 표시되는 웹페이지의 결과도 사진으로 들어있어 정확하게 내용을 이해할 수 있습니다.
현재 웹페이지의 디자인 개선과 독자의 디자인 감각을 높이는 데 도 도움을 줍니다. 그러데이션 배색 아이디어와 같이, 어떤 디자인을 적용하면 좋다는 내용도 제안해 줍니다. 미적 감각을 보완해 줄 수 있는 UI 디자인을 참조할 수 있는 사이트도 소개합니다. 5가지 페이지를 작성하면서 각 테마가 주요하게 적용된 사이트도 소개해 줘서 웹으로 작성된 페이지를 보는 눈을 높여줍니다.
웹 페이지 제작에 사용되는 개념을 정립하는데 큰 도움을 줍니다. position 속성으로 위치 지정하는 방법, 가상 요소란, Sass를 체험할 수 있는 SassMeister와 같은 칼럼을 통해서는 개념을 실제로 적용해 중간중간 확인해 볼 수 있는 사이트를 소개합니다.
작가가 자신의 노하우를 아낌없이 줍니다. background 속성으로 구현할 때 주의할 점, 그림자를 추가할 때 주의할 점과 같은 칼럼을 통해 경험을 통해야 습득이 되는 점을 조언해 줍니다. 개발자가 어려움을 닥쳤을 때 취해야 할 자세 및 방법도 조언해 주고 있어서, 개발자로서의 소양도 기를 수 있도록 도움을 주는 책입니다.
웹에 관심을 가지고 공부 한 이래로 웹을 만지작 댄지는 20여년이 넘었지만 백앤드를 제외한 CSS를 이용한 레이아웃 구성이나 활용 스킬은 웹 초창기인 2000년대부터 2015년 정도의 그것에 머물러있기 항상 부족함을 느끼고 있던 터이지만 늘 우선순위에 밀려서 제대로 공부를 하기 쉽지 않았는데 이 책의 리뷰를 진행하면서 반 강제적으로 공부를 할 수 있었다.
이 책은 HTML과 CSS를 아예 모르는 사람보다는 그래도 약간은 경험이 있는 분들이 공부하기에 정말 좋은 것 같다. 하나부터 열까지의 설명을 꼼꼼하게 장황하게 늘어놓는게 아니라 딱 필요한 것만 (그렇지만 핵심적인 내용은 모두 포함한다) 알려주고 실제 코드를 따라해보며 익혀가는 방식이다.
HTML의 기초, 속성 부분에 할애된 페이지는 4페이지 뿐이다. CSS에 관한 설명도 6페이지 이내!?
지금까지 접해본 HTML이나 CSS 서적들에 비해 확실히 진도가 팍팍 나가는지라 공부하는데 지루함이 느껴지지 않는다.
1장에서는 위에 서술한대로 웹 사이트의 기본과 필수 도구들에 관한 내용을 간결하게 정리해두고 있으며, 2장에서는 간단한 랜딩 페이지로 배우는 반응형 웹디자인과 글꼴에 대해 튜토리얼을 진행한다.
단순한 한 페이지짜리 페이지이지만 미디어 쿼리를 이용하여 PC에서 볼 때와 모바일기기에서 볼 때의 마크업을 각각 적용하는 방법에 대해 배울 수 있으며, Desktop First, Mobile First에 대한 개념도 익힐 수 있으며, Fontawesome, 브레이크 포인트 등에 대해 알 수 있다.
3장에서는 블로그 사이트를 예시로 하여 다단 레이아웃과 각종 요소들을 꾸미는 방법에 대해 익힐 수 있으며, CSS의 다양한 효과로 페이지를 꾸미는 방법들을 알 수 있다.
4장에서는 회사 사이트를 예시로 하여 표, 그래프, 폼, 자바스크립트를 활용하는 방법에 대해 익힐 수 있으며, 5장에서는 이벤트 사이트를 예시로 하여 페이지와 애니메이션을 구현하는 방법을 익힐 수 있다.
6장에서는 갤러리 사이트를 예시로 하여 이미지와 동영상을 활용하는 다양한 방법에 대해 익힐 수 있다. 웹사이트에서 이미지를 활용할 때 CSS의 필터를 활용하여 포토샵등을 사용하지 않고도 다양한 효과를 주고, 꾸미는 방법에 대해 익힐 수 있으며, 배경에 동영상을 넣는 방법 등 실무에서 유용하게 쓰일 수 있는 방법들을 배울 수 있다.
7장과 8장에서는 각각 HTML과 CSS를 더 빠르고 쉽게 관리하는 방법과 사이트를 올리고 문제를 해결하는 방법에 대해 정리함으로 책의 단원이 마무리 된다.
HTML과 CSS를 처음 접하고 공부하는 분이라도 지루한 이론보다는 바로 결과를 볼 수 있는 실습 위주로 내용이 진행되기에 부담 없이 공부할 수 있는 난이도이며, 현업에 있지만 최신 트렌드에 좀 뒤쳐졌다 싶으신 분이라면 한 번 훑어보고 필요한 부분을 바로 적용하여 사용할 수 있기에 좋은 참고서가 될 것 같다.
개인적으로 애니메이션이나 필터 관련해서 정말 많은 도움이 되었고, 그래픽 툴을 이용하여 작업하던 많은 부분들을 CSS만으로 구현하여 조금 더 빠르고 반응성 좋은 결과물을 낼 수 있게 되어서 매우 만족한다.
프론트엔드의 기본기인 HTML과 CSS에 대한 기초와 함께 실전 코딩을 배울 수 있는 책이라 생각합니다.
HTML과 CSS 기초를 알고 있지만 실제 웹사이트를 만들려고 하면 손이 안 움직여요.
이 웹사이트처럼 만들고 싶은데 어떻게 해야 하는지 모르겠어요.
머릿속에는 만들고 싶은 웹사이트를 구체적으로 구상하고 있지만
표현할 방법을 몰랐던 적이 한 번쯤은 있을 것입니다.
이 책은 "이런 표현을 하고 싶어요"
라는 요구에 귀 기울여 실무에 필요한 테크닉을
이미 완성한 다섯 개의 웹사이트 예제와 함께 배웁니다.
HTML, CSS 입문에서 다음 단계로 넘어가고 싶다면 바로 이 책을 봐야 할 때입니다.
CHAPTER 1
웹사이트의 기본과 필수 도구
1.1 웹 페이지 구조
1.2 HTML 기초
1.3 HTML 속성
1.4 CSS 기초
1.5 CSS를 더욱 쉽게 관리하는 방법
1.6 자바스크립트 사용법
1.7 브라우저에 따라 다르게 보이는 차이
1.8 개발자 도구를 자유자재로 사용하기
1.9 앞으로 배울 내용
HTML과 CSS의 기초와 개발자 도구를 사용하는 법에 대하여 기술하였습니다.
HTML과 CSS는 프론트엔드의 기초중의 기초입니다.
기초이지만, 고급진 기초라고 할까요??
아주 중요한 내용만 기술하였습니다.
완전 꿀팁이라고 생각합니다.
CHAPTER 2
랜딩 페이지로 배우는 반응형 웹 디자인과 글꼴
2.1 랜딩 페이지 만드는 법 소개
2.2 1단 레이아웃이란
2.3 풀사이즈 배경 이미지로 눈에 띄는 디자인 만들기
2.4 글꼴을 사용하는 자세한 방법
2.5 아이콘 폰트 사용법
2.6 스마트폰에 대응 가능한 반응형 웹 디자인
2.7 브레이크 포인트 알아보기
2.8 표시 영역으로 빠르게 이동하는 방법
2.9 연습문제
2.10 커스터마이징
프론트엔드를 개발하면서 중요한 부분 중 하나가 레이아웃이라 할 수 있습니다.
스마트폰에 대응 가능한 반응형 웹 디자인이 중요합니다.
모바일환경에 대응하는 것이 매우 중요합니다.
미디어쿼리의 브레이크 포인트를 알아두어야 디바이스별 대응이 가능합니다.
웹사이트에서 이미지가 깨지는 것을 방지하는 방법은 아주 꿀팁입니다.
CHAPTER 3
블로그 사이트로 배우는 다단 레이아웃과 꾸미는 방법
3.1 샘플 블로그 사이트 살펴보기
3.2 2단 레이아웃에 대해
3.3 크기가 다른 화면에도 대응할 수 있는 전환 방법
3.4 요소별 꾸미기 (제목, 이미지, 버튼)
3.5 요소별 꾸미기 (번호 없는 목록, 번호 있는 목록)
3.6 요소별 꾸미기 (인용문, 페이지네이션, 테두리)
3.7 요소별 꾸미기 (헤더, 푸터, 네비게이션, 표, 폼)
3.8 스크롤에 맞춰 따라오기
3.9 연습문제
3.10 커스터마이징
정보를 전달하는 블로그 스타일의 레이아웃은 자주 사용되고 있습니다.
웹사이트 개발에 사용할 수 있는 다양한 레이아웃에 대해 알 수 있습니다.
요소별 꾸미기를 통해 웹사이트 개발의 실전 노하우를 맛볼 수 있습니다.
CHAPTER 4
회사 사이트로 배우는 표, 그래프, 폼, 자바스크립트
4.1 구현할 회사 사이트 소개
4.2 틀에서 벗어난 요소 만드는 법
4.3 그래프로 한눈에 보기 쉬운 데이터 만드는 법
4.4 이미지와 텍스트를 서로 다르게 표시하는 법
4.5 표로 데이터를 표현하는 법
4.6 타임라인 만드는 법
4.7 폼 꾸미는 법
4.8 속성 셀렉터
4.9 연습문제
4.10 커스터마이징
그래프, 표 등 회사 사이트에서는
여러가지 데이터를 정리해서 보여주는 경우가 많습니다.
문의로 연결될 수 있는 웹사이트 구성과 구현 방법을 알아볼 수 있습니다.
다양한 형태의 요소를 웹사이트에 추가하는 방법을 알 수 있습니다.
각 요소들은 실전에서 아주 유용하게 활용할 수 있습니다.
CHAPTER 5
이벤트 사이트로 배우는 특정 페이지 만드는 법과 에니메이션
5.1 구현할 이벤트 사이트 소개
5.2 CSS로 페이지 안에서 부드럽게 움직이는 법
5.3 블렌드 모드로 이미지 색 바꾸는 법
5.4 커스텀 속성(변수) 사용하는 법
5.5 CSS로 애니메이션 만드는 법
5.6 CSS로 애니메이션 만드는 법(키 프레임)
5.7 사선 모양 디자인 만드는 법
5.8 그라데이션 만드는 법
5.9 슬라이드 메뉴 넣는 법
5.10 연습문제
5.11 커스터마이징
많은 사람이 참여하는 이벤트 사이트는
얼마나 많은 사용자의 마음을 움직일 수 있는지가 중요한 포인트입니다.
모양, 색 등을 변경하거나 적당한 애니메이션 사용 노하우를 알 수 있습니다.
그라데이션과 슬라이드 메뉴 등 유용한 스킬을 알 수 있습니다.
CHAPTER 6
갤러릴 사이트로 배우는 이미지와 동영상을 시용하는 방법
6.1 구현할 갤러리 사이트 소개
6.2 배경에 동영상 넣는 법
6.3 반응형 웹사이트에 맞게 이미지 넣는 법
6.4 다중 컬럼 레이아웃 적용하는 법
6.5 다중 컬럼 레이아웃 적용하는 법
6.6 필터로 이미지 색 바꾸는 법
6.7 커서를 갖다 두면 이미지가 확대되도록 구현하는 법
6.8 요소에 그림자 추가하는 법
6.9 하이트 박스로 이미지를 꽉 차게 표시하는 법
6.10 애니메이션 추가하는 법
6.11 다크 모드에 대응하는 법
6.12 연습문제
6.13 커스터마이징
자신의 작품을 정리한 포트폴리오 사이트를 만들 수 있습니다.
포트폴리오 사이트로 갤러리 사이트를 구현할 수 있습니다.
이미지와 동영상을 더욱 매력적으로 보여주는 방법과
자바스크립트로 애니메이션을 만드는 방법을 배울 수 있습니다.
CHAPTER 7
HTML과 CSS를 더 빠르고 쉽게 관리하는 방법
7.1 에밋으로 빠르게 코딩하기
7.2 CALC 함수로 계산식 사용하는 법
7.3 Sass로 효율적으로 코딩하기
7.4 VSCode로 Sass 사용하는 법
7.5 네스트 자유자재로 구사하기 (Sass 활용하기)
7.6 파셜 파일로 분할하기 (Sass 활용하기)
7.7 mixin으로 스타일 재사용하기 (Sass 활용하기)
HTML과 CSS의 기본을 익숙해질 수 있습니다.
또한, 프론트엔드 개발을 효율적으로, 실수없이 구현할 수 있도록
에밋, calc 함수, Sass 등을 알 수 있습니다.
조금더 편하게 개발을 하는 방법을 알 수 있습니다.
CHAPTER 8
사이트 올리는 법과 문제 해결 방법
8.1 체크 리스트
8.2 오류 메시지 해결 방법
8.3 구현하다가 모르는 것이 있다면 웹사이트에 질문하기
많은 개발자들이 에러라는 난관에 봉착했을때 어려움을 느낍니다.
문제를 마주쳤을 때 스스로 해결할 수 없거나 해결하는 데 시간이 많이 걸립니다.
책에서는 문제를 조금이라도 쉽게 해결할 수 있도록
자주 발생하는 문제를 해결하는 방법을 소개하고 있습니다.
HTML과 CSS에 대한 책은 수없이 많습니다.
하지만, 이 책은 초급 프론트엔드 개발자가 알아두면 매우 도움이 되는 방법들이 적나라하게 기술되어 있습니다. 실적에서 활용할 수 있는 꿀팁도 있구요. 초급 개발자라면 반드시 알아야하는 기초도 기술되어 있습니다. 또한, 예제 코드도 적절하게 제공하고 있어 책의 내용을 이해하는데 도움이 됩니다.
대충 어디서 줏어들은 거 반, 실제 개발자 도구 뒤지면서 알아낸거 반으로 필요한 부분만 사용할 때가 있었는데 이번에 입문 강의를 듣는다는 생각으로 읽으니 체계가 잡혔다.
3. 모바일 사이즈에서 어떻게 보이는지 확인하는 부분이 나온 게 반가웠다.
최근에 뭘 하다가 알게 됐는데 이부분을 제대로 확인하게 되어서 유익했다.
4. 독학할 때 좋은 구성과 재료라고 생각한다.
혼자 봐도 따라하기 쉽고 책의 설명도 친절하다. 코드 제공이 되니 직접 다운받아서 VSC에서 열어보고 수정하면서 익힐 때 좋다. 또한 각 파트에서 부분적으로 바꾸면 어떻게 되는지도 버전을 나눠 제공하니 일단 눈으로 그 차이를 확인하기 좋다. 그러면서 자기 나름대로 코드를 변형하면서 기능적 차이를 느끼는 것도 좋겠다.
5. 고해상도 이미지를 준비할 수 없을때 대처할 수 있는 팁이 좋았다. 점무늬, 줄무늬 입히는 건 업무할 때 다른 경우에도 응용가능하다. 가끔 직접 이미지 수정해야 되는 경우가 있는데 써먹어봐야겠다.
6. FE랑 커뮤니케이션할 때 유용할 것 같다.
FE뿐 아니라 메인 페이지 등에 관여하는 타부서와도 커뮤니케이션할 때 전체 구조를 알고 있으면 주기적 개편이 있을 때 뭔가 이상한 부분이 생기면 정확한 용어로 문의할 수 있을 거라고 생각했다.
7. 장이 진행될수록 점점 구현 사이트 레벨이 높아진다.
천천히 따라하면 괜찮을 수준이다. 그리고 처음부터 기초적인 내용으로 가장 간단한 웹사이트를 만들어보면서 창조의 기쁨을 느끼게 한 다음 레벨을 서서히 올려가는 구조가 참 괜찮다. 나도 나중에 어떤 지식을 A-Z까지 설명해야 한다면 이렇게 단계적으로 내용을 추가하면서 전체적인 그림을 그릴 수 있도록 시도해보고 싶다.
해당 책은 노 베이스로 시작하여 차근히 웹 페이지를 빈속 부터 채워나가기 보다, 완성된 웹사이트들로부터 시작하여 웹 디자인 및 세부 UI 들에 대해 배워 나가는 방식을 사용하였다.
밑에 해당 방식의 장점을 자세히 서술할 것이지만, 잠시 먼저 말해보자면 이러하다.
물론 다른 기본서들이 그러하듯 5개의 예제들로 설명을 하고 있지만, 해당 책은 완성되어 있는 웹사이트와 비교를 하기 때문에 다소 설명을 하여도 이렇게 까지 할 수 있구나 이렇게 사용되는구나 하고 와닿지 않는 것들부터 실제 사이트들에서 쓰고 있는 색상표들까지 제공해 주고 있다.
그렇기 때문에, 상대적으로 디자인에 대해 감각이 떨어기는 본인과 같은 개발자들이 참고하기 이렇게 좋을 수 없다. 아래 더욱 상세하게 특징에 대해 알아보도록 하자.
[웹 프론트 초보를 위한 극한의 친절함] 위에서 잠시 언급했듯이 해당 책은 개발자들에게 디자인적으로 완성된 사이트들을 예시로 보여주며 센스있는 웹을 만들 수 있도록 매우 친절함을 보여주고 있다.
그러나, 개발자들만을 위해 친절하면 섭섭할테니 디자이너를 위한 섬세함도 빼놓지 않았다.
웹이 어떻게 동작하는지에 대한 매우 기본적인 설명부터, 처음 개발을 시작하는 비개발자들을 위해 자주 변수명으로 쓰이는 영단어 약어와 자주 사용되는 클래스명들까지 섬세한 팁들을 잊지 않았다.
기본적으로 모르면 주춤하거나 난감할 수 있을 것 같은 포인트들까지 잡아 미리 알려주는 친절함으로 디자이너나 비개발자들도 예제들과 함께라면 찬찬히 나아갈 수 있을 것이다.
[개발자들을 위한 떠먹임] 개발자들이 웹사이트나 블로그 등을 개설 할 때, 가장 막막한 것이 디자인일 것이다.
물론 센스 있는 개발자들은 많겠지만 다수의 개발자들의 시간을 쏟게하는 것이 어떤 색을 사용할지, 어떤 애니메이션을 어떻게 사용할지, 어떤 레퍼런스를 찾을지일 것이다.
그런면에서 해당 책은 생각을 읽기라도 한듯 "이런걸 보고 해봐!" 라고 떠먹여 주고 있다.
폰트, 색상, 배치, 배경 크기 등 이렇게 한 사이트들을 참고할 수 있도록 하고, 어떤 사이트들에서 다운 받을 수 있다 라는 등 해당 책에서 소개하는 것들만 참고한다면 충분히 센스있는 사이트를 만들 수 있을 것이다.
[지루하지 않은 예시] 예시들은 어느 개발서이든 많고 다양하다. 본인은 여러 기본서/개발서적들을 접해오며, 다양한 예시들을 보아왔다.
예시는 중간중간 많은 개념들로 지루할 수 있는 부분을 환기하는 역할로써 본인은 선호하는 편이기에 재밌는 예시들을 오아시스처럼 찾게된다.
해당 책은 그런 오아시스들이 다수 포진하고 있는데, 예를들어 귀여운 고양이들이 그것이다.
위의 예시들처럼 집사들만 알 수 있을 것 같은 섬세한 부분들부터 고양이들의 사진으로 중간중간의 분위기를 환기하고 있다.
그렇기에 개념들을 지루하지 않게 끝까지 읽는데 무리가 없는 것이 매우 큰 장점이다.
추천 대상
해당 책은 웹이 초보인 개발자들과 본인들만의 웹사이트를 만들고싶은 개발자들까지 큰 폭의 개발자들부터, 개발이 처음인 디자이너들에게 추천하고 싶다.
개발자들에겐 센스있는 웹페이지를 만들 수 있도록 돕는 좋은 팁들을, 비개발자들에게는 웹개발을 하기 위한 베이스를 잡을 수 있도록 하는 좋은 기본서가 될 것이다.
갓 입문한 분들에게도 좋을 것 같은 느낌이 들었지만, 오히려 기본기를 살짝 놓치고 가신 분들에게 좀 더 추천해주고싶다. 왜냐하면, 글 내용이 매우 꼼꼼하여 초-중급자분들께서는 술술 읽힌다. (제가 그랬거든요)
- 예시로 html 태그 내, head 태그 내에 있는 viewport 태그 라던가… 굳이 보면서 아 맞네! 이런게 있었지. 라는 생각을 하게된다. 그래서 추천한다.
- 웹디자이너, 퍼블리셔, 프론트엔드 개발자가 읽기에 좋은 도서라는 느낌이 팍 왔다.
상세하게 설명해주고 예시도 넣어준다. 그간 웹디자인 교재를 아예 읽지 않은건 아니었지만, 그래도 예시 하나씩 올려주고, 깔끔하게 설명해주는 모습이 너무 좋았다.
■ 책의 외관
책 디자인이 깔끔하고 가볍다. [아주 좋다] 요즘 책은 좀 무겁게 나오거나 흐물흐물하게 나온 경우가 많아서 가지고 다니기 불편한 적이 많았는데, HTML & CSS 웹디자인 교재는 하드와 소프트의 중간정도로 느껴진다. 굳이 무게추를 올리자면, 소프트에 가깝긴하다. 그래도 나름 안정적인 모습이다.
■ 클론코딩
이 책은 클론코딩(예제 따라하기)을 통해 학습할 수 있는 여건을 제공해준다.
내가 제일 좋아하는 교재의 형태인 예시. 예시. 예시 지옥. 아주 좋다.
클론 코딩이 유행이고 나 또한 클론코딩으로 좋은 덕을 많이 봤다. PHP(pure, Laravel, CodeIgnitor), Vue.js, React.js 등등 모든 언어들을 공홈을 읽은 후에는 항상 클론코딩을 필수적으로 할 정도로 좋아한다.
처음에 클론코딩을 할 때 무슨 말인지 못알아듣는다. 하지만 괜찮다. 누구나 처음에는 아무것도 못하는게 맞다. (고급 분들 빼고. 그 사람들은 신이야.)
클론 코딩을 통해 그 언어를 사용하는 패턴에 익숙해지고, 본인만의 스타일로 바꾸어 작성해보고 구동해보는 작업을 통해 남의 것을 베껴 놓은 표절 작품이 아닌 나만의 독창성을 가진 작품으로 재탄생 시킨다.
이것이 클론코딩의 원칙이자 순기능을 이루는 방법이다.
■ 필수 요소!
media query, breakpoint 등을 이용해 요즘 밥먹듯이 사용해야하고 적용해야하는 반응형 웹디자인도 적용하는 방법과 소개 덕분에 현대에 필요한 지식을 전달하여 현업에서 필요한 디자이너가 될 수 있다. (물론 더 많이 공부해야합니다~)
■ P.S.
솔직히 말해서 그 중에 ‘scroll-snape-type: x, y’ 는 처음 보았다. 척 보자마자 무슨 기능인지는 알겠는데 진짜 처음 알았다. 기능인 즉슨 마우스 휠이나 모바일에서 스크롤을 할 때의 속도를 조절하는 것인데, y는 세로로 적용이 가능하고, x는 가로로 적용이 가능하다. 이렇게 또 배운다.
html, js, css 의 가장 기본적인 사용법을 배운다. 너무 상세한 속성 등에 대한 정보의 나열이 아닌 개략적으로 어떤 게 사용하는 지를 알려준다. 또한 효율적으로 웹사이트를 제작하는데 활용되는크롬 웹브라우저의 개발자 도구를 소개하고, 여러 기능 중 웹사이트 제작에 필요한 기능들에 대해서 설명 한다.
2. 따라하며 배우기 (chapter 2~6)
웹 개발을 배우는 방법 중 가장 많이 하는 방법 중 하나가 클론코딩이다.
이 책은 여러가지 사이트를 클론코딩 해보며 각 사이트가 어떤 특징을 지녔는지 또 그 특징을 구현하기 위해 html, js, css 를 어떻게 활용 했는지를 상세하게 설명 하고 있다.
또한 챕터의 마지막에는 해당 챕터에서 배운 부분에 대한 연습문제와 커스터마이징 해보기를 제공하여 단순히 따라하기에 그치지 않고, 한단계 더 나아갈 수 있는 방향을 제시 한다.
커스터마이징의 경우 막연히 바꿔보라고만 하지 않고, 실제 고객의 요청 같이 보이는 구체적인 요구사항을 가지고 작업을 할 수 있도록 한다.
3. 좀더 편한 도구 소개 (chapter 7)
html, css 코딩의 편리함을 제공하는 도구인 에밋, css를 더욱 편리하고 효율적으로 구현할 수 있는 언어인 Sass 를 소개한다.
에밋의 태그 자동완성 기능은 사용하지 않으면 확실히 손해다.
4. 독학은 이렇게 (chapter 8)
마지막 챕터에서는 웹사이트 제작을 배우는 학생들이 실제로 자주 묻는 질문 목록 체크리스트를 제시하여 어떤 부분에서 오류가 발생하였는지 혼자 체크할 수 있도록 한다.
웹사이트를 만들기 위해서는HTML / CSS를 필수적으로 알아야 한다. 대부분의 책들은 아무런 관련된 지식을 소개하고 있지만 만약 관련된 경험이 전혀 없다면 실제로 이론을 적용하는데 어려움이 있다. "완성된 웹사이트로 배우는 HTML&CSS 웹디자인"은 완성된 사이트를 먼저 제공하면서 흥미를 이끌어내고 이것을 구현하는데 필요한 기술을 배우기 때문에 초급이나 입문단계에서 효율적인 학습이 가능한 것 같다.
* 책 소개 및 구성
정말로 필요한 배경지식을 가볍게 소개하면서5개의 웹사이트 예제를 보고 사용된 기술을 하나씩 학습하는 구성으로 되어있다. 빠르게 실습하기 때문에 초급자 대상으로 흥미롭게 느껴지기 때문에 효율적인 학습이 될 수 있을 것 같다. 예제를 잘 선정하여 웹사이트 구현에 필요한 지식을 적절하게 학습할 수 있다.
설명도 매우 구체적이며 이미지를 활용하여 잘 설명하고 있어 처음 시작하거나 취미로 접근한다면 가장 적합한 도서인 것 같다. HTML / CSS 또는 웹디자인의 경험이 있다면 단시간에 초급과정을 학습할 수 있을 것 이다. 초급과정이지만 실무에 필요한 내용 위주로 포함하고 있어 좋은 책인 것 같다. 그러나 CSS, HTML의 약간의 경험이 있다면 많이 쉬운 수준에 속하는 것 같다.
필자는 웹 디자인을 직접 구현해보는 토이 프로젝트를 진행하고 있다. 어디선가 보거나 문득 떠오른 아이디어를 구현하는데 초점을 맞춘 프로젝트인데 사실 어느 시점에 아이디어가 바닥났다. 아마도 아이디어가 무에서 유가 아닌 지식을 바탕으로 떠오르는 현상에 기인한 듯 보인다.
이 책을 선정한 이유는 이러한 생각이 바탕이 되었다. 이 책을 통해서 새롭게 익힌 지식들이 새로운 아이디어로 확장될 수 있길 바랐고, 필요한 기능만 익혀왔던 필자가 모르고 지나쳤던 다양한 스타일링 방법을 익히면 좋겠다는 생각이었다. 그 관점에서 보면 좋은 책이다!
대상 독자
이 책은 웹사이트를 종류별로 나눠 어떤 디자인을 어떻게 적용할 수 있는지 설명한다. 개인적으로 책의 내용은 크게 어렵지 않다고 생각된다. 만들다보면 익힐 수 있을 수준이라고 생각되어 입문자-초급인 사람에게 추천하고 싶다. 개발적 지식보다는 단순히 구현하는 방법이나 디자인과 관련된 몇 가지 트릭을 다루고 있다. 따라서 개발에 대한 견문을 넓하는 목적이라면 이 책이 적절하진 않을 수 있다.
책에서 구현하는 결과물
아래는 대표적으로 책에서 구현하는 결과물이다. 각 이미지 아래에 페이지를 둘러 볼 수 있도록 링크를 걸어놓았다. 보면 알겠지만 느낌있는 디자인도 약간 구식으로 보이는 디자인도 존재하고 있다. 확실한건 무엇이건 응용하여 예쁘게 만드는 것은 개인의 역량으로 가능하리라 생각한다.
내가 경험한 공부 방법은 2가지 정도인 것 같다. 잘 짜여진 커리큘럼 안에서 심도있게 공부하는 방법과 자신이 필요한 부분만 공부하는 방법이다. 후자의 방법은 자칫하면 파편화된 지식을 얻을 수 있다는 단점이 있지만 흥미와 동기를 얻을 수 있다는 장점이 있다.
이 책은 전자보다는 후자에 가까운 책이다. 어떠한 방향(완성된 웹사이트)을 제시해주고 그 방향에 맞는 것을 학습할 수 있도록 도와준다. 위에서 설명했지만 각 디자인을 만드는 단순한 방법을 제안하며 개발에 대한 심도있는 지식을 다루진 않는다. 어찌보면 웹 개발에 입문하는 사람에게 로드맵이 될 수 있을 것 같다.
나 역시 몰랐던 디자인 요령이나 방법에 대해서 새롭게 알 수 있는 계기가 되었다. 최초 이 책을 선택한 이유에 알맞은 결과를 얻을 수 있었다고 생각된다. 다시 처음으로 돌아가 이 책을 통해서 익힌 지식들로 새로운 아이디어를 다시 창출해 보려한다.
최근 웹 프론트엔드 개발에 관심이 생겨 공부할 방법을 찾고 있었는데, 마침 딱 맞는 책이라서 즐겁게 읽을 수 있었습니다.
프론트엔드의 기본기를 가장 충실하게
최근 웹 프론트엔드 진영에서 자주 사용되는 프레임워크로 React, Vue, Svelte 등이 있지만, 가장 기본이 되는 것은 언제나 HTML과 CSS입니다. 이 책에서는 별도의 웹 프레임워크를 사용하지 않고 HTML과 CSS로 웹 사이트를 제작할 때 고려해야 할 다양한 요소들과 실제 코드를 작성하는 요령을 안내합니다.
실무에서 꼭 알아야 할 꿀팁 전수
단순히 HTML과 CSS로 웹사이트를 제작하는 방법을 알려주는 것이 아니라, 어떻게 하면 이상적인 웹사이트를 효율적으로 개발할 수 있는지에 중점을 맞춰 알려주는 책입니다. 혼자 공부하려면 수도 없는 삽질이 필요한 영업비밀들(반응형 구현 팁, 폰트와 이미지 처리, 개발자 도구 사용 등)을 가차없이 폭로하고 있습니다.
요즘 누구나 쉽게 자신의 홈페이지를 만들 수 있다. 비전공자라 할지라도 프론트엔드에 대한 기본 강의만 들으면 누구나 자신만의 페이지를 가질 수 있다. 하지만 이렇게 강의를 듣고 홈페이지를 만들고 보면 어딘가 부족하단 느낌을 지울 수 없을 것이다. “내 홈페이지는 기존 상용 사이트들과 무엇이 다른걸까?” 라는 의문이 생기기 시작한다. 이에 대한 답은 인터넷에도 찾기가 어렵다. 내가 무엇을 모르는지 어떤점이 부족한지 알기 어렵기 때문에 검색어를 찾기도 어렵다.
이책은 이러한 독자들을 위한 디테일을 알려준다. 글꼴, 스크롤 방법, 레이아웃, 버튼 디테일, 다크모드 등 하나하나 따로 찾아보기 어려운 작은 요소들이지만 이 각각을 알맞게 홈페이지에 적용하면 아주 큰 차이를 보이는 것들이다. 이 책을 통하여 내 홈페이지에 고급스러운 디테일을 추가할 수 있다.
대상 독자
HTML 와 CSS 등을 기본적으로 다룰줄 알아야 한다. 이 책은 초보자들 위한 책이 아닌 스스로 자신의 페이지를 만들 수 있는 사람을 대상으로 한다. 자신의 페이지를 한번이라도 스스로 만들어본 사람에게 추천한다. 자신의 페이지를 더 고급스럽게, 더 돋보이게 하고 싶은 사람들에게 아주 적합한 책이다.
다루는 내용
우선 웹 개발을 위해 기본적인 HTML 구조와 자바스크립트 기본, 그리고 기본 도구 사용등을 다룬다. 웹 개발 기본은 정말 기본적인 내용만을 다룬다. 처음을 위한 책은 아니기 때문에 간단한 내용만을 다루므로, 기초가 필요하다면 다른 책을 먼저 공부하고 와야 한다.
그다음 블로그, 회사, 모바일 웹을 위한 반응형 등 상황에 맞는 예제 페이지 만드는 법과 그 디테일을 다룬다. 블로그, 회사, 이벤트 사이트등 유형에 따른 여러 예제들을 보여주고 이를 실습한다. 이 유형들은 최근에 많이 보이는 사이트 유형으로 실습을 통하여 나중에 자신의 홈페이지에 빠르게 자신에 맞게 적용 가능할 것이다.
마지막으로 HTML 과 CSS 를 이용한 개발을 더 쉽고 빠르게 관리하는 방법과, 오류 발생시 체크리스트 및 대처방법에 대해 다룬다. 아직 웹 개발이 익숙하지 않다면 매우 유용하다.
생각 및 느낀점
나 역시 비전공 출신 개발자로서 여러 강의를 듣고 개인 홈페이지를 만들어 운영하고 있다. 하지만 어딘가 모르게 상용페이지들에 비해 부족하다고 생각이 자꾸 들어 고치려 했지만 어디가 부족한 건지, 무엇을 찾아야 하는지 갈피를 잡지 못하고 있었다. 이 책을 읽고 이제 어디가 부족한거지, 어떤것을 찾아야 하는지 그 방향성을 드디어 잡게 되었다.
또한 여기에서 제공하는 블록, 회사 사이트, 이벤트 사이트, 갤러리 사이트등의 예제들은 정말로 유용하다. 구조화되어 잘 정리된 이 코드들은 차후 자신의 페이지를 만드는데 정말 큰 도움이 될 것이다. 물론 이 책이 없어도 해당 코드들을 받을 수 있지만 그냥 다운 받아 붙여넣기 하는 것과 실제 책으로 공부하고 어떤 내용인지 정확히 알고 이 코드를 활용하는 것과는 다르다. 정말 디테일을 적재 적소에 활용하기 위해선 책으로 실습을 꼭 해봐야 한다.
웹개발을 한다면 이 책을 꼭 추천하고 싶다. 수많은 개발자들이 자신의 홈페이지를 포트폴리오로 내세우는 지금 디테일의 차이가 자신만의 차이점을 돋보여줄 것이다.
이번에 리뷰할 책은 "완성된 웹사이트로 배우는 HTML&CSS 웹디자인" 입니다. 이 책은 HTML&CSS 를 처음 배운 분들이 다음 단계로 넘어가기 좋은 연습 교재입니다.
진짜 초심자를 위한 교재로는 Head First 시리즈 중 Head First HTML 이 있습니다. HTML 의 개념을 잡고 코딩에 익숙해지는데 도움이 되는 책이죠. 이런 입문서를 통해 어느정도 HTML 코드에 어느정도 익숙해졌다면 다음 단계로 다양한 스타일의 사이트를 만들어 보아야 합니다.
웹 디자인은 시각디자인과 달리 그래픽적인 부분만 해결하는 것으로 완성되지 않습니다. 반드시 코딩을 통해 실제 사이트의 구축을 목표로 해야하죠. 그래서 웹 디자이너가 되고 싶은 사람들을 위해 교육기관들은 첫단계로 포토샵이나 일러스트레이터 같은 그래픽 프로그램들과 함께 HTML&CSS, JavaScript 등을 배우도록 구성합니다.
웹디자이너가 되기위해서는 HTML&CSS 를 기본으로 하여 코딩 영역의 실무능력을 반드시 갖추어야 하지만 코딩영역은 일반적으로 배우는 교과목과 너무나 다르고 낯설어서 코딩을 혼자 공부하는 일은 결코 쉽지 않습니다.
그래서 적절한 강의나 교재의 선택이 중요하겠죠.
그럼 웹 디자이너는 왜 HTML&CSS 를 배워야 할까요?
이것을 설명드리기 위해 우선 웹 사이트를 만들기 위한 업무 영역을 아주 간단하게 설명드려 보죠. 보통 웹 사이트를 제작하는데 중요한 업무영역은 대략 크게 나누면 네가지 영역으로 나눌 수 있겠습니다.
웹 기획, UX-UI, 웹디자인, 웹 개발(프로그램적 측면) 입니다. 이들 업무 영역은 서로 겹치거나 여러가지를 동시에 진행하는 경우도 많죠. 또 이들 업무를 상호 넘나들며 수행하는 능력자들도 많습니다.
웹 기획자는 사이트의 사용자 분석, 시장 분석, 목적과 활용, 개발 운영, 마케팅 등 전체적으로 사이트의 기획을 진행합니다. 기획이 완료되면 웹 디자이너는 보통 프론트엔드 개발자와 함께 혹은 개발자의 업무 진행 이전에 기획에 걸맞는 웹디자인 작업을 진행하게 됩니다.
웹 사이트 개발에 있어 가장 기초가 되는 웹 디자인을 실제로 브라우저에 띄울 수 있는 뼈대와 외양을 만드는 사람들이 웹 디자이너이고, 개발자들은 이 뼈대와 외양만 같춘 사이트에 데이터베이스를 기반으로 하는 여러 기능(프로그래밍)을 붙이는 사람들이라고 생각하시면 되겠습니다. 그리고 이런 기존의 업무 흐름에 UX-UI(사용자 환경 디자인) 을 고민하는 비교적 새로운 업무영역이 추가 되어 이 영역의 중요성도 점점 더 커지고 있습니다.
사실상 어떤 영역에서 업무를 진행하던지 웹 사이트를 만들기 위해서는 HTML 과 CSS 를 이해하는 것이 가장 필수적이고 기초적인 일입니다. 더구나 사이트의 시각적 영역과 구조적 기초부분을 담당하는 웹 디자이너에게는 코딩을 필수로 하면서 더 많은 영역을 넘나들 수 있는 전방위적 이해 능력과 실무 능력이 요구되고 있습니다.
물론 클라이언트 성향과 사이트를 제작하는 실무 기업의 업무 형태에 따라 업무영역이 달라질 수 있지만 웹 디자이너에게 기본적인 코딩 능력은 그래픽 디자인 능력 못지 않게 가장 중요한 요소 중 하나라고 할 수 있습니다. 그러니 기초부터 탄탄하게 공부해둘 필요가 있겠지요?
웹 사이트를 만들고 싶어서 HTML 과 CSS 를 배우기 시작하신 여러분이 가장 기초적인 코드와 기능에 대해 이미 모두 배웠다고 합시다. 다음 단계로는 실습을 해보고 싶으실 겁니다.
실무에서 실제 운영하는 사이트를 만들어 보는 것이 가장 빨리 배우는 방법이지만 HTML 과 CSS 를 처음 배운 초보에게 실제 사이트를 만드는 것은 무리입니다. 실습단계에서는 연습용 사이트가 자세히 설명되어 있는 교재를 선택해 많은 경우의 사례를 연습해 보시면 좋겠습니다.
이 책은 그런면에서 5개의 연습 사이트를 통해 그동안 배운 코드들을 실습하고 나름의 변형도 해보면서 연습할 수 있도록 돕는 책입니다. 코드 이해 수준에서 벗어나 웹사이트를 실제와 유사하게 만들어 볼 수 있는 연습 기회를 제공하고, 내가 배운 코드들이 실제로는 어떤 식으로 적용되는지, 실무에서 효율성 있게 작업하려면 어떻게 해야 하는 지 알려줍니다. 초보가 실습을 시작하기에 좋은 책이라 할 수 있겠네요.
이 책은 그리 두꺼운 책은 아니지만 내실이 있는 편입니다. 모두 8 챕터로 구성되어 있고 웹 사이트 개발을 위한 기본 정보를 제공하면서 웹 사이트 개발자 도구를 추천합니다.
에밋, calc 함수, Sass 활용 등 코드 효율화 방법에 대해서도 빠짐없이 다루고 있으며 사이트 런칭과 런칭 전 체크리스트와 많이 일어나는 오류 해결방법도 언급하고 있습니다. 독학에서 만나기 쉬운 문제 해결 방법들이 요소요소에 설명되고 있으니 대충넘기지 마시고 꼼꼼하게 읽어보시면서 반드시 코딩을 실제로 해보시면 좋겠습니다. 중요한 용어와 기술에 대해서 언급하고 있으므로 더 자세한 내용은 해당 내용을 다룬 강의나 다른 책을 통해 계속 공부를 이어나가시면 다음 단계의 공부가 되겠습니다.
또 5개의 웹 사이트 실습 예제를 자세한 코드 설명과 함께 제공하고 사이트 별로 연습문제, 커스터마이징 방법도 제시해 줍니다. 예제를 코딩해 본 뒤에는 내 나름의 커스터마이징을 해보는 것도 좋은 실습이 되겠습니다.
아래는 5개의 연습 예제가 다루고 있는 주요 내용입니다.
랜딩 페이지-반응형 웹디자인과 글꼴
블로그사이트-다단레이아웃과 요소별 꾸미기
회사사이트-표, 그래프, 폼, 자바스크립트
이벤트 사이트-색상과 애니메이션
갤러리 사이트-이미지와 동영상의 사용
적당히 읽어 보는 책이 아니라 실습을 해야하는 책이므로 구매해서 꼼꼼하게 읽으면서 예제 사이트를 만들어 보시고 가능하다면 친구나 동료와 모임을 만들어 함께 실습해 보는 것도 좋겠습니다.
실무 환경은 정말 다양하고 그에 맞게 사이트의 디자인과 기능도 정말 다양합니다. 한권의 교재에 다양한 환경과 여러 유형의 사이트를 모두 다루는 것은 불가능합니다. 일단 기초적인 연습을 시작할 수 있는 교재를 통해 공부를 시작하는 것이 좋습니다. 기왕 웹디자인 공부를 시작하셨다면 이 책처럼 실제 사이트에 가까운 샘플 사이트로 연습을 도와주는 책들을 여러권 구해서 되도록 다양한 유형의 실습용 사이트를 최대한 많이 만들어 보시길 권합니다.
이 책은 HTML&CSS 의 기초를 알고 있지만 실제 웹사이트를 만들려고 하면 무엇부터 시작해야 할지 막막하신 분들을 위한 지침서 입니다.
지은이는 웹 디자이너로 근무하면서 HTML 공부를 하면서 막막했던 내용을 토대로~
이론,사용편의성,접근편의성,로딩 속도와 같은 것들도 중요하겠지만, 먼저 마음속에 그려둔 이미지를 형상화 하는 방법이 더욱 중요하다는 것을 깨닫고 이 책을 쓰게 되었다고 합니다.
기존의 웹사이트 제작 가이드는 대부분 코드를 보면서 웹사이트를 만들지만~
이 책은 이미 완성된 웹사이트를 통해서 어떤 테크닉을 사용한 것인지를 배워 나갑니다.
구성
5개의 완성된 사이트를 가지고 여러가지 다양한 테크닉을 배워 갑니다.
1. 랜딩페이지
위와 같은 페이지를 구현 하면서 반응형 웹 페이지의 세부 설정과 폰트의 조합 등을 살펴 봅니다.
2. 블로그 사이트
고양이 블로그를 통해서 점선이나 곡선,인덱스,리스트,헤더,푸터 와 같이 자신이 하고 싶었던 세세한 표현을 배웁니다.
3. 회사 홈페이지
회사 홈페이지에서 자주 사용하는 그래프,표 와 같이 데이터를 정리하는 방법에 대해 다룹니다.
4. 이벤트 페이지
이벤트 페이지를 통해서 애니메이션,브랜드 모드를 표현 할 수 있는 방법에 대해서 배우고 여러 사이트에서 이러한 방법등을 응용할 수 있는 방법 등에 대해서 다룹니다.
5. 갤러리
갤러리 사이트를 구현 하면서 동영상, 다단레이아웃,CSS필터,확대, 라이트 박스와 같이 우리가 자주 볼 수 있는 여러가지 웹 기술을 배울 수 있습니다.
서평
이 책은 HTML을 처음 접하는 분들 보다는 HTML을 어느정도 알고 활용을 하지 못하는 분들에게 추천을 드립니다.
책을 읽으면서 느낀 점은 실무를 하면서 조심해야 할 부분들에 대해 세세하게 짚어 주는 부분들이 마음에 들었습니다.
먼저 브라우저에 따라 서로 다른 디자인으로 보일 수 있는 부분에 대해서 처음 css 를 초기화 하는 법이라든지, 이미지 크기가 컸을때 로딩속도가 느려지면 실제 웹사이트에서는 고객의 이탈로 연계 되기 때문에 이러한 부분을 처리하기 위한 방법, 고해상도 이미지를 준비 할 수 있을때 팁과 같이 정말 실무에서 꼭 필요한 내용들을 알차게 준비했네요~
(특히 실무를 많이 해 보았던 분들만 알 수 있는 깨알 같은 정보들 예-무료이미지사이트,색상변환사이트,무료동영상 사이트 등 을 알려 주고 있어서 처음 실무 웹프로그래밍에 도전하시는 분들이시라면 많은 도움이 될것 같아요.)
또한 5개의 만들어진 사이트를 기반으로 해당 코드가 어떻게 쓰이는 지를 알아 보고 그것을 활용해서 변경되는 모습들을 살펴 보면서~
우리가 알고 있는 HTML을 다양하게 활용하는 모습들을 보면서 우리가 꾸미고 싶은 디자인을 어떤식으로 만들어 나가야 할 지를 생각해 볼 수 있는 책이었던 것 같습니다.
기존에 기초적인 HTML과 CSS에 대해 배웠다면 이 책은 실제 웹사이트를 보면서 다양한 css와 웹 디자인 기술을 배울 수 있도록 구성을 하였다. 책에서 간단하게 HTML과 CSS의 기초 부분을 구성해 놓긴 하였지만 세세히 이책을 따라가기 위해서는 기초적은 HTML과 CSS에 대해서는 알고 있는 초보분들이 웹사이트를 구성할 때 좀 더 다양한 기법을 공부하며 좀 더 자신의 분야에 업그레이드 하기에 좋은 내용들인것으로 보인다.
![[상세이미지] 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인_700.jpg](https://www.hanbit.co.kr/data/editor/20220527163625_ubgcdnug.jpg)
저자
)
예제소스