개발 마라톤

h1 텍스트 숨기기 웹 접근성을 고려하여 텍스트 숨기기 (velog.io) 웹 접근성을 고려하여 텍스트 숨기기 텍스트를 숨기는 여러 방법 중 웹접근성을 지킬 수 있는 방법은 어떤게 있는지에 관한 글 velog.io 웹 사이트의 제목을 h1으로 주고 싶은데, 텍스트 명은 숨기고 로고 이미지로 대체하고 싶어서 텍스트를 숨기는 방법을 찾아보았다. 윗 글을 정리하면 다음과 같다. display: none; 영역에서 아에 사라지며, 검색엔진이 접근할 수 없고, 스크린리더가 읽을 수 없다. width: 0; height: 0; font-size: 0; line-height: 0; 일부 스크린리더가 해당 요소를 무시할 수 있다. opacity: 0; 일부 스크린리더가 해당 요소를 무시할 수 있다. text-inden..

nth-child 선택자 [CSS]css 가상 선택자 정리 및 비교 (nth-child, nth-of-type) :: lalaCode (tistory.com) [CSS]css 가상 선택자 정리 및 비교 (nth-child, nth-of-type) CSS 선택자 정리 :nth-child(N) = 부모안에 모든 요소 중 N번째 요소 A:nth-of-type(N) = 부모안에 A라는 요소 중 N번째 요소 :first-child = 부모안에 모든 요소 중 첫번째 요소 :last-child = 부모안에 모든 요소 중 lalacode.tistory.com 메인 화면 디자인은 홀수의 section만 배경색을 가지길래, 예전에 배웠던 선택자 중에 규칙적인 선택자 선택을 하는 방법이 있었던 것 같아 찾아보았다. CSS ..

CSS Module 사용으로 전환 vanilla extract이 렌더링 시 적용되지 않는 문제 · Issue #7 · 1004ljy980/CharFlyer (github.com) vanilla extract이 렌더링 시 적용되지 않는 문제 · Issue #7 · 1004ljy980/CharFlyer vanilla extract이 렌더링 시 적용되지 않는 문제가 발생함. className이 난수화되는 것은 확인됨. CSS stylesheet가 생성되지 않는 것으로 예상됨. github.com CSS 스타일을 어떤 방식으로 할지 고민이 참 많았다. 저번 프로젝트때 CSS Module 방식을 사용했었는데, 변수 사용이 깔끔하지는 않아서 CSS-in-JS로 스크립트 파일 내에 변수를 정리하고 사용해보고 싶었다...

vanila extract 시작 vanilla-extract — Zero-runtime Stylesheets-in-TypeScript. vanilla-extract — Zero-runtime Stylesheets-in-TypeScript. Zero-runtime Stylesheets-in-TypeScript. vanilla-extract.style 오늘은 대부분의 시간을 vanilla-extract을 배우고, 적용하는데 시간을 보냈다. 설치는 공식 페이지의 Next.js — vanilla-extract Next.js — vanilla-extract Zero-runtime Stylesheets-in-TypeScript. vanilla-extract.style 해당 항목을 따라가면 어렵지 않게 설치 가능했다..

Emotion 사용에 대한 고민 [classpick 개발일지 #1] Next.js13으로 마이그레이션하기 - emotion 써도 되나? 고민하기 (velog.io) [classpick 개발일지 #1] Next.js13으로 마이그레이션하기 - emotion 써도 되나? 고민하기 내 마음을 대변하는 누군가의 리플....classpick 개발은 꼭 NextJs로 해보고 싶어서 프로젝트 세팅을 하던 중, 저번달에 NextJs 13가 정식 출시되었고 어느정도 안정화 되었다는 소식이 있어서 꼭 사용 velog.io 해당 글을 읽으며 server component 에 대한 개념을 알게 되었다. Next) 서버 컴포넌트(React Server Component)에 대한 고찰 (velog.io) Next) 서버 컴포넌트..