정찬명

Web UI Dev. / dece24&gmail,com

[정찬명 @naradesign]

이 코드가 흥미로운 이유는 flex, grid 컨테이너가 아니어도 포함한 콘텐츠를 수직으로 정렬 시킬 수 있다는 점이다. 그리고 내가 사용하는 저장소에서 아직 단 한 번도 쓰지 않았다는...🤣 https://t.co/ZJK7RGI2x7

[정찬명 @naradesign]

터치 단말은 :hover가 없지만 :focus를 :hover로 간주한다. 이것은 의도하지 않은 문제를 유발. 예를 들면 SPA 방식으로 구현한 웹에서 이전 페이지로 이동(슬라이드, 백키)했음에도 기존 페이지 링크에 초점이 남아서 마치 :hover한 것처럼 표시한다. 정교한 포인팅 장치를 필터링해서 문제를 해결.

[정찬명 @naradesign]

<fieldset> 요소는 다른 요소와 다르게 UA CSS 초깃값을 min-width: min-content 으로 설정하고 있다. 이 설정 때문에 필드셋 요소 내부 콘텐츠를 말줄임 처리할 수 없는 문제가 생긴다. fieldset 요소를 min-width: 0 으로 초기화하면 말줄임 처리가 가능하다. https://t.co/nlznCVoDxw

[정찬명 @naradesign]

죽은 소프트웨어가 산 사람을 괴롭히면 안 되죠. 소프트웨어의 사망 선고 날짜를 알려 주는 웹 사이트 발견!
https://t.co/V6Hq4LVFJL

[정찬명 @naradesign]

데모 - https://t.co/CbYPlyxFi6

[정찬명 @naradesign]

<dialog> 요소는 내장 메서드 show(), showModal() 으로 화면에 표시할 수 있다. 이 경우 사용자가 Esc(Desktop), Back(Android) 키를 사용하면 대화 상자를 닫을 수 있다. 한편 <dialog> 요소에 closedby="any" 속성을 사용하면 대화 상자 외부를 클릭할 때에도 닫을 수 있다. 현재 크롬, 엣지 지원.

[정찬명 @naradesign]

Safari 브라우저에서 @container 쿼리를 사용할 때 자식 요소를 잘못 배치하는 문제가 있다. Safari가 최근 명세 반영에 다소 늦게 대응하고 있는 것으로 파악.
https://t.co/UYP52umaXj

[정찬명 @naradesign]

이제는 @container 쿼리를 사용해야겠어. Demo & How to use.
https://t.co/qCEwRtR4M4

[정찬명 @naradesign]

CSS에서 :has() 가상 선택자가 매개 변수를 처리하는 방법.

:has(.x, .y) == .x || .y
:has(.x):has(.y) == .x && .y

[정찬명 @naradesign]

안드로이드 크롬 브라우저에서 동일한 페이지를 반복해서 새 탭으로 띄울 때에만 발생하는 이슈이다.

[정찬명 @naradesign]

모바일 크롬 브라우저에서 viewport 크기를 잘못 렌더링하는 문제 때문에 position: fixed를 사용하는 대화 상자를 잘못 배치했다. viewport 제어하는 meta 태그에 interactive-widget=resizes-content 속성과 값을 넣어서 문제를 해결했다. 더 이상 자세히는 알고 싶지 않다. https://t.co/ucY6unwrMY

[정찬명 @naradesign]

VSCode에서 나만의 코드 자동 완성 기능을 설정할 수 있다. 예를 들면 .scss 개발 환경에서 '@th'와 같이 내가 임의로 설정한 단축 명령어를 입력하면 라이트/다크 테마 코드를 분기하는 CSS 코트 조각을 한 번에 완성해 주는 식이다. https://t.co/0K1QuOnAWu

[정찬명 @naradesign]

GUI보다 더 큰 탭(or 클릭) 타겟(최소 48*48픽셀)을 생성하기 위해 투명한 보더를 사용한다. 투명한 보더 영역도 클릭 가능하기 때문에. 배경 색이 투명한 border를 침범하지 않도록 만드는 데 background-clip 속성이 유용하다.

참고: 탭 타겟의 크기가 적절하지 않음
https://t.co/F0fnKt2vCz

[정찬명 @naradesign]

와.. 이게 되네요. 인접한 형제 요소 <b>의 콘텐츠가 빈 값일 때 <a> 요소 선택하기. <b> 요소가 빈 값일 때 <a> 요소에 셀 병합이 필요했는데 굿잡!

[정찬명 @naradesign]

라이트 모드? 다크 모드? ➡️ light-dark(<color>, <color>)

W3C - https://t.co/OLyFZMLvFL
MDN - https://t.co/53M0hmKnaa
Can I use - https://t.co/vtakMIymSJ
Demo - https://t.co/PjAKLpx73j

[GeekNews @GeekNewsHada]

CSS, 2024년에 드디어 "세로 중앙 정렬"이 추가됨 https://t.co/DduvRCTgRC
- CSS는 마침내 `align-content`를 디폴트 레이아웃에 추가하여 **단 한 줄의 CSS 속성**으로 수직 정렬이 가능해짐
- 지원 버전 Chrome 123, Firefox 125, Safari: 17.4
- 현재는 기본 레이아웃(flo...

[정찬명 @naradesign]

transform 속성의 값은 선언한 순서대로 적용한다. 그러나 translate, rotate, scale 속성을 개별적으로 선언하면 우선 순위는 없고 각자의 속성을 개별적으로 적용한다.

➡️webdev - https://t.co/UtRzOLL7jP
➡️W3C - https://t.co/Jd23tWg5yc
➡️Demo - https://t.co/1UHX5MHR7o

[정찬명 @naradesign]

<div> 요소는 아무런 의미가 없다. 이런 의미 없는 요소를 두 겹 이상 중첩하고 있다면 콘텐츠가 어떤 의미인지 이해하지 못했거나 또는 불필요한 래퍼로 사용하고 있을 확률 58,000%.

[정찬명 @naradesign]

뷰포트 하단에 버튼을 고정했더니 폼을 입력할 때 가상 키패드가 올라오면서 버튼 영역이 따라 올라왔다. 그리고 입력 중인 화면을 가렸다. 화면 안에 초점을 받은 요소가 있을 때에는 이 버튼을 뷰포트에 고정하지 않도록 처리할 수 있다. :focus-within 선택자가 중요한 역할을 한다.

[정찬명 @naradesign]

이런 깔끔한 스타일 좋아합니다. 인스펙터에 취소 선 나오는 거 싫어요.

.btn { ... }
.btn:enabled { ... }
.btn:disabled { ... }