책소개
웹 디자이너는 아름답게 디자인한 웹 페이지를 사용자에게 보여주고 싶어합니다. 하지만 완성된 웹 페이지는 웹 디자이너가 처음 생각한 디자인과 완벽하게 같지 않은 경우가 많습니다. 디자인대로 구현할 수 없거나 디자인대로 구현하면 문제가 생길 수 있는 경우 마크업 개발자는 웹 디자이너에게 디자인 변경을 요청합니다. 웹 디자이너는 의도한 디자인이 제대로 구현되었는지 마크업 결과를 확인하고 필요한 경우 적절하게 디자인을 변경합니다. 이런 커뮤니케이션은 웹 서비스를 개발하고 테스트하는 단계까지 계속됩니다.
만약 어떤 디자인은 구현할 수 있고 어떤 디자인은 구현할 수 없는지, 브라우저가 어떤 것은 표현할 수 있고 어떤 것은 표현할 수 없는지 웹 디자이너가 잘 알고 있다면, 웹 디자이너와 마크업 개발자 사이에서 불필요하게 반복되는 커뮤니케이션을 줄일 수 있을 것입니다.
이 책에서는 다음과 같은 내용을 다룹니다.
- 디자이너와 마크업 개발자의 작업 환경
- 사용자의 인터넷 이용 환경
- HTML과 CSS로 구현할 수 있는 디자인과 구현할 수 없는 디자인
- 웹 서비스 검수 시 주의할 점과 유용한 도구
목차
1. 왜 웹 디자이너가 원하는 대로 구현되지 않는 건가요?
1.1 웹 디자이너와 마크업 개발자의 대화
1.2 웹 디자이너와 마크업 개발자의 작업 환경
1.3 사용자의 인터넷 이용 환경
2. 텍스트
2.1 글꼴
2.2 크기와 모양
Q1. 꼭 웹 안전 글꼴을 사용해야 하나요?
Q2. 웹 글꼴을 사용하면 안 되나요?
Q3. 모바일용 웹 페이지에서 가느다란 글꼴을 사용하면 안 되나요?
Q4. 글자 크기를 13픽셀로 설정하니 이상하게 보여요.
Q5. 한글과 영문이 섞여 있는 텍스트에서 영문만 색이나 크기를 다르게 할 수 있나요?
Q6. 마크업이 변경될 때 텍스트 위아래 여백이 왜 달라지는 건가요?
Q7. 브라우저의 종류에 따라 위아래 여백이 달라 보여요.
Q8. 한글과 영문에서 위아래 여백에 차이가 나는 이유는 뭔가요?
Q9. 가변적인 텍스트 마크업 가이드에는 적당한 값을 넣어두면 안 되나요?
Q10. 한글과 영문이 섞여 있는 텍스트의 자간을 -1픽셀로 설정했더니 영문만 겹쳐요.
Q11. 말줄임표로 인한 공백과 말줄임표의 위치를 맞출 수 없나요?
Q12. 텍스트에 커닝 옵션을 적용할 수 없나요?
Q13. 밑줄의 위치와 색, 모양을 조정할 수 있나요?
Q14. 줄이 바뀔 때 단어가 잘리지 않게 할 수 있나요?
Q15. 툴팁 도움말 위치나 색을 변경할 수 있나요?
3. 이미지
3.1 이미지 형식
3.2 CSS로 만들 수 있는 그래픽 요소
3.3 배경 이미지
3.4 섬네일 이미지
3.5 버튼 이미지
Q16. 모바일용 웹 페이지는 왜 이미지를 2배 크기로 만들어야 하나요?
Q17. 포토샵의 블렌딩 효과는 적용할 수 없나요?
Q18. 블러 효과를 적용할 수 없나요?
Q19. 이미지 모서리를 둥글게 만들거나 동그란 이미지를 만들 수 있나요?
Q20. 마스크 효과를 적용할 수 있나요?
4. 선
4.1 선 스타일
Q21. 표의 세로선이 가로선에 끊어진 것처럼 보여요.
5. 사용자 입력
5.1 폼 요소
Q22. 폼 요소를 직접 만들거나 이미지를 폼 요소 위에 덮어씌워서 사용하면 안 되나요?
Q23. 클릭 영역에 점선이나 파란 선이 안 보이게 할 수 없나요?
Q24. 모바일용 웹 페이지에서 터치 영역 표시를 없앨 수 없나요?
6. 레이아웃
6.1 고정형/유동형/반응형 레이아웃
6.2 모바일 기기의 세로 모드와 가로 모드
Q25. 모바일용 웹 페이지는 왜 모든 픽셀 단위 숫자를 짝수로 지정해야 하나요?
Q26. 한 영역에 고정 너비와 유동 너비를 섞어서 사용할 수 없나요?
Q27. 모바일 화면에서 레이아웃이 틀어져요.
7. 부록
7.1 웹 페이지 검수 시 미리 확인할 사항
7.2 웹 페이지 검수에 유용한 도구
7.3 웹 디자이너가 알아두면 좋은 CSS 속성
