💛[부스트코스_웹 UI 개발] 10. CSS 리셋

CSS 리셋 소개

크로스브라우징이란?

Cross Browsing
: 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음

마크업 원칙
->웹 표준, 웹 접근성, 시멘틱 마크업, 크로스브라우징

브라우저마다 같은 코드여도 해석하는 방식이 다르기 때문에 어떤 브라우저든 사용자들이 동일한 경험을 할 수 있도록 크로스 브라우징 원칙을 지켜서 코딩해야함

크로스브라우징의 첫 단계 = 브라우저 리셋하기
브라우저마다 코드를 해석하는 방식이 다름. 따라서 렌더링을 하는 기본 스타일도 조금씩 차이가 있다.

브라우저가 렌더링을 하면서 기본적으로 스타일을 제공해준다.
ex) <h1>
-> display:block, font-size, margin, font-weight가 들어있음.
기본적으로 user agent style이라는 값으로 들어가 있는것 확인가능
브라우저마다 font-family 크기나 링크의 컬러값, 여백들 등 조금씩 차이가 난다

리셋 CSS를 적용하면 적용 전에 비해서 비교적 다른 브라우저에서도 유사하게 렌더링된다
모든 css를 삭제했을때보다 여백이나 border, 리스트의 점 표시들 그런것들이 제거됨으로써 원하는 디자인대로 CSS를 입력하기 보다 수월

모든 브라우저에서 동일한 화면을 볼 수 있도록 기본값을 초기화하는 리셋 스타일이 모든 CSS 상단에 들어가야 한다.

CSS Reset에 들어가보면 현재 가장 많이 사용되고 있는 리셋 CSS를 몇가지 확인가능
ex) html 태그들에 대해서

• margin과 padding 0
• border 0
• font-size, font, vertical-align에 대한 스타일들 리셋
• body에 line-height:1
• list-style:none 등

리셋 css는 정해진게 없다.
사용하지도 않는 태그들을 굳이 초기화 할 필요도 없다
폰트 사이즈, 컬러, 여백 등은 진행하고 있는 프로젝트의 성격에 맞춰서 추가하면서 사용하면 된다.

모든 브라우저에서 동일한 뷰를 보여주기 위해 기본값을 초기화한다는 점만 기억!

---

reset.css 제작

주요 태그 및 스타일

• HTML
  • 모든 태그
• CSS
  • margin, padding, border, font-styleborder-collapse, text-decorationlist-style

---

body, h1~h6

1) 헤딩 태그에 여백이 들어가 있음
2) font-size도 h1부터 h6까지 점점 작아짐

body{
	display:block;
	margin:8px;
}

이 적용되어 있음

대부분 프로젝트에서 margin, padding. 즉 여백은 0으로 초기화하는게 좋다.

헤딩 태그 -> display, font-size, margin, font-weight 적용됨
폰트 사이즈는 프로젝트에서 주로 사용하는 사이즈 적용하기

각 태그별로 들어가 있기 때문에 부모요소인 body가 아니고 태그 자체에 직접 스타일을 입력해야함

body,
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}
/*폰트 사이즈와 weight도 초기화 하고 싶을떄*/
h1, h2, h3, h4, h5, h6{
	font-size:12px;
    font-weight:normal;
}

ul, ol, dl

ul, ol, dl
-> margin, padding, list-style-type 적용됨

• list-style-type
  : 리스트 앞에 표시되는 동그라미, 숫자의 스타일 변경하는 속성
  실무에서는 이 부분도 디자인을 따로 하기 때문에 거의 사용하지 않는 속성.
  따라서 none으로 값을 넣어줘야 한다

list-style-image, list-style-position, list-style-type 3가지 속성을 list-style로 축약해서 사용가능하다

관련된 모든 스타일을 없애기 위해 list-style:none;로 초기화

ul, ol, dl, dd {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

table

table
-> borer 속성 적용
border-collapse를 collapse로 변경해줘야한다.

table {
	border-collapse: collapse;
}

p, em, strong, a, img

• p
  -> margin

• em
  -> font-style:italic을 normal로 바꿔줌

• img
  -> 이미지가 인라인 요소이기 때문에 margin, padding이 없어도 공간이 발생

  없앨 수 있는 방법

  1. vertical-align:top
  2. display:block

p {
	margin: 0;
	padding: 0;
}

em {
	font-style: normal
}

a {
	color: inherit;
    /*부모 요소의 색상값 그대로 상속받음*/
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	vertical-align: top;
}

form

폼 요소들만 폰트 차이가 존재
폼 관련 태그들은 브라우저 기본 스타일이 가장 많이 적용돼있는 요소.
그렇기때문에 브라우저마다 모양이 모두 다름

동일하게 보이도록 커스텀하는 일 자체가 매우 까다로운 작업이라서 실무에서는 디자인 요소로 커스텀을 많이 함.

fieldset, legend {
	margin: 0;
	padding: 0;
}

body, input, textarea, select, button {
	font-size: 14px;
	font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
}

fieldset {
	border: 0;
}

reset.css

body,
h1, h2, h3, h4, h5, h6,
ul, ol, dl, dd,
p,
fieldset, legend {
	margin: 0;
	padding: 0;
}

body, input, textarea, select, button {
	font-size: 14px;
	font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
}

ul, ol {
	list-style: none;
}

table {
	border-collapse: collapse;
}

em {
	font-style: normal
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	vertical-align: top;
}

fieldset {
	border: 0;
}

웨일, IE, 파이어폭스, 사파리 등 주요 브라우저에서 다양하게 확인해보기.
비교해가면서 뒤 리셋해야 할 속성들 파악

CSS 리셋 요약

1. 브라우저마다 태그를 렌더링하는 기본 스타일이 다르다.
2. 모든 브라우저에서 동일한 화면을 볼 수 있도록 기본값을 초기화한다.
3. reset CSS는 웹 상에서 많은 소스들을 다운받아서 사용할 수 있지만, 결론적으로는 각 프로젝트에 맞춰서 사용한다.
   모두 직접 작성할 필요는 없지만 반드시 불필요한 코드들이 너무 많이 들어가지 않도록 해야한다.