CSS

github.com/baeharam/Must-Know-About-Frontend

baeharam/Must-Know-About-Frontend

타이핑 치면서 공부

 

---

박스 모델

 

이미지

github.com/baeharam/Must-Know-About-Frontend/raw/master/images/css/box%20model.png

[ margin [ border [ padding [ content ] ] ] 

이렇게 둘러싸여있음.

box-sizing 속성을 사용하면, width 와 height가 컨텐츠 영역이 기준인지, 테두리 영역 기준인지 정할 수 있다.

 

---

Reset.css vs Normalize.css

 

크롬, 사파리, IE 등 각 브라우저마다 HTML 요소의 기본 스타일을 가지고 있다. 따라서, CSS로 스타일링을 적용할 때 이러한 특징이 동일한 스타일 적용을 방해하기 때문에 이를 해결하기 위해서 나온 스타일 초기화 기법들이다.

 

Reset.css - 모든 브라우저 내장 스타일을 없앤다. h1와같은 태그들도 기본 텍스트로 출력된다. 보통, 초기화를 한 후 각자의 방식에 맞게 변형해서 사용한다.

Normalize.css - 모든 브라우저의 스타일을 동일하게 하는 기법. 기존 스타일을 유지하되 브라우저마다 다른 스타일을 동일하게 고치는 방식이다.

 

차이점과 선택

- reset.css의 경우, 모든 것을 초기화 하기 대문에 스타일을 처음부터 적용해 나가는 것이 힘들 수 있고 브라우저의 버그를 고치는 것이 아니기 때문에 각 브라우저마다 다른 버그를 발생시킬 수 있다. 하지만 아예 초기화를 하는 것이기 때문에 업데이트가 필요없다.

- Normalize.css의 경우 브라우저가 업데이트 되어서 새로운 내장 스타일이 적용될 때마다 각 브라우저의 다른 점을 파악하여 스타일을 업데이트해야 하기 때문에 끊임없는 버전 업데이트가 있어야 최신 스타일을 유지할 수 있다. 하지만 브라우저의 버그를 고치기 때문에 버그가 발생할 걱정을 덜고 기본 스타일을 어느정도 유지하기 때문에 스타일링에 힘을 덜 들일 수 있다.

 

---

그리드 시스템