Web UI Dev. / dece24&gmail,com
Joined October 2008
- Tweets 6,068
- Following 78
- Followers 2,360
- Likes 442
736 Photos and videos
26 Aug 2025
이 코드가 흥미로운 이유는 flex, grid 컨테이너가 아니어도 포함한 콘텐츠를 수직으로 정렬 시킬 수 있다는 점이다. 그리고 내가 사용하는 저장소에서 아직 단 한 번도 쓰지 않았다는...🤣 w3.org/TR/css-align-3/#align…
2
291
23 Jul 2025
터치 단말은 :hover가 없지만 :focus를 :hover로 간주한다. 이것은 의도하지 않은 문제를 유발. 예를 들면 SPA 방식으로 구현한 웹에서 이전 페이지로 이동(슬라이드, 백키)했음에도 기존 페이지 링크에 초점이 남아서 마치 :hover한 것처럼 표시한다. 정교한 포인팅 장치를 필터링해서 문제를 해결.
7
22
1,033
8 Jul 2025
<fieldset> 요소는 다른 요소와 다르게 UA CSS 초깃값을 min-width: min-content 으로 설정하고 있다. 이 설정 때문에 필드셋 요소 내부 콘텐츠를 말줄임 처리할 수 없는 문제가 생긴다. fieldset 요소를 min-width: 0 으로 초기화하면 말줄임 처리가 가능하다. codepen.io/naradesign/pen/Qw…
2
1
281
15 May 2025
<dialog> 요소는 내장 메서드 show(), showModal() 으로 화면에 표시할 수 있다. 이 경우 사용자가 Esc(Desktop), Back(Android) 키를 사용하면 대화 상자를 닫을 수 있다. 한편 <dialog> 요소에 closedby="any" 속성을 사용하면 대화 상자 외부를 클릭할 때에도 닫을 수 있다. 현재 크롬, 엣지 지원.
1
2
245
10 Mar 2025
Safari 브라우저에서 @container 쿼리를 사용할 때 자식 요소를 잘못 배치하는 문제가 있다. Safari가 최근 명세 반영에 다소 늦게 대응하고 있는 것으로 파악.
reddit.com/r/webdev/comments…
1
208
27 Feb 2025
CSS에서 :has() 가상 선택자가 매개 변수를 처리하는 방법.
:has(.x, .y) == .x || .y
:has(.x):has(.y) == .x && .y
4
237
12 Dec 2024
모바일 크롬 브라우저에서 viewport 크기를 잘못 렌더링하는 문제 때문에 position: fixed를 사용하는 대화 상자를 잘못 배치했다. viewport 제어하는 meta 태그에 interactive-widget=resizes-content 속성과 값을 넣어서 문제를 해결했다. 더 이상 자세히는 알고 싶지 않다. t.ly/-_eDH
1
5
7
561
5 Nov 2024
VSCode에서 나만의 코드 자동 완성 기능을 설정할 수 있다. 예를 들면 .scss 개발 환경에서 '@th'와 같이 내가 임의로 설정한 단축 명령어를 입력하면 라이트/다크 테마 코드를 분기하는 CSS 코트 조각을 한 번에 완성해 주는 식이다. code.visualstudio.com/docs/e…
1
367
29 Oct 2024
GUI보다 더 큰 탭(or 클릭) 타겟(최소 48*48픽셀)을 생성하기 위해 투명한 보더를 사용한다. 투명한 보더 영역도 클릭 가능하기 때문에. 배경 색이 투명한 border를 침범하지 않도록 만드는 데 background-clip 속성이 유용하다.
참고: 탭 타겟의 크기가 적절하지 않음
developer.chrome.com/docs/li…
5
386
28 Sep 2024
와.. 이게 되네요. 인접한 형제 요소 <b>의 콘텐츠가 빈 값일 때 <a> 요소 선택하기. <b> 요소가 빈 값일 때 <a> 요소에 셀 병합이 필요했는데 굿잡!
1
2
12
986
6 Sep 2024
라이트 모드? 다크 모드? ➡️ light-dark(<color>, <color>)
W3C - w3.org/TR/css-color-5/#light…
MDN - developer.mozilla.org/en-US/…
Can I use - caniuse.com/mdn-css_types_co…
Demo - codepen.io/naradesign/pen/yL…
1
5
471
정찬명 retweeted
3 Sep 2024
CSS, 2024년에 드디어 "세로 중앙 정렬"이 추가됨 news.hada.io/topic?id=16586
- CSS는 마침내 `align-content`를 디폴트 레이아웃에 추가하여 **단 한 줄의 CSS 속성**으로 수직 정렬이 가능해짐
- 지원 버전 Chrome 123, Firefox 125, Safari: 17.4
- 현재는 기본 레이아웃(flo...
203
140
25,893
29 Aug 2024
transform 속성의 값은 선언한 순서대로 적용한다. 그러나 translate, rotate, scale 속성을 개별적으로 선언하면 우선 순위는 없고 각자의 속성을 개별적으로 적용한다.
➡️webdev - web.dev/articles/css-individ…
➡️W3C - w3.org/TR/css-transforms-2/#…
➡️Demo - codepen.io/naradesign/pen/bG…
4
274
25 Jul 2024
<div> 요소는 아무런 의미가 없다. 이런 의미 없는 요소를 두 겹 이상 중첩하고 있다면 콘텐츠가 어떤 의미인지 이해하지 못했거나 또는 불필요한 래퍼로 사용하고 있을 확률 58,000%.
1
3
297
19 Jul 2024
뷰포트 하단에 버튼을 고정했더니 폼을 입력할 때 가상 키패드가 올라오면서 버튼 영역이 따라 올라왔다. 그리고 입력 중인 화면을 가렸다. 화면 안에 초점을 받은 요소가 있을 때에는 이 버튼을 뷰포트에 고정하지 않도록 처리할 수 있다. :focus-within 선택자가 중요한 역할을 한다.
19
38
2,242
9 Jul 2024
이런 깔끔한 스타일 좋아합니다. 인스펙터에 취소 선 나오는 거 싫어요.
.btn { ... }
.btn:enabled { ... }
.btn:disabled { ... }
6
359