[Web] #6 CSS - user agent stylesheet, reset css

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 

---

p, span 태그에 동일하게 display 속성에 block값을 주었을 때 결과에 차이가 있다.

p는 위 아래로 margin이 있는데, span은 없다. 

 

그 이유는 브라우저의 기본 스타일링 때문이다. 각 브라우저마다 태그에 대한 기본 스타일링(css 속성과 값)이 있다.

이것이 user agent stylesheet다. 개발자 도구에서 브라우저 태그에 대한 기본 스타일링을 확인할 수 있다.

위에 설정한 값을 보면 p 태그에는 user agent stylesheet가 있는데, span 태그에는 없는 것을 볼 수 있다.

---

각 브라우저마다 태그에 대한 기본 스타일링이 다르기 때문에, 동일한 웹페이지를 여러 브라우저에서 같은 스타일링으로 보여주고 싶을 때는 각 브라우저마다 적용되어 있는 기본 스타일링을 모두 초기화하는 작업을 해야한다.

이 작업을 해주는 코드가 있다. reset css.

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

위 코드를 css 맨 위에 붙여주면, 브라우저마다 적용되어 있는 기본 스타일링을 모두 초기화 해주는 것은 아니지만 대부분 초기화 한다고 보면 된다. 

 

위 코드는 주로 태그마다 margin, padding 값을 죽여주기 위해 사용하기 때문에 reset css를 사용하지 않고

* 선택자로 초기화 할 수도 있다. 

* {
	margin : 0;
	padding : 0;
	box-sizing : border-box;
}

---

span {
	display : inline-block;
}

위 코드를 쓰면, 태그와 태그 사이에 공백이 생기는데 어떻게 조절할 수가 없다. 

 

따라서 display 속성 값으로 inline, inline-block을 사용하지 않고

flex 속성을 많이 사용해서 웹 페이지의 레이아웃을 구성한다.

 

flex는 중요하다 ! 다음 포스팅에서 :)