css) reset.css / a11y.css(accessibility-접근성) / theme.css(색상,폰트)

내가 주로 쓰는 reset css 다.

보통은 base.css, reset.css, defaul.css 라는 이름을 붙인다.

이 코드는 강의나 인터넷 검색으로 짜집기한 정보들로, 계속 업데이트 중이다.

/* 여백 초기화 */   
body, div, ul, li, dl, dd, dt,
ol, h1, h2, h3, h4, h5, h6,
input, fieldset, legend, p,
select, table, th, td, tr,
textarea, button, form {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  border: 0;
}


/* *,
*::before,
*::after {
  box-sizing: border-box;
} */

body {
  font: 1.6rem/1.15 var(--font-family);
}

/* a 링크 초기화 */
a {
  color: inherit;
  text-decoration: none;
}

a, img {
  vertical-align: middle;
}

button {
  all: unset;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

figure {
  margin: 0;
}

/* 블릿기호 초기화 */
dl,
ul,
li,
ol,
menu {
  list-style: none;
}

/* 폰트 스타일 초기화 */
em,
address {
  font-style: normal;
}

/* 제목 태그 초기화 */
h1, h2, h3,
h4, h5, h6 {
  font-size: 13px;
  font-weight: normal;
}

strong {
  color: var(--color-gray-800);
}

/* 테두리 초기화 */
img, fieldset {
  border: 0 none;
}

/*익스플로러 기본 화살표 없애기*/
select::-ms-expand {
  display: none;
}

/*화살표 기본 css 없애기*/
select {
  border-radius: 0;
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


/* IR 효과 */
/* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_wa {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
.ir_su {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}


/* margin, padding */
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt25 {
  margin-top: 25px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt35 {
  margin-top: 35px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt45 {
  margin-top: 45px !important;
}
.mt50 {
  margin-top: 50px !important;
}

 

 

.sr-only 클래스

screen reader only 의 약자로  요소의 내용을 시작적으로 숨기되 스크린리더 사용자에게는 정보를 노출시키는 기능이다.

[ css ] 에 따로 작성을 하는데 reset.css 처럼 [ a11y.css ] 라는 이름으로 파일을 따로 만들어서 사용한다.

 

a11y란?

'a11y'는 '접근성'을 의미한다. 숫자의 동의어로, 11은 문자a와 문자y 사이의 문자 수를 나타낸다.
접근성이라는 단어는 맥락에 따라 의미가 다릅니다.  인터넷에서 a11y라는 용어를 사용하면 디지털 접근성과 관련된 콘텐츠를 식별하는 데 도움이 된다.

읽을때는 접근성으라고 읽는걸 권장한다고 한다.
A11y(종종 "A-one-one-Y", "A-eleven-Y", 그리고 관대하게 "ally"로 발음)는 "접근성"의 약어입니다. 따라서 가능하면 "접근성"이라고 말하세요. a11y로 쓰여도요.
https://www.a11yproject.com/posts/a11y-and-other-numeronyms/

 

 

 [ a11y.css ]

.sr-only {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  white-space: nowrap;
}

 

 

 

[ theme.css ]색상, 폰트

/* Theme */
:root{
  --color-back: #181818;
  --color-white: #FFFFFF;
  --color-gray-100: #F3F3F3;
  --color-gray-200: #E7E7E7;
  --color-gray-300: #DCDCDC;
  --color-gray-400: #D0D0D0;
  --color-gray-500: #C4C4C4;
  --color-gray-600: #AAA9A9;
  --color-gray-700: #767676;
  --color-gray-800: #4E4E4E;
  --color-gray-900: #272727;
  --color-blue-100: #CCEAFA;
  --color-blue-200: #65CDE3;
  --color-blue-300: #61BFE6;
  --color-blue-400: #33ABE9;
  --color-blue-500: #0096E4;
  --color-blue-600: #0074E9;
  --color-blue-700: #005A89;
  --color-blue-800: #003C5B;
  --color-blue-900: #001E2E;
  --color-opacity-20: rgba(0,0,0,0.2);
  --color-red-100: #FAD3D6;
  --color-red-200: #F5A7AC;
  --color-red-300: #EF7B83;
  --color-red-400: #EA4F59;
  --color-red-500: #E52330;
  --color-red-600: #B71C26;
  --color-red-700: #89151D;
  --color-red-800: #5C0E13;
  --color-red-900: #2E070A;
  --color-yellow-100: #FEF2D9;
  --color-yellow-200: #FDE4B4;
  --color-yellow-300: #FDD78E;
  --color-yellow-400: #FCC969;
  --color-yellow-500: #FBBC43;
  --color-yellow-600: #FF9B05;
  --color-yellow-700: #977128;
  --color-yellow-800: #644B1B;
  --color-yellow-900: #32260D;
  --color-green-100: #F4F5D2;
  --color-green-200: #E9EBA5;
  --color-green-300: #DDE177;
  --color-green-400: #D2D74A;
  --color-green-500: #C7CD1D;
  --color-green-600: #9FA417;
  --color-green-700: #00B599;
  --color-green-800: #50520C;
  --color-green-900: #282906;
  --color-brown-100: #DFD5D4;
  --color-brown-200: #BFABA9;
  --color-brown-300: #9D7A6D;
  --color-brown-400: #7E5852;
  --color-brown-500: #5E2E27;
  --color-brown-600: #4B251F;
  --color-brown-700: #381C17;
  --color-brown-800: #261210;
  --color-brown-900: #130908;
  --color-purple-100: #DFD8F2;
  --color-purple-200: #BEB0E6;
  --color-purple-300: #9E89D9;
  --color-purple-400: #7D61CD;
  --color-purple-500: #5D3AC0;
  --color-purple-600: #4A2E9A;
  --color-purple-700: #382373;
  --color-purple-800: #25174D;
  --color-purple-900: #130C26;

  --base-size: 10px;
  --font-family: 'Noto Sans KR', sans-serif;
}

html{
  font-size: var(--base-size);
}

body{
  color: var(--color-black);
  background: var(--color-white);
}

 

 

 

 

 

 

참고

나, 

a11y - https://www.a11yproject.com/about/#what-does-the-term-a11y-mean