목차
사용자 정의 속성(CSS 변수)
Sass와 같은 CSS 전처리기를 사용하면 반복되는 값을 변수로 치환할 수 있다. 다만, 그렇게 하면 CSS로 변환해야 한다.
Sass만큼 강력하지는 않지만, CSS에서도 변수와 비슷한 기능을 지원한다. 사용자 정의 속성(custom property)은 CSS 저작자(사용자)가 직접 속성을 정의하고, 문서에서 반복해서 사용할 임의의 값을 지정한다.
element {
/* 사용자 정의 속성 - 정의 */
/* 대소문자 구분 */
--main-bg-color: pink;
/* 사용자 정의 속성 - 사용 */
background: var(--main-bg-color);
}
사용자 정의 속성은 변수가 아닌 속성이기 때문에 상속된다. 부모에서 정의한 속성을 자식이 사용할 수 있다. 그래서 보통 :root {}에 선언한다. html을 가리키는 가상 클래스로 문서 전체에서 사용할 수 있도록 한다.
@property at-rule을 사용하면 속성 값의 syntax, 상속여부, 초기 값을 지정할 수 있다.
@property --logo-color {
/* 색상 값만 받도록 정의 */
syntax: "<color>"
/* 상속 여부 정의 */
inherits: false;
/* 초기 값을 지정 */
initial-value: #c0ffee;
}
다음과 같이 사용자 정의 속성 안에 사용자 정의 속성을 사용할 수도 있다.
:root {
--red: #f00;
}
element {
--text-color: var(--red);
}
테이블 스타일링
- border-spacing: 셀의 border와 border 사이 공간을 얼만큼 띄울지 지정하는 속성이다. 속성 값을 0으로 지정하더라도 두 border가 나란히 붙어서 1px의 border가 2px로 보일 수 있다.
- border-collapse: border를 겹칠지 여부를 지정하는 속성이다. 속성 값으로는 기본 값인 separate와 border를 겹치는 collapse가 있다.
테이블의 행별로 색깔을 줄 때 유용한 속성이 :nth-child(n)이다. 함수 값으로 even(짝수), odd(홀수), 3n(3번째) 등을 사용할 수 있다.
sr-only 클래스
.sr-only {
/* 공간을 차지하지 않고 위에 띄우기 */
position: absolute;
/* 요소 박스를 가상 커서가 탐색할 수 있는 최소 크기로 지정 */
width: 1px;
height: 1px;
/* 혹시 있을 padding 제거 */
padding: 0;
/* 상자의 시작 지점을 속이는 트릭. 상자가 화번에 보이지 않도록 한다. */
margin: -1px;
/* 줄인 요소 박스에 넘치는 정보를 보이지 않게 지정 */
overflow: hidden;
/* 이제는 쓰지 않는 방법이라 아래 clip-path 추가 */
clip: rect(0, 0, 0, 0);
/* 클리핑 마스크를 사방에서 50%씩 줄여서 화면에 보이지 않게 하기 */
clip-path: inset(50%);
/* 줄바꿈 허용하지 않는다. */
white-space: nowrap;
/* border 모두 합쳐서 0으로 지정 */
border-width: 0;
}display: none;으로 숨기면 안 된다. 대부분의 스크린 리더가 못 읽는다. 모두에게 보이지 않을 내용이 있을 때 선언한다.
전맹 시각장애인보다 저시력자가 스크린리더를 더 많이 본다. 아래는 참고하면 좋은 영상이다.
오늘 하루를 돌아보며
강의 시간에 지난 주에 했던 과제를 강사님이라면 어떻게 만들었을지 보여주셨다. 강사님의 마크업을 정답이라고 생각하지 말고 이런 방법도 있다고 생각하고 참고하고 배우는 시간을 가졌다. 내가 놓쳤던 부분도 많이 발견했고, 귀찮다고 안 했던 게 오히려 이미지 성능 최적화를 고려하지 않은 게 됐다.
마크업은 뼈대를 만드는 작업이다. 뼈대가 튼튼해야 그 위에 무엇을 올리든 든든하다. 마크업할 때 디자인은 다 빼고 구조를 먼저 생각해서 짜야 한다. 디자인은 얼마든지 변경할 수 있다. 시맨틱 마크업에 대해 계속 고민하고 배워나가야겠다.
접근성을 높이겠다고 aria-label을 사용했는데, aria-label은 인터랙티브 요소에만 사용하는 거였다. 접근성에 대해서도 더 많이 배우고 고민해야겠다.