패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"

CSS 초기화 파일

reset.css(1kB)

• 개발자 Eric A. Meyer
• 마지막 업데이트 : 2011년 1월
• https://meyerweb.com/eric/tools/css/reset/
• 현재 시점에서 굳이 선언하지 않아도 되는 스타일이 대부분
• 미사용 CSS가 되거나 그냥 덮어쓰기 되는 스타일이 많음

normalize.css (1.3kB)

• 개발자 necolas
• 마지막 업데이트 : 2018년 11월
• https://github.com/necolas/normalize.css/blob/master/normalize.css
• 기본 태그 스타일을 덮어씀
• 잘 사용하지 않는 hr, pre 등의 태그에도 미리 스타일을 적용

초기화 파일 사용의 문제점

• 대부분의 reset 스타일들은 덮어쓰기 되고 사용되지 않음
• 사용되지 않거나 덮어쓰기 되는 CSS들을 습관적으로 사용하는 경우 불필요한 CSS를 증가시키는 요인이 됨

CSS 초기화 참고사항

Universal selector * reset

• 모든 HTML 요소를 전부 선택하는 선택자
• 모두 선택하여 스타일을 똑같이 적용
• 스타일을 덮어쓰거나, 불필요한 스타일을 모든 요소에 적용해버리는 문제 발생
• 가급적이면 해당 방식 사용 지양

<style>
*,
::before,
::after {
	margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    list-style: none;
    -webkit-appearace: none;
    appearance: none;
}
</style>

Find unused CSS

• 구글 개발자 도구에서 Coverage 확인
• Show Coverage
  • CSS 코드 중 사용되지 않는 코드의 비율을 붉은 색 막대 그래프로 제공함
  • Coverage 영역을 새로고침해서 확인 가능
  • 카테고리 Default 값은 All이며, CSS로 변경 후 확인 가능
  • @font-face 버그 있음
    → 사용 중인 폰트지만 오류로 검출(붉은 색으로 표시) 됨
    → 크롬 개발자가 해당 버그를 아직 해결하지 못한 것으로 보임

개발자도구에 coverage 탭 노출시키는 방법
1. 크롬 개발자도구 열기
2. Mac: Cmd+Shift+P / Win: Ctrl+Shift+P 로 검색창 띄우기
3. coverage 검색 후 'Show Coverage' 선택

네이버 웹사이트 show coverage 확인 예시

CSS reset reinvent

• CSS reset 스타일의 재발견
• reset 스타일로 사용하기 좋은 CSS 속성

overflow-wrap:break-word;

• 내용이 넘치는 경우 단어 중간에서 자르기
• 브라우저는 문자열에 공백이 없으면 하나의 단어로 인식하기 때문에, 공백 없이 아주 길게 나열된 1byte 문자열들이 레이아웃을 깨는 문제를 해결할 때 사용
• 한국어도 단어 중간에서 강제로 줄바꿈 하는 문제점
  → :lang(ko) { word-break: keep-all; } 속성을 적용하여 해결 가능

:lang(ko){word-break:keep-all;}

'CJK'라고 부르는 언어권(한국어, 중국어, 일본어)의 문자열의 단어 중간에서 강제 줄바꿈 되는 것을 막아줌

Reset img

• 이미지는 웹페이지 보다 클 수 있음
• 삽입된 영역의 최대 폭보다 이미지가 늘어나지 않도록 설정

<style>
/* Reset body */ 
body { 
    margin: 0; 
    overflow-wrap: break-word;
 } 
 
/* Do not break Korean words */
:lang(ko) { word-break: keep-all; } 

/* Reset img */ 
img { 
   max-width: 100%;
   height: auto;
}
</style>

Class에 의한 reset

• class 라는 속성이 들어간 요소만 찾아서 스타일을 리셋하는 것
• 위지윅 에디터를 통해서 작성한 스타일이나 태그는 가능한 유지시켜주는 방법
  *위지윅 에디터란?
  한글이나 워드를 사용하는 것과 같이 쉽게 이러한 작업을 할 수 있게 도와주는 프로그램
• class가 들어간 모든 요소의 스타일을 초기화 하는데, 모든 요소가 해당 속성을 갖고 있는 것은 아니므로 과도하게 스타일이 적용되는 문제가 있음
  예) list-style 속성은 ol,ul 요소만 갖고 있음
  → 가상클래스 선택자 where를 사용하여 특정 브라우저에서 문제 해결 가능

<style>
/* CSS Reset by [class] */ 
[class] {
    margin: 0;
    padding: 0;
    box-sizeing: border-box;
    list-style: none; //ol, ul
    border: 0; //button, table, input, fieldset, textarea, select, iframe 
    background-color: transparent; //button, dialog, input, mark, meter, progress 
    border-collapse: collapse; //table 
    border-spacing: 0; //table 
    -webkit-appearance: none;
    appearance: none // button, input, textarea, select, meter, progress
} 
[class]::before,
[class]::after { box-sizing: border-box; }
</style>

가상 클래스 선택자 where

• 괄호 안에 선택자를 넣어서 사용
• 선택자 정수, 선택자 특이성을 증가시키지 않음

  비슷한 가상 클래스 선택자 중 'is'가 있는데, is는 선택자 특이성을 증가시키는 반면에 where는 선택자 특이성을 증가시키지 않음

• 작성 방법 : [class]:where(선택자)
• 예시) [class]:where(ol, ul)
  → ol이나 ul 태그이면서 class 속성이 들어간 것
• 삼성 인터넷 브라우저는 해당 속성 미지원

<style>
/* CSS Reset by [class] */ 
[class] { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
[class]::before, 
[class]::after { box-sizing: border-box } 
[class]:where(ol, ul) { list-style: none } 
[class]:where(button, fieldset, iframe, input, select, textarea) {  border: 0 } 
[class]:where(button, dialog, input, mark, meter, progress) { background-color: transparent; } 
[class]:where(table) { 
    border:0; 
    border-collapse: collapse; 
    border-spacing: 0;
} 
[class]:where(button, input, meter, progress, select, textarea) { 
    -webkit-appearance: none; 
    appearance: none; 
}
</style>