탐구하는 취르미

[CSS] 왜 <span>은 수직 중앙 정렬이 안 맞고, <img>는 맞을까?

UI 작업하다 보면 이런 경험 있으실 거예요.텍스트 옆에 작은 뱃지나 아이콘을 붙이고 싶은데, 으로 만들면 수직 중앙이 애매하게 어긋납니다.타이틀 영역입니다 뱃지strong { display: inline-block; color: #131518; font-size: 16px; font-style: normal; font-weight: 700; line-height: 22px; word-break: keep-all; >span { margin-left: 5px; color: #99A1A8; font-size: 13px; font-style: italic; font-weight: 400; line-height: ..

모바일 웹을 개발하다 보면 간혹 예상치 못한 터치 이슈를 만납니다. 특히 iPhone 15 Pro Max와 같은 최신 디바이스에서, 버튼을 눌렀을 때 터치 하이라이트가 엉뚱한 위치에 표시되는 문제를 겪은 적 없으신가요?이번 포스팅에서는 그런 문제를 겪었을 때, CSS 속성 touch-action: manipulation;이 어떻게 해결책이 되었는지 공유해 보려 합니다.어떤 문제에 효과적인가?1. 더블탭 확대 방지모바일 Safari 등에서 버튼이나 링크를 두 번 탭할 때 화면이 자동으로 확대되는 현상을 막습니다.2. 터치 반응 지연 제거 (300ms 딜레이)과거 모바일 브라우저는 더블탭 확대를 구분하기 위해 클릭 반응에 300ms 지연을 뒀습니다. touch-action: manipulation;으로 즉시..

리액트를 쓰다 보면 간혹 스타일이 “왜 안 먹지?” 싶은 경험을 하게 됩니다. 최근 작업 중 실제로 겪은 사례를 정리해 보겠습니다. 이런 코드, 왜 CSS가 적용이 안 될까?다음과 같은 구조의 React 컴포넌트가 있다고 가정해 보겠습니다 {description} 여기서 Thumbnail에 스타일을 적용하고 싶은데, 아래처럼 작성한 CSS가 전혀 먹히지 않았습니다..thumbnail { bottom: 40px;} 그런데 신기하게도 다음과 같이 수정하면 스타일이 정상적으로 적용됩니다..shortsArea { [class*="thumbnail"] { bottom: 40px; }} 왜 이걸 쓰는 경우가 생기냐면…Thumbnail 컴포넌트가 외부에서 className을 전달..

리액트에서 Swiper 라이브러리를 사용할 때, SCSS로 커스텀 스타일을 주려는데 스타일이 전혀 적용되지 않았던 경험, 혹시 있으신가요?이 문제는 SCSS 모듈(CSS Modules) 때문에 발생합니다. 그 이유와 해결 방법에 대해서 알아봅시다.문제의 원인: SCSS Modules의 클래스 네이밍 방식SCSS 모듈을 사용하면 클래스명은 로컬 스코프(local scope)로 변환됩니다. 즉, 아래처럼 작성한 .swiper 클래스는 실제 HTML에선 swiper_xyz123처럼 바뀝니다.하지만 Swiper 라이브러리는 HTML을 렌더링할 때 순수한 전역 클래스명인 .swiper를 사용합니다.결과적으로, SCSS 모듈에서 정의한 스타일은 Swiper의 클래스에 적용되지 않는 거예요. 해결 방법: :globa..

웹 개발을 하다 보면 요소에 이미 값이 들어가 있는 상태에서 특정한 스타일을 적용해야 하는 경우가 있습니다. 예를 들어, 사용자가 직접 입력한 값과 미리 설정된 값을 시각적으로 구분해야 하거나, 읽기 전용(readonly) 또는 비활성화(disabled) 상태로 설정해야 할 수도 있죠. 이번 포스팅에서는 readonly 및 disabled 속성의 차이와 CSS 스타일링 방법에 대해서 알아보겠습니다. readonly와 disabled 속성의 차이 readonly가 적용되는 태그readonly는 사용자가 값을 수정할 수 없지만, 해당 요소의 값은 폼에 포함되는 속성입니다. 이 속성은 텍스트 입력 요소에만 사용 가능하며, 사용자가 입력을 변경할 수 없도록 하면서도 해당 값은 폼 제출 시 포함됩니다.✅ 적용 ..

웹사이트에서 input[type="radio"]가 체크되었을 때 특정 요소를 보이게 하려면 CSS만으로도 쉽게 구현할 수 있습니다. 이번 포스팅에서는 :checked 가상 클래스와 + 및 ~ 형제 결합자(Combinator)를 활용하는 방법에 대해서 알아보겠습니다.기본 예제: + (인접 형제 선택자) 사용하기input[type="radio"]:checked + .content는 체크된 input 바로 다음에 오는 .content 요소를 선택하여 display: block;으로 변경합니다.* 주의할 점은 +는 인접한 형제 요소만 선택할 수 있기 때문에, 중간에 다른 요소가 있으면 .content에 스타일이 적용되지 않습니다. 옵션 선택이 내용이 표시됩니다! ~ (일반 형제 선택자) 사용하기+ 선택자는..