[CSS] reset, normalize

개발자 도구> 요소 선택

  - margin border padding 등 보기 가능

  - 취소선 되어있는건 브라우저에서 자기들이 건드린것(개발자 편하라고)

    상자를 만들면 크게 나오거나, p태그(문단)에 여백이 확보되어 나오는 것 등등 브라우저에서 임의로 해주는 것

    편하지만 브라우저에 따라 다르게 보일수 있는 문제점이 있다

    <style>

        h1{

            margin: 0;

            font-weight: normal;

        }

    </style>

브라우저에서 기본적으로 제공한 서식은 취소선이 생긴다.

 

개발자 도구> 요소에 마우스 올리면

contrast에 파란체크가 생기기도 하는데 >> 사용자가 보기 편한 상태이다 -라고 브라우저에서 알려주는것.

 

 

통일성 있는 디자인 만들기

 

css reset

https://cssdeck.com/blog/scripts/eric-meyer-reset-css/

브라우저에 있는 모든 서식을 초기화할 수 있는 코드

직접 하나하나 만들어나갈 수 있다. 귀찮지만 어떤 브라우저로 들어가도 똑같게 나온다.

모든 사용자들이 동일한 환경에서 동일한 경험을 할 수 있는 페이지를 만들 수 있다.

->모든걸 0으로 되돌림

 

css normalize

https://necolas.github.io/normalize.css/

기본적으로 다루는 모든 서식을 재정의 해놓았다.

->모든걸 기본적인(흔히보는 스타일)로 재정의해놓음

어떤 브라우저로 들어가도 같게 보이는건 reset과 마찬가지이다.

 

CSS 초기작업

- 직접 디자인 하는 경우

1. 있는 그대로

2. Reset CSS

3. Normalize CSS

 

- 디자인 프레임워크를 사용하는 경우

1. Bootstrap

2. 등등 여러가지가 있다.