css 메모장

onClick등 모바일에서 클릭 범위 볼때 원치 않는 범위까지 보일때

cursor:pointer범위확인, 필요한 범위에만 적용

<img src="/image.svg"/>와 CSS :before에 background:url('/image.svg')을 사용하여 이미지를 나타내는 방식에는 몇 가지 차이

HTML과 CSS의 역할

<img> 태그는 HTML 요소로, 이미지를 표시하는 데 사용됩니다. 반면에, :before 선택자와 background 속성은 CSS 스타일링에 사용되며, 이미지를 요소의 배경으로 표시합니다.

요소에 이미지를 표시하는 방식
<img> 태그는 이미지를 직접 요소 내에 삽입하여 표시합니다. 반면에, :before 선택자와 background 속성은 요소의 배경으로 이미지를 표시합니다.

이미지 표시 시기
<img> 태그는 브라우저가 HTML을 해석하면 이미지를 다운로드하고 즉시 표시합니다. 반면에, :before 선택자와 background 속성은 요소가 렌더링되고 스타일이 적용된 후에 이미지를 다운로드하고 표시합니다.

이미지의 크기
<img> 태그를 사용하면 이미지의 원본 크기가 유지됩니다. 반면에, background 속성을 사용하면 이미지의 크기를 요소의 크기에 맞게 조정할 수 있습니다.

따라서, <img> 태그와 :before 선택자와 background 속성을 사용하여 이미지를 나타내는 방식은 다릅니다. 어떤 방식을 선택할지는 사용하려는 문맥과 목적에 따라 달라집니다.

JSX파일에서 일반 CSS 조건 적용

<span className={`test ${commentCount > 0 ? 'on' : ''}`}></span>