common

common

base

박스 크기 조정, 사용자 정의 초기화, 접근성,

박스 크기 조정

처음에는 body요소에 박스 사이징을 적용하고 body *에 상속받는 속성을 입력했다. 공간에 대한 속성을 상속이 되지 않기 때문에 아래 처럼 코드를 입력한 것인데 사실 상속이 필요한 부분은 가상클래스도 있다.

body {
  box-sizing: border-box;
}

body * {
  box-sizing: inherit;
}

아래 코드 처럼 루트 상위 선택자에 박스 사이징을 적용하여 아래 body요소가 상속받는 형태로 적용하는 방법으로 적용하자

:root {
  box-sizing: border-box;
}

body,
body *,
body::before,
body::after,
body *::before,
body *::after {
  box-sizing: inherit;
}

접근성

접근성을 위한 숨김컨텐츠를 만들 경우에 요소가 보이지 안더라도 포커스 되었을 때도 같이 고려해서 속성을 적용해야 한다.

.a11yHidden.focusable:focus {
  a11yHidden 클래스에 적용한 속서을 모두 상속
}

• 마우스로 클릭 했을 때와 키보드로 포커싱 되었을 때 구분해서 스타일링 적용한다. 마우스로 포커싱 되었을 때 테두리에 라인이 생기면 디자인상 예뻐보이지 않기 때문이다.

• 마우로 클릭 했을 때: :not() 선택자를 사용해서 :focus-visible가 적용되지 않은 요소는 테두리를 적용하지 않는다.

/* 마우스로 클릭했을 때 */
:focus:not(:focus-visible) {
  box-shadow: none;
}

/* 키보드로 포커싱 되어 화면에 표시 되어야 하는 경우 */
:focus-visible {
  box-shadow: 0 0 0 0.3rem var(--colorFocusable);
}

참고

• [MDN]box-shadow

• [MDN]:focus-visible

typography

폰트 기본 스타일 적용

• 1.6rem/1.5는 font에 입력하는 font-size/line-height 속기형이다.

body {
  /* 1.6rem/1.5 size/line-height */
  font: 1.6rem/1.5 SpoqaHanSans, Helvetica, Arial, Sans-serif;
}

• <header>과 <p> 요소에 위/아래 margin: 0;을 적용할 때는 top에 적용할지 bottom에 적용할지 결정한다.

  h1, h2, h3, h4, h5, h6 p {
    margin-top: 0;
  }