Technote

워드프레스 실무 노하우 골라 읽는 기술 노트

글 34편· 테마 · 플러그인 · 디자이너

테마 · 플러그인 실무

!important 없이 테마 스타일 이기기

규칙을 분명히 썼는데 화면이 안 바뀝니다. 원인은 대개 특정도가 아니라 순서이고, 순서는 !important 없이 고칠 수 있습니다.

디자이너 3분 읽기

테마 · 플러그인 실무

그리드 칸이 내용 때문에 부푸는 문제 — minmax(0, 1fr)

repeat(3, 1fr) 은 세 칸이 같은 폭이 된다고 약속하지 않습니다. 안에 든 코드 블록이나 긴 문자열 하나가 칸을 밀어내고, 그러면 판 전체가 화면 밖으로 나갑니다.

디자이너 3분 읽기

테마 · 플러그인 실무

CSS 커스텀 프로퍼티로 토큰 심기

토큰 목록을 :root 한 곳에 두고 컴포넌트가 그것만 참조하게 만들면, 사이트 전체의 색과 간격이 파일 하나에서 움직입니다.

디자이너 3분 읽기

테마 · 플러그인 실무

초점 표시를 지우지 않기 — outline: none 이 없애는 것

기본 초점 링이 디자인과 맞지 않는 것은 사실입니다. 다만 지우기만 하면 키보드 사용자의 커서가 통째로 사라집니다 — 지우는 대신 바꾸는 방법이 있습니다.

디자이너 3분 읽기

테마 · 플러그인 실무

clamp() 하나로 단계마다 값을 다시 쓰지 않기

제목 크기를 브레이크포인트마다 다시 선언하고 있다면 유지보수가 계속 늘어납니다. clamp() 는 최소 · 유동 · 최대를 한 줄에 담아 그 재선언을 없앱니다.

디자이너 4분 읽기

테마 · 플러그인 실무

keep-all 이 한글에 주는 것, 다른 언어에서 빼앗는 것

한글 어절이 중간에서 잘리는 문제는 CSS 한 줄로 해결됩니다. 그런데 그 한 줄은 공백이 없는 일본어 · 중국어에서 "끊을 자리가 없다"는 뜻이 되어 가로 스크롤을 만듭니다.

디자이너 5분 읽기

Cited

함께 보면 좋은 기술 노트

워드프레스 밖의 주제는 같은 팀이 운영하는 동지커뮤니케이션 기술 인사이트에 정리돼 있습니다. 아래 요약은 원문 그대로 인용했으며, 제목을 누르면 원문으로 이동합니다.

기술 인사이트 전체 보기

₩270,000 · 신청하기