[CSS] HTML <img> vs background-image 차이 비교
·
CSS
서론 이미지는 항상 HTML 태그를 사용하여 나타냈었는데, Scflix 프로젝트를 진행하면서 background-image를 사용하게 되었다. 둘 다 이미지를 나타낸다는 공통점이있는데, 두 방식의 차이점을 알아보고 어떤 방식이 더 나은지 정리를 해보려고 한다. 사용 방법 // HTML img tag // CSS background-image HTML HTML 에서 사용 가능 background-image 보다 SEO에 효과적 background-image 보다 성능에 효과적 default 이미지 포함 가능 이미지 불러오지 못했을경우 default 값으로 Broken image와 alt 텍스트가 보인다. background-image CSS에서 사용 가능 순수하게 디자인에 사용 이미지가 콘텐츠의 일부가 아..
[React] 타이머 만들기 / Router와 상단 NavBar 추가, padStart 적용
·
Project/Timer Project
추가 상단에 NavBar를 만들었고, Router를 통해 경로 지정을 해주었다. 변경 타이머 빈 공간에 0을 조건식으로 작성했었다. {currentHours < 10 ? `0${currentHours}` : currentHours}:{ currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes}:{ currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds} 이러한 방식은 시간을 저장하게 되었을 때 중복이 되고, 불편할 것이라 생각하여 ES7의 padStart를 사용하였다. setCurrentHours(String(hours).padStart(2, '0')) setCurrentSeconds(String(sec..