올해 초 프론트엔드 부트 캠프인 기업 강의를 들으면서, 프론트엔드의 필수 스택인 HTML, CSS 그리고 자바스크립트를 심도있게 배우게 되었다. 하지만 프론트엔드 특성상, 개발의 작업물을 포트폴리오로 구현할 수 있는 능력이 아주 중요하다고 느꼈고, 부트 캠프 이후에도 나만의 포트폴리오를 만들기 위해 시간을 쏟아야겠다고 생각했다.

올해 한빛미디어가 출간한 " 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인"은 프론트엔드를 공부하면서 부족하다고 생각되던 역량과 기술적인 부분들을 모두 채워줄 수 있는 책이었다. 우선 다섯 가지 예제의 프로젝트를 중심으로 나만의 결과물을 만들 수 있는 친절한 가이드인 동시에, 실무적인 응용 팁과 실전 지식들을 상당히 보완해줄 수 있다고 생각되었다.

이 책의 최대 장점은, 나만의 결과물을 혼자서도 문제 없이 만들어 낼 수 있다는 점이다. 다른 책들과는 달리 예제 하나하나 마다 설명이 정말 구체적이고 실무적인 팁들이 많아서 혼자 처음 입문하는 분들도 충분히 소화할 수 있다고 느껴졌다. 또한 다양한 예제들을 다루면서, 이를 나만의 것으로 응용하여 포트폴리오에 녹여낼 수 있는 부분이 많다고 느꼈다. 예전의 나처럼 포트폴리오에 어떤 프로젝트를 넣을지 고민되고 막막하신 분들에게 도움이 될 수 있고 특히 아직은 팀 프로젝트보다 혼자서 하는 프로젝트에 집중을 하고 싶은 분들에게 좋은 가이드가 될 것이라고 느꼈다.



		

		
	
	
 
	
 
	
 
	

		학습목표
	
	

		
개발자 도구에 대해 배울 수 있습니다.
		
calc 함수, Sass 등 코드를 효율적으로 작성 할 수 있습니다.
		
웹사이트를 만들 때 만날 수  있는 문제의 해결 방법을 배웁니다.
	
	

		대상독자
	
	

		
쌩 초보 웹 퍼블리셔
		
1인 개발자
		
웹 퍼블에 대한 기초가 부족 하신분들
	
	
 
	
 
	

		난이도
	
	
스트레스 받을만한 내용이 없어요.
	
그냥 따라하세요.
	
따라서 코딩 하면서 연습을 많이 하면 될만한 난이도입니다.
	
 
	

		내용
	
	
내용은 웹사이트 제작 순서, 개발자툴 사용방법, 여러가지 예제를 실습, Emmet 사용법, 문제 해결방법으로 나누어집니다.
	
 
	

		

			1장 웹사이트의 기본과 필수 도구
웹사이트의 개발 순서와 개발자툴을 배울 수 있습니다.
		
		

			2장~6장 여러가지 실습
예제를 통하여 레이아웃, 폼, 표, 그래프, 이미지 등을 배울 수 있었습니다.
저는 기초가 부족하여 레이아웃이 가장 어려웠는데 이 책을 읽고 나서 이해를 할 수 있었습니다.
		
		

			7장 Html과 Css를 더 빠르고 쉽게 관리하는 방법
			

				
Emmet: css 구조로 html 뼈대를 쉽게 만들 수 있게 도와주는 라이브러리
				
calc 함수: 이 함수를 배우기 전에는 계산기 프로그램을 항상 띄워 두고 있었습니다. 신세계입니다.
				
sass: 이 책을 읽기전부터 알고 있었던 기술이었습니다. css를 좀 더 개발자의 관점에서 접근 할 수 있게 만들어진 기술입니다. 개인 프로젝트보다는 회사의 템플릿 작업에 도움이 많이 됩니다.
			
		
		

			8장 사이트 올리는 법과 문제 해결방법
사이트를 배포 하기 전 validator를 통하여 문법 오류등을 파악 하고 해결 하는 방법을 가르쳐주고 있습니다.
8장에 포함 된 체크리스트는 초보들이 실수 하고 점검 해볼 수 있도록 도움이 많이 될듯 합니다.
		
	
	

		그 외...
	
	
이번에는 e-book으로 책을 읽게 되었습니다.
	
저의 경우는 테블릿으로 읽었는데 확실히 종이책보다 잘 안읽혀졌어요.
	
하지만 책을 가지고 다닐 필요 없이 언제든 시간이 날때마다 꺼내서 볼 수 있었다는 장점도 있었습니다.
	
그리고 챕터의 마지막에는 항상 연습 문제가 있는데 꼭 풀고나서 다음 단원으로 넘어가세요.
	
이해 하지 못하고 넘어 가면 다음 챕터에서 포기 하게 될거에요.

머릿속에는 만들고 싶은 웹사이트의 구체적인 이미지가 있지만 이를 표현하기 어려운 사람을 대상으로 만들어진 책입니다.

​



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 웹 디자인

5개 예제로 배우는 효율적인 웹사이트 제작 노하우  | Mana

"HTML과 CSS 기초를 알고 있지만 실제 웹사이트를 만들려고 하면 손이 안 움직여요."

"이 웹사이트처럼 만들고 싶은데 어떻게 해야 하는지 모르겠어요. " - 지은이의 말

내 마음을 표현 글이었다. 리뷰어를 신청하지 않으려다가 요번 연도 마무리는 홈페이지 개설을 목표로 해보려고 신청했다. HTML의 태그를 읽고 찾아보면 대충 아는 실력, 어중간한 실력인지라 좀 더 체계적으로 공부하고 싶었다.

책 제목처럼 5개의 예제를 통해 HTML 등을 배운다.

랜딩페이지를 통해서 반응형 웹 디자인과 글꼴에 대해 알 수 있다. 전체적으로 어떻게 구성할 지를 소개한 후 그 부분에 사용한 HTML이나 CSS 기술 및 디자인에 대해 설명해 준다. 

왜 이런 레이아웃을 사용하는지에 대한 설명이 나온 점이 좋다. 1단 레이아웃의 장단점을 소개하고 어떠할 때 사용해야 하는지는 실무가 아니면 어디서 배우기가 싶지 않다. 노랑 형광펜으로 체크가 되어 있어서 눈에 띤다.

tip 부분도 꼼꼼히 봐두면 좋다. 예시를 통해서 사진 트리밍을 어떻게 해야 더 세련된 웹 사이트가 되는 지 눈을 높일 수 있다. 제작할 때 도움이 될 것 같다. 웹사이트 뿐만 아니라 디자인에서 두루두루 사용할 수 있는 팁이다. 

친절하다고 느낀 점은 소스를 어디에다가 넣어라에서 끝나는 게 아니라 어디에 어떻게 들어갔는지 보여준다. 초보자들이라면 헷갈릴 부분을 정확하게 보여주는 게 좋다. 

글꼴에 따른 디자인 차이 부분도 그냥 넘어갈 수 있는데 세심히 설명한다. 디자인 어느부분에 빠지지 않는 요소라서 꼭 필히 봐야하는 부분이다. 이러한 한 가지 한 가지가 모여 예쁘고 세련된 웹 사이트가 완성되는 것을 느낀다.

요즘은 스마트폰, PC, 태블릿에 따라 화면이 달라지는 반응형 웹에 대한 설명과 스크롤 할 때 보여주고 싶은 기능 등을 추가해 보면 금방 하나의 웹 사이트가 만들어 진다. 

마지막에 있는 커스터마이징은 학습 한 내용을 활용해 볼 수 있도록 도움을 준다. 비슷한 예제로 커스터마이징해 보면서 내가 배운 것을 확인할 수 있도록 구성되어 있다. 

혼자 학습할 수 있도록 설명과 구성이 되어 있다. 디자인하면서 배우는 구성이 첨가되어 있어서 웹디자이너가 되고 싶은 사람이라면 읽고 따라 해보면 좋을 것 같다. 

​

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

​

#html #css #웹디자인 #한빛미디어 #나는리뷰어다 #홈페이지 #올해에는 #꼭 #해보자 #직장인스타그램 #책 #북 #열공 #책스타그램 #북스타그램



“완성된 웹사이트로 배우는 HTML&CSS 웹 디자인”은 책 이름 처럼 완성된 웹사이트로 HTML과 CSS를 배울 수 있는 책입니다. 그동안 홈페이지를 여러 개 제작한 경험이 있지만 레이아웃이 동일한 사이트를 이미지와 텍스트만 바꾸는 형태여서 이 책을 통하여 다양한 홈페이지 제작 기술을 습득하고자 하였습니다.

랜딩페이지, 블로그 사이트, 회사 사이트, 이벤트 사이트, 갤러리 사이트로 이어지는 구성인데 점진적으로 기술을 익힐 수 있도록 저자께서 많이 신경쓰셨다는 것을 알 수 있었습니다. 정말 초보자도 이해하기 쉽게 이미지와 코드 설명이 친절하며, 내용 하나하나가 버릴 것이 없을 정도로 저자의 웹 제작 노하우를 아낌없이 설명해주십니다.

평소 헷갈렸던 가상 요소에 대해서도 정말 이해하기 쉽게 설명되어 있고, 스크롤에 맞춰 따라오는 기술이라든지 애니메이션 구현 방법은 실무에서 바로 적용해 사용해볼 정도로 활용도가 높은 내용들이 많았습니다.

웹 디자이너 또는 웹 퍼블리셔가 되고자 하는 분들에게 매우 강력히 추천합니다.

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

처음 개발쪽에 관심을 보이고 접하게 되는 부분이 html & css입니다.

화면에 보여지는 html요소는 쉽게 개발적인 흥미를 보이고, 관심을 느끼게 됩니다.

그러면서 자연서럽게 css요소의 학습하게 됩니다.

html/css은 컴파일 하지 않고, 잘못되어도 오류가 발생하지 않기 때문에 조금더 편하게 개발이라는 분야에

접근할수 있고, 오래된 기술이기 때문에 시중에 책도 많이 있습니다.

이책에서는 기존의 html책들과 다른점이 무엇이고, 협업에서도 도움을 받을 수 있는 부분이 무엇이 있을까

하는 부분으로 책을 살펴보았습니다.

■ 책 구성

· 책의 부제는 "5개 예제로 배우는 효율적인 웹사이트 제작 노하우" 입니다.

이 부분이 이 책에서 내용을 쉽게 전달하기 위한 방법입니다.

웹사이트는 보통 많이 사용하는 패턴이 있습니다. 이러한 가장 많이 사용하는 구성을 Template이라고 하는데

이러한 구성중에 5가지를 학습하면서, 기본에 충실하고 다양한 활용법을 가질수 있습니다.

TemplateA의 요소를 TemplateC에서도 적용하여서 구성할수 있습니다.

• chapter2 : 랜딩 페이지
• chapter3 : 블로그 사이트
• chapter4 : 회사 사이트
• chapter5 : 이벤트 사이트
• chapter6 : 갤러리 사이트

■ 대상 독자

· 이 책의 대상은 html / css를 조금 알고 계신데, 막상 활용을 하기에 어려우신 분들이 많은 도움을 받으실거 같습니다.
· 실무에서 도움되는 좋은 개념과 현실적인 설명이 있습니다.

  예를 들어 화면에 동일한 Layout을 가진 화면도 다양한게 구성할수 있습니다. 
  그런 부분에서 조금더 활용도 높은 방식을 예제를 통해서 학습하실수 있습니다.

· 화면기획에 업무를 하시는 분들도 어떻게 하면 화면구성을 하는것이 좋을지 "여러 고려사항"을 알아보실수 있습니다.

· 책의 내용이 어떠한 요소를 기술적으로 설명하는것이 목적이 아닌, 화면구성을 위해서 무엇을 해야 할지를 기술적으로 알려주는것으로 생각이 되어서 조금더 현업에서 도움이 되는 내용이 많았고 설명도 친절하게 잘 구성되어 있습니다.

웹디자인 계열에 관심이 있으신분들에게 소개해드리고 싶은

책 한권이 있어서 추천해드려볼까합니다!

한빛미디어의 도서이구요

개인적으로는 고등학교때 수업시간에 진짜 잠깐 배웠던 기억만 살짝 남아있고

솔직히 학교다닐땐 크게 관심을 갖진 않았던 것 같아요

기초부터 차근차근 배우는것도 좋지만

혹시나 당장 따라해보거나 실무가 급하다하시는분들에게

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

5개의 예제로 배우는 효율적인 웹사이트 제작노하우

이 책이 조금은 도움이 되지 않을까 생각이 드는데요

웹사이트, 웹디자인, 모바일프로그래밍 등

생각보다 HTML 이걸 사용할때가 종종 있는 것 같더라구요

요즘은 거의 저도 사용하지 않지만

옛날에 블로그할때 이 명령어를 직접 입력하면서 했던 기억도 솔솔ㅎㅎ

차례를 살펴보시면 총 8개의 챕터로 구성이 되어있으니

하나씩 천천히 따라해보시면 될 것 같아요

웹사이트의 기본과 필수 도구에 대해서 먼저 알아야겠죠?

HTML이 무엇인지, 파일구조는 어떻게 되어있는지, 기본적인 작성법은 어떤건지 등등

한빛미디어 홈페이지에서 예제소스를 다운받아서 직접 책을 보고 따라해보신다면

실습도 되면서 이해하는데 더 빠른 도움이 될 수 있을 것 같아요

2번째 챕터에서는 랜딩 페이지로 배우는 반응형 웹디자인과 글꼴인데요

랜딩? 반응형? 이 단어도 많이 들어보셨겠죠?

그리고 한글 글꼴을 사용할때 주의할 점도 친절하게 알려주는데요

아무래도 선택할 수 있는 한글 글꼴이 영어 글꼴에 비해 제한적이라고하더라구요

무료로 사용할 수 있는 글꼴들을 활용해서 꾸미는것도 한방법이 될 수 있을 것 같아요!

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

이게 지금 현재 저한테 그나마 제일 익숙한 챕터가 아닐까 싶었는데요 ㅎㅎ

먼저 샘플블로그 사이트를 살펴보시면서 레이아웃에 대한 이해를 하는것도

블로그나 웹사이트 운영하시는데 도움을 받을 수 있답니다

연습문제들이 각 챕터마다 있으니깐 꼭 해보세요

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

기업들도 이제는 홈페이지가 다 하나쯤은 갖고 있잖아요?

그래서 이걸로 먼저 공부를 해보신 후에

본인이 관심이 있는 회사의 사이트를 살펴보시면서 이건 이렇게 되었겠구나~

어느정도 눈에 보이지 않을까 생각이 되네요

네이버나 다른 포털사이트 등에서 아마 많이 보셨을 것 같은

특정페이지와 애니메이션!

이건 저는 한번도 해보지 않았고 할일이 딱히 없었다고 봤는데요

그래도 나중을 위해서 CSS로 페이지 안에서 부드럽게 움직이는 애니메이션 등을

혼자서도 만들어볼 수 있지 않을까합니다

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

아마 이 부분이 제일 중요하지 않을까 생각이 되는데요

만들어두고 관리를 하지 않는다면 그건 가치가 1도 없게 되는거니깐요

여기서는 다양하게 할 수 있는 방법들에 대해서 알려주기때문에

한번 꼭 읽어보시면 도움이 되실 것 같아요

마지막 챕터에서는 사이트 올리는 법과 문제 해결 방법에 대해서 알아볼 수 있는데요

만들어두고 사이트 올리는걸 모른다면? 그것만큼 당황스러운 일은 없겠죠?

체크리스트가 있는데 이걸 보고 차근차근 해결하는데 도움이 될 수 있어서

왠지 모르게 든든하더라구요 ㅎㅎ

또 오류 메세지 해결법과 구현하다가 모르는게 있따면 웹사이트에 질문하기 등이 있는데

이것 역시 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인 이책을 보시면 알 수 있구요

약간의 노력과 함께 극적인 효과를 내는 마법의 한줄을 찾아주는

웹사이트 제작노하우를 조금 더 이해하기 쉽고 접근하기 쉽게 알려주는

책을 찾고 계시는 분들에게 추천해드립니다!

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

> 진행에 앞서

흔히들 코딩이라고 하는 영역에 이것을 넣으면 비웃어버리는 영역이 있다.

바로 HTML이 그것이다.

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의 문법을 공부했기 때문에 제대로 된 페이지를 만들고자 하는 사람

- 일반 백엔드 개발까지는 알고 있으나, 웹페이지를 만들지 못해서 표현을 하고싶은데 제대로 하지 못하고 있다고 느끼는 사람

- 웹 페이지 기본은 알고 있으나 전체적인 흐름 및 디버깅, 팁 등을 알고싶은 사람

> 개인적인 평점

- 가격: 8 / 10

- 내용: 8 / 10

- 디자인: 8 / 10

- 구성: 9 / 10

> 정보

저자: Mana

옮긴이: 신은화

출판사: 한빛미디어

가격: 22,000원

전체 페이지: 359페이지

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

나는 백엔드개발자라 FE개발에대해 잘 알지 못한다.

평소 홈페이지하나를 혼자서 만들어볼 생각을 자주하지만 그때마다 걸리는게

HTM와 CSS를 이용하여 화면꾸미는게 제일 큰 난관이었다. 

물론 각 언어별 문법을 익히고 있어야하는것도 중요하지만 효율적으로 작업하는것도 매우 중요하다.

​

이 책에서는 마크업 언어애대한 설명도 있지만, 실무에서 쓸만한 마크업 규칙,  디버깅방법 등

실제로 작업하면서 참고할 만한 요소들이 제법 들어있어

실무에 도움될 팁들이 많이 들어있다.

​

​

대상 독자

HTML, CSS언어에 대해 어느정도 숙지한채로 이 책을 보면 좋을듯 하다.

HTML, CSS 기초 학습을 마친 사람

기본에서 한 단계 더 나아간 웹사이트를 제작하고 싶은 사람

애니메이션 등 움직이이 있는 웹사이트를 만들고 싶은 사람

효율적인 코드 작성법을 알고 싶은 사람

독학 시 마주하는 문제의 해결법을 배우고 싶은 사람

​

​​

챕터구성

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

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

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

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

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

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

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

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

목차를 보면 알겠지만 HTML과 CSS에대한 기본 문법, 언어 사용법을 사용하는 방법을 알려주는 책이 아니라,

기본적인 HTML, CSS를 숙지하고 있는 상황에서 웹페이지를 좀 더 잘 꾸미는 방법을 안내해 주고있다.

물론 완전히 없지는 않고 어느정도는 알려주고있지만 책의 주된 내용은 HTML과 CSS의 응용방법에 대한 설명으로 되어있다.

당연하게도 디자인이 설명되어있기에 책은 전체 풀칼라로 되어있다.

​

각 도표 및 스크립트 안에서도 색상이 나눠져있어 설명하는데 혼선이 생기지 않아 보기좋게 되어있었다.

​

​

요즘 많이 쓰고있는 다크모드, 반응형사이트 등 유행하고있는 기능적용방법을 몇가지 설명해주고있다.

​

​

아무것도 없는 상태에서 무슨 사이트를 어떻게 만들어볼까 에서 멈춰있다면

이 책을 보고서 천천히 따라하면 나름 만족하는 사이트를 구축해볼 수 있을 듯 하다.

​

​​

예제코드

https://www.hanbit.co.kr/support/supplement_survey.html?pcode=B9882279606

​

​

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

​

 

저는 온라인 쇼핑몰을 관리하고 있습니다.

온라인 쇼핑몰을 운영할 때는 사진편집을 위해서 포토샵을 기본적으로 숙지해야 하고요.

몰의 쇼핑몰에서 사진을 바꾸거나 글씨체나 두께를 변경하는 등의 기본적인 것을 행할 때는 HTML을 쓸 수 밖에 없어요.

그리고 쇼핑몰의 레이아웃을 변경할 때는 CSS를 사용하구요.

이처럼 간단하게 쇼핑몰을 편집하기도 하지만 웹사이트를 간단하게 만들어야 하는 경우도 생기죠.

하지만 HTML과 CSS 기초를 알고 있다고 하더라도 실제 웹사이트를 만들려면 막막한 경우가 많아요.

그리고 또 머릿속에는 만들고 싶은 웹 사이트가 있지만 표현하는 방법을 모르는 경우도 많구요.

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

웹사이트를 꾸밀 수 있는 방법 뿐만 아니라 더욱 효율적으로 웹사이트를 만들기 위한 기술, 팁 등을 더 나아간 기술로 담았다고 합니다.

너무 긴 코드나 복잡한 방법은 피하고 HTML이나 CSS를 이제 막 배우는 기초분들이 다음 단계로 나아가는데 도움이 될 수 있는 책이라고 합니다.



​
 

​
 



이 책은 대표적인 웹사이트를 종류별로 나눠 어떤 디자인을 어떻게 적용하면 좋을지 차근차근 설명합니다.

샘플 코드를 활용해 하나하나 따라가다보면 이를 응용하여 무궁무진한 디자인의 웹사이트를 만들 기반을 다질 수 있을 것이라 합니다.



​
 



옮긴이는 이 책을 번역하면서 과거보다 훨씬 더 풍부하고 쉽게 웹사이트 디자인이 가능함을 느낄 수 있었다고 해요.

이전에 이 책을 접했더라면 좀 더 효율적으로 개발 기간을 단축할 수 있지 않았을까 하는 생각을 한다고 하네요.



​
 



이 책은 이미 완성된 다섯 개의 웹사이트를 보면서 여기에 쓰인 기술을 하나씩 알아가는 스타일로 구성했되었습니다.

또 장의 말미에는 연습문제와 커스터마이징 실습이 있어 실무에 가까운 훈련을 할 수 있습니다.

HTML과 CSS 기초를 배운 분이라면 한 단계 더 업그레이드하기에 딱 좋은 내용이라고 합니다.



​
 



이 책은 공부하는데 도움이 될 수 있도록 예제소스를 제공하는데요.

예제 소스는 한빛미디어에 제공하고 있어요.

한빛미디어 웹사이트를 방문하면 이 책의 예제 뿐만 아니라 더 좋은 자료도 훨씬 많이 보실 수 있습니다.



​
 



점선이나 곡선, 인덱스나 리스트, 헤더, 푸터 등 세부적으로 꾸미는 방법을 소개합니다.

하고 싶었던 디자인이 있었는데 어떻게 구현해야 할지 모르셨던 분이라면 좋을 것 같아요.



​
 



애니메이션 등 움직임이 있는 웹사이트를 만들고 싶으신 분들께 좋아요.

효율적인 코드를 작성하고 싶으신 분들,

독학 시 마주하는 문제의 해결법을 배우고 싶은 분들께 추천드립니다.

​

​

항상 CSS를 공부해야지 생각했었는데 이 책을 통해 많은 도움이 되었다.

​

책은 기본적으로 '약간은' 웹 개발을 해봤다는 것을 전제로 진행된다.

그렇기 때문에 HTML이나 CSS 속성에 대한 설명은 거의 없다.

그래도 웹 개발에 대한 기초 지식만 있으면 크게 어려움은 없다고 생각한다.

​

CSS의 모든 속성을 암기하는 것이 목표가 아니고 프로젝트에 바로바로 써먹을수 있는

레퍼런스를 원하는 경우라면 이 책이 도움이 될 거라 생각한다.

​

한참 구글 블로그의 THML과 CSS를 수정하며 블로그를 꾸미고 있던 차에 이 책을 받게 되었다. 한빛미디어의 따끈따끈한 5월 신간, '완성된 웹사이트로 배우는 HTML&CSS 웹디자인'이다. 둥글게 몸을 만 고양이 한 마리와 시크한 선인장이 덩그러니 놓인 심플하면서 예쁜 표지의 책이다. HTML&CSS를 공부하다가 보면, 내가 작업한 것의 결과물이 어떻게 나오는지 잘 몰라서 감이 잘 오지 않을 때도 있고, 완성된 부분의 어느 부분이 어떤 스크립트가 쓰였는지 찾기 어려워 수정이 어려울 때가 있다. 이 책은 완성된 웹사이트를 예제로 보면서 배울 수 있기 때문에 그런 면에서 좀 더 내가 원하는 걸 직관적으로 찾아서 볼 수 있다.

구상하고 있는 웹 사이트를 어떻게 구현해야 할지 구체적인 부분을 몰랐던 사람, 이 웹사이트의 이런 표현은 어떻게 하는 건지 구글링을 하고 소스 보기를 해보면서 남의 페이지를 탐닉하던 사람, HTML, CSS의 기초 학습은 마쳤지만 응용이 막막했던 사람, 애니메이션 등의 움직임이 있는 멋진 웹페이지를 만들고 싶은 사람, 같은 구현을 하더라도 코드를 효율적으로 작성하고 싶은 사람을 위해 이 책이 만들어졌다.

이미 HTML과 CSS를 배운 사람을 대상으로 하지만, 책은 친절하게 웹 페이지 구조부터 알려준다. 웹사이트를 만드는 순서는 어떻게 되는지부터 기초를 다시 한번 짚고 넘어간다. 솔직히 말해서 기초 교육이 안된 생초짜도 책만 따라 하면 흉내는 낼 수 있을 것 같은 수준으로 가르쳐준다.

구현을 넘어서 디자인을 어떻게 뽑으면 더 예쁘게 보이는지, 구글 블로그를 꾸밀 때 자주 사용되는 이미 제작된 웹사이트를 커스터마이징을 할 때는 어떻게 하는지 등을 책에서 배울 수 있다.

모바일 환경에서 반드시 필요한 '다크 모드'를 대응하는 방법에 대해서도 다루고 있다. 블로그 사이트를 예제로 레이아웃을 배울 수 있고 반응형 웹디자인을 하는 방법에 대해서도 다룬다. 이론으로만 배우던 HTML의 요소들을 적재적소에 어떻게 사용하는지를 이 책을 통해 배울 수 있다. 웹디자이너로서, 웹 개발자로써 일하게 되면 주로 사용할 다양한 예제들, 랜딩 페이지, 블로그 사이트, 회사 사이트, 이벤트 사이트, 갤러리 사이트 등을 예제와 함께 배울 수 있으며 관리법과 심지어 사이트 올리는 방법까지도 다룬다. 솔직히 책 분량에 비해서 책 내용이 과하게 친절하기는 하다. 그래도 책만 잘 따라 한다면, HTML과 CSS를 겉핥기로 배운 사람이라도 웹페이지 커스터마이징을 할 수 있을 정도로 만들어 주기 때문에 한 권쯤 가지고 있으면 정말 유용할 것 같다. HTML 사전류의 서적도 좋지만 이렇게 현업에서 바로 써먹을 수 있는 내용들을 충실하게 다룬 책이 소장 가치는 더 높다고 생각된다.

완성된 웹사이트로 배우는 HTML&CSS 웹 디자인. 이 책은 제목대로 이미 완성된 웹사이트의 코드를 분석하면서 공부를 하는 책입니다. 인터넷에서 자주 만날 수 있는 5가지 스타일의 웹사이트를 집중 분석합니다. 랜딩 페이지, 블로그, 회사 사이트, 이벤트 사이트, 갤러리 사이트가 그것입니다. 이 책을 구매하기전 나에게 필요한 책인지는 목차만 봐도 알 수 있습니다.

이 책은 HTML, CSS의 기초를 아주 간략하게 설명하고 바로 웹사이트에서 이러한 요소들이 어떻게 사용되는지 확인합니다. HTML, CSS 기초를 공부했는데 어떻게 써야하는지 잘 모르겠거나 자주 사용하는 필수 기능을 구현하는 노하우가 궁금한 사람에게 어울리는 책입니다. 이 책을 꼼꼼하게 읽어보면 웹사이트를 만들때 자주 사용하는 거의 모든 기능을 자세하게 배울  수 있습니다. 개인적으로 인상적인 부분은 아래와 같습니다.

레이아웃을 다루는 법, 풀사이즈 배경이미지, 다양한 글꼴, 아이콘 폰트, 반응형 웹 디자인, 특정 위치로 이동(스크롤)하기, 버튼, 인용문, 테두리, 네비게이션, 표, 폼 꾸미기, 그래프 그리기, 표로 데이터 표시하기, 블렌드 모드, 커스텀 속성(변수), 애니메이션, 그라데이션, 배경에 동영상 넣기, 이미지 필터 적용, 라이트 박스 출력, 다크모드 등 정말 다양한 CSS 효과를 책에서 만날 수 있습니다.

이 책에서 사용하는 예제코드는 개인용은 물론 상업용으로도 자유롭게 사용 가능합니다. 예제 퀄리티가 나쁘지 않기 때문에 간단한 웹사이트같은 경우에는 이 코드를 베이스로 조금 수정해서 개발하는 것도 괜찮을 것 같습니다.

챕터7에서는 좀 더 효과적으로 HTML, CSS 사용하는 방법을 배웁니다. 에밋으로 빠르게 코딩하기, CSS를 직관적으로 만들 수 있는 Sass 등을 설명합니다. Sass가 궁금한 분이라면 좋은 정보를 얻을 수 있을 것 같습니다. 결국 개발은 혼자 스스로 하는 것입니다. 아무리 공부를 해도 문제가 발생하기 마련인데 그 해결 방법은 챕터8에서 볼 수 있습니다.

완성된 웹사이트로 배우는 HTML&CSS 웹 디자인. 이론 중심으로 거의 모든 기능을 처음부터 설명하는 책은 이미 많이 있고 이론 자체는 간단하기 때문에 쉽게 배울 수 있습니다. HTML, CSS 특히 CSS 경우 이런 내용을 바탕으로 어떻게 사용하는지가 참 중요합니다. 그래서 실력향상에는 이 책처럼 쓸만한 사이트를 분석하며 배우는 것이 도움이 된다 생각합니다. 어떤 내용이 책에 있었는지 어렴풋이 기억해두고 다음에 개발할 때 참고하면 될 것 같습니다. 괜찮은 책이네요.

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

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

이 책은 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개의 예제 사이트에 한번 도전해 보세요.

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

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

HTML/CSS 기본 사용법을 알고 있음에도 웹사이트를 만드는 것이 막연하기만 한 이들을 위한 책이 나왔다.

바로 <완성된 웹사이트로 배우는 HTML&CSS 웹디자인> 책이다.   

​이 책을 읽으면 큰 도움이 될 대상 독자는 다음과 같다. 

- HTML, CSS 기초 학습을 마친 사람

- 기본에서 한 단계 더 나아간 웹사이트를 제작하고 싶은 사람

- 애니메이션 등 움직임이 있는 웹사이트를 만들고 싶은 사람

- 효율적인 코드 작성법을 알고 싶은 사람

- 독학 시 마주하는 문제의 해결법을 배우고 싶은 사람 접기

​

책의 저자인 Mana는 일본에서 2년간 그래픽 디자이너로 일한 뒤, 캐나다, 호주, 영국 회사에서 웹 디자이너로 근무했으며 현재는 웹사이트 제작을 강의하고 있다. 일본 알파 블로거 어워드를 수상했으며. 저서 <러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문>으로 2019년 CPU 대상 서적 부문 대상을 수상한 이력이 있다. 

이 책은 총 6장인데, 첫번째장은 웹개발에 필요한 기본 내용을 다룬다. 그 다음으로는 5개 예제를 통해 다양한 케이스를 익히게 된다. 

​

1. 랜딩 페이지반응형 웹 페이지를 만들기 위한 세부 설정과 폰트 조합을 알아보고 알아두면 편리한 아이콘 폰트도 배운다. 

2. 블로그 사이트점선, 곡선, 인덱스나 리스트, 헤더, 푸터 등 세부적으로 꾸미는 방법을 소개한다.

3. 회사 사이트자바스크립트 라이브러리를 활용해 그래프, 표 등 회사 사이트에서 자주 사용하는 데이터 정리 방법을 배운다.

4. 이벤트 사이트애니메이션, 블렌드 모드 등 사용자의 마음을 움직일 수 있는 표현 방법과 커스텀 변수 등 여러 사이트에서 응용 가능한 웹 디자인을 배운다.

5. 갤러리 사이트동영상, 다단 레이아웃, CSS 필터, 확대, 라이트 박스 등 자주 사용하는 여러 웹 기술을 배운다.

​

웹디자인 인플루언서인 저자 Mana가 알려주는 웹사이트 개발의 모든 것을 이 책을 통해 바로 당장 적용해볼 수 있다. 이 책의 특징은 클론코딩을 차용했다는 것이다. 클론 코딩은 이미 만들어진 페이지를 분석하면서 똑같이 따라 만들어 보는 방식이다. 각 디자인 요소에 적용된 HTML, CSS를 뜯어보며 익힌다. 프런트엔드에 입문했지만 막상 웹사이트를 만들려고 하면 손이 움직이지 않는 이들을 위해 너무 긴 코드나 복잡한 방법은 피했다. 이를 확인할 수 있는 연습 문제도 있어 직접 작성한 코드가 어떻게 반영되는지 확인 가능하다. 

​

이 책을 읽고 난 다음에는 주위 어떠한 요소나 여백과 상관없이, 심지어는 겹쳐 보이게 요소를 배치하고 플렉스 박스를 활용한 반응형 웹 디자인으로 다양한 화면에 대응 가능하며 복사 가능한 예쁜 폰트의 텍스트, 확대해도 깨지지 않는 아이콘을 제공하는 웹사이트를 만들 수 있다. 더 나아가 자바스크립트 라이브러리로 그래프를 그리는 방법, 그림을 직접 편집하지 않고도 CSS로 이미지 색을 바꾸거나 변형하는 방법, 배경에 동영상을 넣는 방법도 익힐 수도 있다. 

​

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

웹서버 개발 중 화면 작업을 하는데

좀 처럼 마음대로 되지않아 헤매고 있었서,

가장 최근의 책이기도 했고,

실무적인 HTML&CSS책을 찾던 중 고르게 되었다.

저자는 일본 분이시다.

일본사이트에 대해 잘 몰라서 사실 좀 어떨까하는 궁금함도 있었다.

(뭐 그건 그렇게 중요한게 아니었지만...)

[ 주의할 점 ]

웹퍼블리셔이나 프론트엔드를 준비하시는분들에게 

기초를 배우고 나서, 바로 다음 책으로 추천할만하다고 느꼈다.

첫 책으로는 기본적인 것들이 부족한 부분이 있을 수 있다.

그렇지 않으면 잘 활용하기 어려울 수도 있겠다 싶다. : )

나의 경우 예를 들면, p148쪽 푸터 다는 부분에서

책에는 텍스트가 브라우저창 높이보다 짧아도 + 푸터가 최하단으로 가는 것만

나와는데, flex : 1; 이 어떤 의미인지 별도로 알려주진 않는다.

(사실 내가 원하는건, "텍스트가 브라우저창 높이보다 짧아도 + 푸터가 최하단으로 가는 것 +

텍스트가 길어져도(스크롤이 생겨도 ) + 푸터가 최하단으로 가는 것 + 

스크롤이 생기면 푸터가 브라우저 창에 무조건 보이는게 아니라 텍스트 맨 아래 있는 것"

이런 요구 조건들이 있었는데, display나 flex 등등의

내용들의 설명은 책에 없어서 별도로 찾아 공부해야 했다...
다 알고 있을 거라는 전제일텐데, 이게 입문서는 아니다... 슬픔...)   

[ 좋은 점 ]

가장 마음에 들었던 부분은 구성에 있다.

현재 현실 웹사이트에 기반해서 어떻게 만들 수 있을까라는 컨셉과

저자의 실무 노하우들이 듬뿍 담겨 후배에게 알려주는 것 같은 인상이 들었다.

단어 약어 쓰는법, 클래스명 네이밍 짓는법,

무료로 사용하는 글꼴, 아이콘사이트, 다크모드 대응하기 등등 

곳곳에 훨씬 나은 코딩과 이미지를 쉽게 얻어 갈 수 있게 해준다. 

(처음 나는 웹 개발을 배울 때, 이런 팁들로 얻기 용이한 환경이여서

적극 활용했고, 개발포트폴리오제작이나 취업과제에서 좋은 평을 받았었다 :) 

(중요한 내용에 형광펜 그어진 부분도 학습지 같아서 좋았다.) 

Sass도 정말 중요하고 막상 쓰기 쉽고 더 편리한데!!!

그런 부분들도 잘 소개되어서 흡족했다.

웹퍼블리셔가 따로 있는 일을 해봤는데 같이 Sass 공부해서 

옮겨가며 적용했었는데 정말정말 효과적이었다!

[ 총평 ]

전반적으로, 내 프로젝트의 화면을 개선하고 싶을 때 틈틈이 보며 연습 해야겠다고 느꼈다.

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

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

본 도서는 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만으로 구현하여 조금 더 빠르고 반응성 좋은 결과물을 낼 수 있게 되어서 매우 만족한다.

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

현재 프론트엔드 공부를 하면서 UI의 중요성을 알게되었어요. 그래서 더 공부해보고싶다는 생각을 갖고있었어요.

예제 코드를 주기 때문에 처음부터 모든 걸 하나하나 하는 것 보다 시작을 수월하게 할 수 있습니다.

목차들만 봐도 웹페이지들의 사소한 부분까지 신경써서 만든게 느껴졌어요.

파비콘이라던가 글꼴에 대해서도 자세히 알려주고 참고할 수 있는 사이트들도 추천해줘서 좋았어요.

단순히 만드는 방법만 알려주고 끝낼 수 있는데

CHAPER 7,8에서 더 효율적으로 관리하거나 사이트에 올려보는법처럼 

구현하고 그 이상의 방법들에 대해서도 알려주더라고요.

그리고 공부하다보면 메타인지가 되었는지 헷갈리는데 그럴 때 알맞도록 

중간중간 연습문제들이 있어서 어디까지 이해했는지 확인하는데 도움이 됐어요.

답안도 파일로 다 주기때문에 복붙을 하고 넘길 수도 있는데 책에서처럼 코드는 직접 써보고 고민하는 시간이 가장 중요한것 같아요. HTML, CSS를 처음 시작하고 웹페이지 구현을 해보고싶다!! 하는 분들이라면 참고하기 너무 좋은 책이라고 생각합니다 :)

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

백엔드 개발을 하다보면

가끔 프론트의 페이지도 꾸며보고 싶어질 때가 있다

요즘 프론트엔드는 뷰, 리액트 등의 

좋은 프레임워크들이 있다

그럼에도 공통적으로 HTML과 CSS는 다뤄야 한다

그래서 이번엔 HTML, CSS 관련 책을 소개한다

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

이 책은 HTML & CSS 가 무엇인지 기본을 알고 있다면

그 다음 단계로 나아가기 위한 독자에게 추천하고자 한다

특히 독학으로 배우더라도 설명을 이해하기 쉽게 

설명해주고 있어 어려움이 없다

이 책을 완독할 경우 기본적인 수준부터

어렵지 않은 어느 정도의 랜딩 사이트를 개발할 수 있다

이 책의 구성은 다음과 같다

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

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

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

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

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

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

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

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

이 책을 읽고 난 다음에는

주위 어떠한 요소를 활용하여 배치하고

플렉스 박스를 활용한 반응형 웹 디자인으로 다양한 화면에 대응 가능하며

예쁜 폰트의 텍스트 및 아이콘을 제공하는 웹사이트 개발이 가능하다

또한 자바스크립트 라이브러리로 그래프를 그리는 방법

그림을 직접 편집하지 않고도 CSS로 이미지 색을 바꾸는 방법

배경에 동영상을 넣는 방법도 처리할 수 있다

사실 HTML과 CSS는 매우 쉬워보임에도

막상 실제 만들려고 하면 어떻게 해야 할지 모를 때가 있다

이러한 고민이라면 이 책을 나는 추천한다

이 책은 번역서임에도 번역이 매끄럽고

페이지 UI가 자세하게 설명하면서도

심플하고 깔끔하여 눈의 피로가 생기지 않는다

마지막으로

이 책은 HTML & CSS를 완전 모르는 독자보다는

가볍게라도 어느 정도 이해한 후에 볼 것을 권하고

이해는 했지만 실전에 활용하고자 하는 분들께 추천한다

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

이 책을 보면서 좋았던 것 하나!

꼭 필요한 것을 가지고 결과물을 만드는 것이었습니다.

예를 들면 되도록 이미지, 자바스크립트를 쓰지 않고

css 만으로 결과물을 만드는 것이죠.

그렇다고 어렵다거나 코드의 양이 많지 않습니다. 오히려 간결하죠.

이것이 내용에 대한 신뢰를 높여주었습니다.

'css로 이런 것도 가능하구나'하고 감탄하기도 했습니다.

이 책은 저의 경험과 지식의 폭이 얼마나 좁은지 알게 해주었죠.

내용을 얼마나 알차게 구성했는지 보여주었답니다.

눈에 보이는 것을 만드는데 매력을 느끼고

도전하고자 하는 분들에게 이 책을 추천합니다.

분명 저와 같은 감탄을 하지 않을까 하는 생각이 드네요 : )

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

​

안녕하세요~~!! #플랫폼디자이너 IT를 소개하는 #승호아빠 입니다.

​

5월 리뷰를 진행하도록 하겠습니다.

이번 리뷰를 진행할 책은 <완성된 웹사이트로 배우는 HTML&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에 대한 책은 수없이 많습니다.

하지만, 이 책은 초급 프론트엔드 개발자가 알아두면 매우 도움이 되는 방법들이 적나라하게 기술되어 있습니다. 실적에서 활용할 수 있는 꿀팁도 있구요. 초급 개발자라면 반드시 알아야하는 기초도 기술되어 있습니다. 또한, 예제 코드도 적절하게 제공하고 있어 책의 내용을 이해하는데 도움이 됩니다.

초급 프론트엔드 개발자에게 강력 추천합니다.

책 구성이 좋고 초보자가 따라할 수 있는 책이다. 읽으면서 몇 가지 부분을 정리해봤다.

1. 책 중간에 중요한 부분을 형광처리한 게 도움이 되었다.

자잘하게 내용이 많은데 이 중에서 뭐가 우선순위인지를 파악할 때 고려하면 좋겠다.

2. 1장에서 얇게만 알고있었던 html, css 기초지식 확인 할 수 있어서 좋았다.

대충 어디서 줏어들은 거 반, 실제 개발자 도구 뒤지면서 알아낸거 반으로 필요한 부분만 사용할 때가 있었는데 이번에 입문 강의를 듣는다는 생각으로 읽으니 체계가 잡혔다.

3. 모바일 사이즈에서 어떻게 보이는지 확인하는 부분이 나온 게 반가웠다.

최근에 뭘 하다가 알게 됐는데 이부분을 제대로 확인하게 되어서 유익했다.

4. 독학할 때 좋은 구성과 재료라고 생각한다.

혼자 봐도 따라하기 쉽고 책의 설명도 친절하다. 코드 제공이 되니 직접 다운받아서 VSC에서 열어보고 수정하면서 익힐 때 좋다. 또한 각 파트에서 부분적으로 바꾸면 어떻게 되는지도 버전을 나눠 제공하니 일단 눈으로 그 차이를 확인하기 좋다. 그러면서 자기 나름대로 코드를 변형하면서 기능적 차이를 느끼는 것도 좋겠다.

5. 고해상도 이미지를 준비할 수 없을때 대처할 수 있는 팁이 좋았다.
점무늬, 줄무늬 입히는 건 업무할 때 다른 경우에도 응용가능하다. 가끔 직접 이미지 수정해야 되는 경우가 있는데 써먹어봐야겠다.

6. FE랑 커뮤니케이션할 때 유용할 것 같다.

FE뿐 아니라 메인 페이지 등에 관여하는 타부서와도 커뮤니케이션할 때 전체 구조를 알고 있으면 주기적 개편이 있을 때 뭔가 이상한 부분이 생기면 정확한 용어로 문의할 수 있을 거라고 생각했다.

7. 장이 진행될수록 점점 구현 사이트 레벨이 높아진다.

천천히 따라하면 괜찮을 수준이다. 그리고 처음부터 기초적인 내용으로 가장 간단한 웹사이트를 만들어보면서 창조의 기쁨을 느끼게 한 다음 레벨을 서서히 올려가는 구조가 참 괜찮다. 나도 나중에 어떤 지식을 A-Z까지 설명해야 한다면 이렇게 단계적으로 내용을 추가하면서 전체적인 그림을 그릴 수 있도록 시도해보고 싶다. 

최신 웹 기술 책 하나 정도는 있으면 좋을 것 같고,

이번 달은 좀 쉬어가려고, 이 책을 선택한 것도 있다.

그런데 쉬기에는.. 내가 몰랐던 내용이 너무 많아서 힘들더라. ㅋㅋ

덕분에 최신 트렌드로 좀 업데이트하는 계기가 되긴 했다.

작가님이 일본 분이시지만 해외 여러 곳에서 근무해서인지 일본 책 느낌은 거의 못 받았다.

예시로 든 사이트 중 일본어 있는 사이트가 쪼끔 있었지만 별다른 위화감도 없었다.

책 말미의 체크리스트, 오류 처리 방법을 보면 일본인 특유의 꼼꼼한 같은 게 느껴졌다.

책을 보니깐 나의 라떼 시절에 비하면

이제는 CSS 기능이 막강해졌다는 느낌이 든다.

JavaScript로 구현 가능하던 것들 중 상당수가 CSS로도 들어왔다.

별 게 다 있더라. 짝수, 홀수 n번 요소에만 적용하는 법 등.

내가 알던 지식으로는 당연히 JS에서만 하는 건줄 알았던 게 CSS에서도 많이 적용되더라.

이미지로만 가능하던 것들(예쁜 글자 표현 등)도 CSS로 구현하더라.

PC/모바일 둘 다 적용하는 법 설명도 있으나, 이 부분도 추후에 필요하게 되면 참고하면 좋을 것 같다.

프론트엔드 개발이라는 분야, 퍼블리셔라는 직군이 생길 수밖에 없는 환경인 듯 하다.

각 챕터 마지막에는 연습문제가 있다. 머리 써가면서 실습할 수 있으니 참 좋은 책이더라.

지금 당장 난 웹디자인에 신경 써가면서 만들 일이 없으니(부트스트랩과 타뷸레이터 등등 사용해서 있는 것들 개선하는 수준) 예제 이해하는 위주로 진행했다.

새로운 것 많이 있는데 쓸 일이 있으면 좋겠다(아이콘 폰트, 타원 활용 등).

그러면 내가 회사에서 기본으로 하는 일 외에 좀 더 열심히 하겠다고 손 들어야 할 듯. ㅎㅎ

그리고 8장 부분이 특히 좋더라.

보통의 책은 전부 다 잘 된다고 가정하고 책을 썼는데

이 책은 안 될 때가 있을 때도 생각하고 트러블 슈팅하는 법도 있다.

다른 책에서 못 보던 부분이라 참 좋았다.

시간이 지나면 또 오래된 내용이 되겠지만,

리뷰 쓰는 지금 시점(2022년 5월)에서는 이 책 하나로 웹 디자인은 거의 다 다룬 것 같다.



* 챕터별 상세 소개는 제 블로그에 적었습니다. 참고 바랍니다.

https://blog.naver.com/pcmola/222751313501

내가 만들 수 있는 웹사이트를 보면서

거기에서 사용된 기술들과

그것들을 적용할 수 있는 방법들을

쉽게 배울 수 있게 해준다.

다소 기초적인 내용에서부터 출발하긴 하지만

랜딩페이지, 블로그, 회사용 사이트, 이벤트, 갤러리등

다양한 종류의 대표적인 웹사이트들을 대상으로

어떤 디자인이 어떻게 적용되었는지

차근차근 설명해준다.

HTML과 CSS, 웹 디자인에 대한 지식을

한단계 업그레이드하기에 부족함이 없이 딱 좋은

반응형 웹 페이지에 대한 설정과

폰트의 조합을 통해 꾸미는 방법들과

데이터를 정리하는 방법을 비롯해

애니메이션과 이미지, 동영상을 사용하는 방법과

HTML과 CSS를 관리하는 특별한 방법까지 설명해준다.

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

	
책 소개
	

		
책 제목 : 완성된 웹사트로 배우는 HTML&CSS 웹 디자인
		
글쓴이 : MANA
		
옮긴이 : 신은화
		
출판사 : 한빛미디어
		
초판 1쇄 : 2022년 05월 10일
	

	
책의 특징
	
해당 책은 노 베이스로 시작하여 차근히 웹 페이지를 빈속 부터 채워나가기 보다, 완성된 웹사이트들로부터 시작하여 웹 디자인 및 세부 UI 들에 대해 배워 나가는 방식을 사용하였다.
	
밑에 해당 방식의 장점을 자세히 서술할 것이지만, 잠시 먼저 말해보자면 이러하다.
	
물론 다른 기본서들이 그러하듯 5개의 예제들로 설명을 하고 있지만, 해당 책은 완성되어 있는 웹사이트와 비교를 하기 때문에 다소 설명을 하여도 이렇게 까지 할 수 있구나 이렇게 사용되는구나 하고 와닿지 않는 것들부터 실제 사이트들에서 쓰고 있는 색상표들까지 제공해 주고 있다.
	

		그렇기 때문에, 상대적으로 디자인에 대해 감각이 떨어기는 본인과 같은 개발자들이 참고하기 이렇게 좋을 수 없다.
아래 더욱 상세하게 특징에 대해 알아보도록 하자.


	
	

		[웹 프론트 초보를 위한 극한의 친절함]
위에서 잠시 언급했듯이 해당 책은 개발자들에게 디자인적으로 완성된 사이트들을 예시로 보여주며 센스있는 웹을 만들 수 있도록 매우 친절함을 보여주고 있다.
	
	

		그러나, 개발자들만을 위해 친절하면 섭섭할테니 디자이너를 위한 섬세함도 빼놓지 않았다.
	
	
웹이 어떻게 동작하는지에 대한 매우 기본적인 설명부터, 처음 개발을 시작하는 비개발자들을 위해 자주 변수명으로 쓰이는 영단어 약어와 자주 사용되는 클래스명들까지 섬세한 팁들을 잊지 않았다.
	

		기본적으로 모르면 주춤하거나 난감할 수 있을 것 같은 포인트들까지 잡아 미리 알려주는 친절함으로 디자이너나 비개발자들도 예제들과 함께라면 찬찬히 나아갈 수 있을 것이다.




	
	

		[개발자들을 위한 떠먹임]
개발자들이 웹사이트나 블로그 등을 개설 할 때, 가장 막막한 것이 디자인일 것이다.
	
	
물론 센스 있는 개발자들은 많겠지만 다수의 개발자들의 시간을 쏟게하는 것이 어떤 색을 사용할지, 어떤 애니메이션을 어떻게 사용할지, 어떤 레퍼런스를 찾을지일 것이다.
	

		그런면에서 해당 책은 생각을 읽기라도 한듯 "이런걸 보고 해봐!" 라고 떠먹여 주고 있다.
	
	

		폰트, 색상, 배치, 배경 크기 등 이렇게 한 사이트들을 참고할 수 있도록 하고, 어떤 사이트들에서 다운 받을 수 있다 라는 등 해당 책에서 소개하는 것들만 참고한다면 충분히 센스있는 사이트를 만들 수 있을 것이다.
	


	

		[지루하지 않은 예시]
예시들은 어느 개발서이든 많고 다양하다. 본인은 여러 기본서/개발서적들을 접해오며, 다양한 예시들을 보아왔다.
	
	
예시는 중간중간 많은 개념들로 지루할 수 있는 부분을 환기하는 역할로써 본인은 선호하는 편이기에 재밌는 예시들을 오아시스처럼 찾게된다.
	
해당 책은 그런 오아시스들이 다수 포진하고 있는데, 예를들어 귀여운 고양이들이 그것이다.

	
위의 예시들처럼 집사들만 알 수 있을 것 같은 섬세한 부분들부터 고양이들의 사진으로 중간중간의 분위기를 환기하고 있다.
	
그렇기에 개념들을 지루하지 않게 끝까지 읽는데 무리가 없는 것이 매우 큰 장점이다.
	
추천 대상
	
해당 책은 웹이 초보인 개발자들과 본인들만의 웹사이트를 만들고싶은 개발자들까지 큰 폭의 개발자들부터, 개발이 처음인 디자이너들에게 추천하고 싶다.
	

		개발자들에겐 센스있는 웹페이지를 만들 수 있도록 돕는 좋은 팁들을, 비개발자들에게는 웹개발을 하기 위한 베이스를 잡을 수 있도록 하는 좋은 기본서가 될 것이다.
	


	
책의 한줄평
	
센스있는 웹페이지 그 시작

물론 완독을 한다고 해서 마스터를 할 수는 없지만, HTML과 CSS에 정말 다양한 유용한 기능들이 많음을 알게되고, 사용할 수 있게 해줍니다.

책의 완성도도 높고, 무엇보다 쉽게 잘 쓰여져 있습니다.

이 책은 HTML, CSS 기초 학습을 마친 사람, 동적인 움직임이 있는 웹사이트를 만들고 싶은 사람, 효율적인 코드 작성법을 알고 싶은 사람 등을 대상으로 쓰인 책입니다.

초중급?정도 수준인 제 기준 새롭게 배울 수 있었던 애니메이션 효과들과 웹 기술들이 많았어요.저도 이 책으로 학습하면서 그동안 비효율적으로 코드 작성한 부분들이 꽤 있구나, 이런 애니메이션 효과는 이렇게 만드는 거였구나 하고 새로 많이 배우게 되었습니다.

웹 디자인 기술을 이용해서 사이트를 만들 때 도움이 되는 각종 웹사이트(clip-path 좌표계산 사이트 등) 정보도 매우 유용했는데요.

진짜 웹사이트 제작 시 도움 되는 사이트가 책에 많이 적혀있으니 공부하면서 다 즐겨찾기 해놓고 쓰시면 좋을것같아요.

클론 코딩 방식으로 완성된 예제 웹 사이트를 따라 만들며 html, css 공부를 할 수 있어서 굉장히 유용하다고 느낀 책! 

요즘 실무에서 많이 쓰이는 기술 혹은 요즘 유행하는 애니메이션 효과 빵빵한 사이트 모양들을 책 한 권으로 익힐 수 있어 좋았습니다.

html, css 기초를 막 공부하고 더 발전하려는 분들, 혹은 개인 포트폴리오 준비를 하면서 좀 더 동적인 웹 사이트를 만들어 보고 싶은 분들, 

독학으로 공부해서 내가 효율적으로 코드를 적고 사용하는지에 의문이 있던 분들은 <완성된 웹사이트로 배우는 HTML&CSS 웹 디자인>을 

꼭 한번 읽고 따라 해보면 좋을 것 같습니다.

** 본 리뷰는 한빛미디어 <나는 리뷰어다> 리뷰어 활동으로 도서만을 제공받아, 리뷰어의 주관적인 견해로 작성된 리뷰입니다. **

난이도 ★★☆☆☆ [2/5]

■별 2개를 준 이유

 갓 입문한 분들에게도 좋을 것 같은 느낌이 들었지만, 오히려 기본기를 살짝 놓치고 가신 분들에게 좀 더 추천해주고싶다.  왜냐하면, 글 내용이 매우 꼼꼼하여 초-중급자분들께서는 술술 읽힌다. (제가 그랬거든요) 

- 예시로 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는 가로로 적용이 가능하다. 이렇게 또 배운다.

기회가 되신다면, 한 번 정독하기에 좋다고 생각합니다. 감사합니다.

1. 기본부터 (chapter 1)

html, js, css 의 가장 기본적인 사용법을 배운다. 너무 상세한 속성 등에 대한 정보의 나열이 아닌 개략적으로 어떤 게 사용하는 지를 알려준다. 또한 효율적으로 웹사이트를 제작하는데  활용되는크롬 웹브라우저의 개발자 도구를 소개하고, 여러 기능 중 웹사이트 제작에 필요한 기능들에 대해서 설명 한다. 

2. 따라하며 배우기 (chapter 2~6)

웹 개발을 배우는 방법 중 가장 많이 하는 방법 중 하나가 클론코딩이다.  

이 책은 여러가지 사이트를 클론코딩 해보며 각 사이트가 어떤 특징을 지녔는지 또 그 특징을 구현하기 위해 html, js, css 를 어떻게 활용 했는지를 상세하게 설명 하고 있다.

또한 챕터의 마지막에는 해당 챕터에서 배운 부분에 대한 연습문제와 커스터마이징 해보기를 제공하여 단순히 따라하기에 그치지 않고, 한단계 더 나아갈 수 있는 방향을 제시 한다. 

커스터마이징의 경우 막연히 바꿔보라고만 하지 않고, 실제 고객의 요청 같이 보이는 구체적인 요구사항을 가지고 작업을 할 수 있도록 한다.

3. 좀더 편한 도구 소개 (chapter 7)

html, css 코딩의 편리함을 제공하는 도구인 에밋, css를 더욱 편리하고 효율적으로 구현할 수 있는 언어인 Sass 를 소개한다.

에밋의 태그 자동완성 기능은 사용하지 않으면 확실히 손해다.

4. 독학은 이렇게 (chapter 8)

마지막 챕터에서는 웹사이트 제작을 배우는 학생들이 실제로 자주 묻는 질문 목록 체크리스트를 제시하여 어떤 부분에서 오류가 발생하였는지 혼자 체크할 수 있도록 한다.

여러모로 독학하는 사람을 위한 배려가 많은 책이다.

웹사이트 제작 특히 html, css 를 처음접하는 사람에게 많은 도움을 주리라 본다.

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

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

웹사이트를 만들기 위해서는HTML / CSS를 필수적으로 알아야 한다. 대부분의 책들은 아무런 관련된 지식을 소개하고 있지만 만약 관련된 경험이 전혀 없다면 실제로 이론을 적용하는데 어려움이 있다. "완성된 웹사이트로 배우는 HTML&CSS 웹디자인"은 완성된 사이트를 먼저 제공하면서 흥미를 이끌어내고 이것을 구현하는데 필요한 기술을 배우기 때문에 초급이나 입문단계에서 효율적인 학습이 가능한 것 같다.

* 책 소개 및 구성

정말로 필요한 배경지식을 가볍게 소개하면서  5개의 웹사이트 예제를 보고 사용된 기술을 하나씩 학습하는 구성으로 되어있다. 빠르게 실습하기 때문에 초급자 대상으로 흥미롭게 느껴지기 때문에 효율적인 학습이 될 수 있을 것 같다. 예제를 잘 선정하여 웹사이트 구현에 필요한 지식을 적절하게 학습할 수 있다.

설명도 매우 구체적이며 이미지를 활용하여 잘 설명하고 있어 처음 시작하거나 취미로 접근한다면 가장 적합한 도서인 것 같다. HTML / CSS 또는 웹디자인의 경험이 있다면 단시간에 초급과정을 학습할 수 있을 것 이다. 초급과정이지만 실무에 필요한 내용 위주로 포함하고 있어 좋은 책인 것 같다. 그러나 CSS, HTML의 약간의 경험이 있다면 많이 쉬운 수준에 속하는 것 같다.

* 읽고 나서

웹사이트 제작에 호기심이 있을때 이 책을 읽는다면 많은 도움이 될 수 있을 것 같다. 복잡한 설명보다는 예제를 통해 자연스럽게 이해하는 학습이기 때문에 부담없이 읽어볼 수 있다. 약간의 시간을 투자로 웹 디자인이 어떻게 브라우저에서 실행되는 코드로 만들어가는 과정을 이해할 수 있다. 

오~래전에 CSS 공부를 조금 했었었는데, 완성된 웹사이트로 배우는 HTML & CSS 웹디자인 책으로 다시 공부하게 되었습니다. 책 표지도 이쁘고, 책 속의 구성도 좋아 눈에 쏙 들어오고, 설명도 잘 되어 있습니다.

★완성된 웹사이트로 배우는 HTML & CSS 웹디자인 책 내용에 CSS로 할 수 있는 여러가지 기능들이 너무 신기하고 멋졌어요

•기기의 화면 크기에 따라 디자인이 바뀌는 반응형 웹디자인에 쓰이는 미디어 쿼리 …84p

•스크롤이 멈추는 위치를 지정할 수 있는 스크롤 스냅…92p

•버튼, 이미지이 꾸밈을 이미지 프로그램이 아닌 CSS로 구현…105p~, 114p~

•가상요소를(::before ::after) 사용하여서 목록 앞에 공통 그림을 넣거나 하는 것…130p

•자바스크립트 라이브러리로 웹 페이지에 그래프 넣기…166p

•속성 셀렉터로 어떤 태그안에 어떤 속성에만 색을 지정하는 것(예:input 태그에 type이 이메일인 것들에만 색넣기 등)…188p~

•포토샵 레이어 블렌딩 모드 처럼 배경 이미지 글자 겹쳐서 효과 주는 것…204p~

•커스텀 속성 변수…212p

•CSS로 애니메이션 만들기 - 트랜지션…217p~

•사선모양의 box 만들기…233p~

​***  챕터별 내용은

챕터 1에는 웹사이트 기본인 HTML, CSS, 자바스크립트 소개와 기초 내용과, 크롬 브라우저에서 개발자 도구로 웹페이지의 HTML, CSS 보는 방법, 수정 방법들이  설명이 있습니다.

​챕터 2~6에는 완성되어 있는 5개의 사이트(랜딩 페이지, 블로그 사이트, 회사 사이트, 이벤트 사이트, 갤러리 사이트)를 보며 HTML과 CSS 소스를 보면서 사용된 기능들이 설명되어 있습니다. 

​챕터 7에는 HTML과 CSS를 빨고 쉽게 관리하는 방법에 대해 설명되어 있습니다.

챕터 8에는 사이트에 HTML과 CSS올릴때 체크리스트, 오류 메시지 해결법에 대해 설명되어 있습니다.

*** 각 챕터의 구성은

처음에는 이 챕터에서는 이런 내용을 공부할 것이다 하는 안내가 있고

그 뒤 부터는 안내된  순서대로 설명이 이어집니다.

챕터 글자, 제목 글자, 내용글자의 글꼴 크기 구성이 좋아 보기에 편하였습니다.

챕터 끝 부분에  공부 내용을 기반으로 연습해 볼 수 있는 연습문제가 있고, 

커스터마이징 연습 문제도 있습니다

***

★보통 책을 읽다보면 이거 중요한거 같은 데 적어놔야하는데 밑줄 쳐야하는데 색칠해야 하는데 등의 생각에 집중을 흐트러지게 하기도 하는데 중요 할거 같은 부분에 색으로 표시되어 있어 마음 편히 내용이 집중하며 읽을 수 있었습니다.

★그리고 눈에 잘 들어오는 내용 구성과 적당한 글자 크기와

기능 설명 내용이 있고, 그에 대한 HTML 소스와  CSS 소스 옆으로 나란히 두어서 바로 참고 하여 읽고 이해하기가  좋았습니다.

★또한 중간 중간 COLUMN, Tip 들이 있어,

그렇지 않아도 읽다가 궁금했던 점, 모르던  CSS 새 기능에 대한 설명들이 있어 흥미롭게 읽었습니다.

웹디자이너, 웹퍼블리셔 공부하시는 분 뿐 아니라 티스토리나 워드프레스 블로그, 온라인 쇼핑몰 등의 디자인을 좀 수정하려면 얼마간은 HTML와 CSS를 아셔야 하실 것이니 그 분들도 보시면 업무에 도움이 될만한 책이라고 생각합니다. 

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

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

필자는 웹 디자인을 직접 구현해보는 토이 프로젝트를 진행하고 있다. 어디선가 보거나 문득 떠오른 아이디어를 구현하는데 초점을 맞춘 프로젝트인데 사실 어느 시점에 아이디어가 바닥났다. 아마도 아이디어가 무에서 유가 아닌 지식을 바탕으로 떠오르는 현상에 기인한 듯 보인다.

이 책을 선정한 이유는 이러한 생각이 바탕이 되었다. 이 책을 통해서 새롭게 익힌 지식들이 새로운 아이디어로 확장될 수 있길 바랐고, 필요한 기능만 익혀왔던 필자가 모르고 지나쳤던 다양한 스타일링 방법을 익히면 좋겠다는 생각이었다. 그 관점에서 보면 좋은 책이다!

대상 독자

이 책은 웹사이트를 종류별로 나눠 어떤 디자인을 어떻게 적용할 수 있는지 설명한다. 개인적으로 책의 내용은 크게 어렵지 않다고 생각된다. 만들다보면 익힐 수 있을 수준이라고 생각되어 입문자-초급인 사람에게 추천하고 싶다. 개발적 지식보다는 단순히 구현하는 방법이나 디자인과 관련된 몇 가지 트릭을 다루고 있다. 따라서 개발에 대한 견문을 넓하는 목적이라면 이 책이 적절하진 않을 수 있다.

책에서 구현하는 결과물

아래는 대표적으로 책에서 구현하는 결과물이다. 각 이미지 아래에 페이지를 둘러 볼 수 있도록 링크를 걸어놓았다. 보면 알겠지만 느낌있는 디자인도 약간 구식으로 보이는 디자인도 존재하고 있다. 확실한건 무엇이건 응용하여 예쁘게 만드는 것은 개인의 역량으로 가능하리라 생각한다.

• Chapter 2 : 랜딩 페이지 #

• Chapter 3 : 블로그 #

• Chapter 4 : 회사 사이트 #

• Chapter 5 : 이벤트 사이트 #

• Chapter 6 : 갤러리 사이트 #

느낀점

내가 경험한 공부 방법은 2가지 정도인 것 같다. 잘 짜여진 커리큘럼 안에서 심도있게 공부하는 방법과 자신이 필요한 부분만 공부하는 방법이다. 후자의 방법은 자칫하면 파편화된 지식을 얻을 수 있다는 단점이 있지만 흥미와 동기를 얻을 수 있다는 장점이 있다.

이 책은 전자보다는 후자에 가까운 책이다. 어떠한 방향(완성된 웹사이트)을 제시해주고 그 방향에 맞는 것을 학습할 수 있도록 도와준다. 위에서 설명했지만 각 디자인을 만드는 단순한 방법을 제안하며 개발에 대한 심도있는 지식을 다루진 않는다. 어찌보면 웹 개발에 입문하는 사람에게 로드맵이 될 수 있을 것 같다.

나 역시 몰랐던 디자인 요령이나 방법에 대해서 새롭게 알 수 있는 계기가 되었다. 최초 이 책을 선택한 이유에 알맞은 결과를 얻을 수 있었다고 생각된다. 다시 처음으로 돌아가 이 책을 통해서 익힌 지식들로 새로운 아이디어를 다시 창출해 보려한다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

책을 읽기 전에

최근 웹 프론트엔드 개발에 관심이 생겨 공부할 방법을 찾고 있었는데, 마침 딱 맞는 책이라서 즐겁게 읽을 수 있었습니다.

프론트엔드의 기본기를 가장 충실하게

최근 웹 프론트엔드 진영에서 자주 사용되는 프레임워크로 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를 배웠다. 하지만, 실제 내가 원하는 웹사이트를 아직 만들지 못하고 있다.

웹사이트 스타일 내머리 속에 다 있는데 생각보다 이를 직접 HTML/CSS 로 구현할려면 쉽지 않다.

HTML은 웹 사이트를 만들기 입문이라고 하는데, 배우는 것과 사용하는 것은 사뭇 다르다.

이러한 고민은 나만 느낀것이 아닌듯 하다. 이책의 필자도 이러한 부분을 지적하고 있다.

이책은 HTML/CSS의 응용이 아직 서투른 사람들에게 좀더 쉽게 자신의 스타일로 웹사이트를 구현할 수 있는

팁들의 모음집이다. 다른 HTML책보다 그다지 두껍지 않다. 간단히 읽어볼 수 있을것 같다.

첫 장을 읽어 보았다. 내게는 너무 일반적인 HTML/CSS 기초 내용이었다. 왜, 이걸 넣었을까 했는데...

읽어보면서 css 이름의 코딩가이드, 자주 쓰는 영문 약자등을 설명해 준 것이 좋았다. 항상 이름을 어떻게

해야할 지 고민인데, 이런 사람들이 많이 있을듯 하다. 그리고 브라우저의개발자 도구들에 대해서 설명해 준것에도 유용했다. 

내가 작성한 코드가 어떻게 동작해서 화면이 출력되는지 좀더 구체적으로 디버깅이 가능할 것 같다.

5개의 셈플 사이트. 실제 따라해 보면서 실습할 수 있는 사이트와 코드들이 정리되어 있다. 레이아웃과 각 구성요소의 CSS 표현등

잘 정리되어 있다. 이를 잘 응용하면 이전에 막막하던 HTML/CSS 를 더 잘 사용할 수 있을듯 싶다. 웹 사이트가 한 두페이지가 아닌 

여러 페이지로 구성되어 있는 점을 생각해 보면, 하나의 전체 테마를 기준으로 설명해 주었으면 더 좋지 않았을까 하는 아쉬움도 있다.

기초 설명책이 아니라, 실제 웹사이트 구성을 위한 응용책이라는 점에서 매우 유용한것 같다. 책장에 오래 꽃여 있을듯 하다. ^.^