Reset CSS, Normalize, tailwindCSS preflight!

Reset CSS

Reset CSS의 목표는 기본 줄 높이, 여백, 제목 글꼴 크기 등과 같은 브라우저 불일치를 줄이는 것으로, 브라우저마다 기본 디폴트 스타일 값이 아니라 동일한 CSS스타일을 보여주기 위해 디폴트값을 초기화 한다. 크로스 브라우징(Cross Browsing)

• 브라우저별 스타일은 개발자도구 스타일에서 user agent stylesheet에서 확인할 수 있다.

 

🖥️ 3대 브라우저별 UserAgent Style

Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css

Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css

WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

주의사항

"Reset CSS"로 구글링을 해보면 초기화 코드가 많이 나오는데, 가져다 쓰는 것은 좋으나 반드시 왜 리셋했는지를 알고 사용해야 한다.

• 코드를 작성하면서 필요한 부분의 reset css만 구성해서 사용하는 것을 추천
• 특히 전체 선택자(*)를 사용하지 말 것 -> 필요없는 곳에 영향을 줌

문제점

Reset CSS는 브라우저의 모든 CSS를 제거하는 식으로 발전하는 과정에서 여러 비판도 있었다고 한다.

• Reset CSS를 하기 위해서 필요한 CSS가 점점 커지고 있는 문제.
• Reset CSS가 정말로 필요한가? 어차피 덮어질 CSS인데 왜 굳이 0으로 세팅을 하고 다시 지정을 하는가?
• *{...} Universal Selector은 성능상에 문제가 있다.
• :focus { outline: 0 } 과 같은 Reset은 브라우저의 기본 접근성을 해칠 수 있다. 등등

사용하는 ResetCSS 코드

html {
	font-size: 62.5%;
    height: 10%;
}
body {
	margin: 0;
    font-family: sans-serif;
    height: 100%;
}
table {
	border-collapse:collapse;
    border-spacing:0
}
button {
	appearance: none;
    border: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    cursor: pointer;
}
h1 {
	margin: 0;
}
a,
a:hover {
	text-decoration: none;
}
:root {
	-webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    cursor: default;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
    -moz-tab-size: 4;
    tab-size: 4
}

html{font-size: 62.5%}

=> rem 단위를 사용하겠다는 뜻

• 62.5%로 설정하면,px로 전환했을 때 10px이 되고, rem은 root 폰트사이즈를 따라가므로 1rem이 10px이 되서 계산하기가 쉬움
• 그냥 10px로 때려박아도 되지만, 접근성 문제로 62.5%로 한다.
• 👉🏽 시각장애인의 경우 운영체제 자체의 폰트크기를 키워놓고 사용하기 때문에 %로 적용해야 설정한 크기를 기준으로 맞춰주기 때문

body{font-familly: serif}

• 폰트의 삐침설정

button{aprearance: none}

• 모든 브라우저별 고유 버튼 스타일을 다 지워줌

:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;-moz-tab-size:4;tab-size:4}

-:root는 일반적으로 문서의 루트 요소를 나타낸다.

--webkit-tap-highlight-color:transparent

터치 디바이스에서 요소를 탭할 때의 강조 효과 색상을 제어하여, 모바일에 클릭시 검은색 영역이 사라짐

-webkit-text-size-adjust:100%

WebKit 브라우저(Safari)에만 적용됨

사용자가 브라우저 설정에서 폰트 크기를 조정할 때 텍스트 크기 조정 동작을 제어하여, 100%값을 설정하면 테스트크기가 브라우저의 기본 폰트 크기에 맞게 조 정되어 모바일에서도 원래의 폰트 크기대로 출력됨

-overflow-wrap:break-word; word-break:break-word;

• overflow-wrap루트 요소 내에서 단어의 오버플로우를 어떻게 처리할지 지정하며, break-word로 하면 단어가 컨테이너를 넘치는 것을 방지하기 위해 임의의 지점에서 단어를 분리할 수 있다.
• word-break과 같이 사용하면 띄어쓰기 없이 글자를 입력하면 wrap이 되지 않고 삐져나가는 일이 사라짐

Normalize

브러우저간에 스타일이 표준 브라우저의 스타일과 동일하게 보일 수 있는 방식으로, 정규화(Normalize)를 통해 스타일을 통일하는 방식이다.

Reset CSS는 스타일을 초기화시켜 아예 리셋해서 아무런 스타일도 입히지 않는거라면, Normalize는 브라우저간의 상이한 부분만 스타일을 통일시켜준다.

🔗 Normalize.css

tailwindCSS 의 preflight

modern-normalize를 기반으로 구축된 Preflight는 브라우저 간 불일치를 완화하고 디자인 시스템의 제약 내에서 더 쉽게 작업할 수 있도록 설계된 Tailwind 프로젝트용 기본 스타일시트로, Tailwind로 스타일한 웹 페이지가 어느 브라우저에서 열든 일관적으로 보이도록 해준다.

내용 요약

• 모든 HTML 요소에 적용된 margin 속성을 일괄 제거
• <h1>, <h2>, <h3>와 같은 헤딩(heading) 요소에 적용된 기본 스타일을 제거
• <ul>, <ol>와 같은 리스트(list) 요소에 적용된 기본 스타일 제거
• <img>, <svg>와 같은 멀티미디어 요소의 display 속성을 block으로 설정
• <img>, <video>와 같은 멀티미디어 요소가 부모 요소를 삐져나갈 수 없도록 너비를 제한
• 모든 HTML 요소의 테두리 속성을 Tailwind 방식으로 초기화
• 🔗 전체스타일시트

Preflight 확장

일부 HTML요소를 상대로 CSS를 초기화한 후에 자신만의 기본 스타일이 필요하다면, @layer base지시자를 CSS에 추가하여 Preflight를 확장할 수 있다.

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

Preflight 비활성화

tailwind.config파일에서 다음과 같이 설정

module.exports = {
  corePlugins: {
    preflight: false,
  }
}