웹 디자인 이렇게 하면 되나요

 

p.10

구글 크롬, 모질라 파이어폭스, 애플 사파리 등의 웹 브라우저는 각각 기본 설정값을 가지기 때문에, 같은 CSS 코드를 적용해도 표시 결과가 조금씩 다릅니다. 그래서 Reset CSS를 이용해 웹 브라우저와 상관없이 초기 스타일을 통일시킴으로써 더욱 쉽게 구현할 수 있습니다.

 

Reset CSS의 종류에는 모든 스타일을 초기화하는 것과 일부 스타일을 남기고 브라우저 사이의 차이를 통일시키는 것이 있습니다. 

 

https://csstools.github.io/sanitize.css/

sanitize.css

 

p.11

https://github.com/moseskim/web-design-idea-recipes

GitHub - moseskim/web-design-idea-recipes: 웹디자인, 이렇게 하면 되나요? 샘플 코드

 

p.19

보통 웹에서 상자를 구현하려면 CSS의 의사요소(pseudo-element)를 추가해 배경색을 입힌 사각형을 직접 만들어 배치하는 방법이 있습니다. 여기서 의사 요소란 HTML 요소의 특정한 부분만 선택하는 기능입니다.

 

하지만 box-shadow를 이용하면 코드 한 줄로 똑같은 모양을 구현할 수 있습니다. box-shadow는 요소에 그림자(shadow) 효과를 추가하는 코드로 주로 이용합니다. 하지만 퍼짐(페더) 양을 0으로 지정하면 흐릿한 그림자가 아니라 배경색을 입힌 도형처럼 표현할 수 있습니다.