[책] 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인
완성된 웹사이트로 배우는 HTML & CSS 웹디자인
| https://www.hanbit.co.kr/store/books/look.php?p_code=B9882279606&tid=review |
권장 등급 : 초중급 (HTML, CSS 기초 학습을 마친 분)
- 저자 : Mana(일본) / 번역 : 신은화
- 출간 :2022-05-10
- 페이지 :360 쪽
리뷰
"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."
웹서버 개발 중 화면 작업을 하는데
좀 처럼 마음대로 되지않아 헤매고 있었서,
가장 최근의 책이기도 했고,
실무적인 HTML&CSS책을 찾던 중 고르게 되었다.
저자는 일본 분이시다.
일본사이트에 대해 잘 몰라서 사실 좀 어떨까하는 궁금함도 있었다.
(뭐 그건 그렇게 중요한게 아니었지만...)
[ 주의할 점 ]
웹퍼블리셔이나 프론트엔드를 준비하시는분들에게
기초를 배우고 나서, 바로 다음 책으로 추천할만하다고 느꼈다.
첫 책으로는 기본적인 것들이 부족한 부분이 있을 수 있다.
그렇지 않으면 잘 활용하기 어려울 수도 있겠다 싶다. : )
나의 경우 예를 들면, p148쪽 푸터 다는 부분에서
책에는 텍스트가 브라우저창 높이보다 짧아도 + 푸터가 최하단으로 가는 것만
나와는데, flex : 1; 이 어떤 의미인지 별도로 알려주진 않는다.
(사실 내가 원하는건, "텍스트가 브라우저창 높이보다 짧아도 + 푸터가 최하단으로 가는 것 +
텍스트가 길어져도(스크롤이 생겨도 ) + 푸터가 최하단으로 가는 것 +
스크롤이 생기면 푸터가 브라우저 창에 무조건 보이는게 아니라 텍스트 맨 아래 있는 것"
이런 요구 조건들이 있었는데, display나 flex 등등의 CSS적인건 책 없어서 별도로 찾아 다시 공부해야 했다. )
[ 좋은 점 ]
가장 마음에 들었던 부분은 구성에 있다.
현재 현실 웹사이트에 기반해서 어떻게 만들 수 있을까라는 컨셉과
저자의 실무 노하우들이 듬뿍 담겨 후배에게 알려주는 것 같은 인상이 들었다.
단어 약어 쓰는법, 클래스명 네이밍 짓는법,
무료로 사용하는 글꼴, 아이콘사이트, 다크모드 대응하기 등등
곳곳에 훨씬 나은 코딩과 이미지를 쉽게 얻어 갈 수 있게 해준다.
(처음 나는 웹 개발을 배울 때, 이런 팁들로 얻기 용이한 환경이여서
적극 활용했고, 개발포트폴리오제작이나 취업과제에서 좋은 평을 받았었다 :)
(중요한 내용에 형광펜 그어진 부분도 학습지 같아서 좋았다.)
Sass도 정말 중요하고 막상 쓰기 쉽고 더 편리한데!!!
그런 부분들도 잘 소개되어서 흡족했다.
웹퍼블리셔가 따로 있는 일을 해봤는데 같이 Sass 공부해서
옮겨가며 적용했었는데 정말정말 효과적이었다!
[ 총평 ]
전반적으로, 내 프로젝트의 화면을 개선하고 싶을 때 틈틈이 보며 연습 해야겠다고 느꼈다.
목차
CHAPTER 1 웹사이트의 기본과 필수 도구
1.1 웹 페이지 구조
1.2 HTML 기초
1.3 HTML 속성
1.4 CSS 기초
1.5 CSS를 더욱 쉽게 관리하는 방법
1.6 자바스크립트 사용법
1.7 브라우저에 따라 다르게 보이는 차이
1.8 개발자 도구를 자유자재로 사용하기
1.9 앞으로 배울 내용
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 활용하기 ③)
CHAPTER 8 사이트 올리는 법과 문제 해결 방법
8.1 체크 리스트
8.2 오류 메시지 해결 방법
8.3 구현하다가 모르는 것이 있다면 웹사이트에 질문하기
끝