Develop Log/HTML, CSS 썸네일형 리스트형 CSS - Box-shadow, Drop-shadow CSS - Box-shadow, Drop-shadow 개인 프로젝트를 하던 중 내가 보여주려는 콘텐츠에 그림자를 넣어주어 입체감을 주고 그림자를 이용한 효과를 주는 작업을 진행을 하게 됐다. svg 이미지에 그림자를 넣고 마우스 이벤트를 통해 그림자의 진하기와 색상등의 효과를 넣어주어야 했는데 기존에 알고 있던 box-shadow속성을 사용하여 적용하려고 했지만 이미지에 그림자가 적용되는것이 아닌 이미지를 담고 있는 div 태그에 적용이 되는 문제가 발생했다. 구글링이나 여러 속성을 확인해보면서 svg에 직접적으로 그림자를 주게 된다면 효과를 발생시킬 때마다 svg에서 직접 변경이 이루어지기 때문에 만족스럽지 않은 수정이었고 이후 찾았던 속성이 filter에 있는 drop-shadow였다. drop-sh.. 더보기 media query 알아보기 - prefers-reduced-data prefers-reduced-data prefers-reduced-data는 사용자가 데이터 사용량을 줄이길 원할 때 적용할 수 있는 미디어 쿼리이다 사용자가 스마트폰이나 태블릿 같은 기기에서 데이터를 절약하고 싶거나 인터넷 연결 속도가 느린 경우 등에서 유용하게 활용할 수 있는 기능이다 prefers-reduced-data두 가지 값을 가지고 있다 no-preference: 사용자가 데이터 사용량에 대한 선호도를 설정하지 않았음을 나타낸다 reduce : 사용자가 데이터 사용을 최소화하길 원할 때를 나타낸다 이 기능을 이용하게 되면 데이터 사용량을 줄이길 원하는 사용자에게 불필요한 이미지나 비디오를 로드하지 않도록 하거나 배경의 이미지를 로드하지 않고 색상으로 볼 수 있도록 하는 등의 간소한 레이아웃을.. 더보기 @media 쿼리 알아보기 - prefers-color-scheme 이전에 알아보았던 미디어 쿼리 다음으로 prefers-color-scheme에 대해서 알아보려고 한다 처음 명칭만으로 보았을 때는 색상에 관련된 것인걸 추측할 수 있었지만 역시나 처음 보는 미디어 쿼리였고 정확히 어떤 역할을 하는 건지는 파악하지 못했다 prefers-color-scheme 역시 생각했던대로 prefers-color-scheme은 색상에 관련된 미디어 쿼리였다 이 미디어 쿼리는 사용자의 시스템의 테마에 따라서 스타일을 지정해 줄 수 있는 미디어 쿼리이다 prefers-color-scheme는 시스템의 테마가 밝은 테마인지 혹은 어두운 테마인지를 판별하여 웹사이트의 색상 테마를 변경할 수 있다 우리가 웹사이트를 사용하며 자주 접하는 dark모드와 light모드같은 색상 테마를 판별하기 때문.. 더보기 @media 쿼리 알아보기 - prefers-reduced-motion 최근에 css에 대해 조금 더 모르는 부분을 메꾸기 위한 방법으로 여러 css 관련 문서나 사이트를 찾아보던 중 처음 보는 미디어 쿼리를 보고 이게 어떤 기능인지 알아보려고 한다 여러 미디어 쿼리 중 처음보고 신기하다고 생각되는 기능들에 대해서 몇 가지 정리를 하고 하나씩 기록해 볼 예정이다 prefers-reduced-motion prefers-reduced-motion은 사용자의 운영 체제 설정을 통해 애니메이션의 강도를 제어하는 데 사용하는 데 사용을 한다고 한다 이 미디어 쿼리는 웹 개발자가 애니메이션에 대한 사용자의 선호 설정에 따라 페이지의 요소를 변경하거나 조정할 수 있도록 한다 이 미디어 쿼리는 주로 모션에 대한 민감도가 늫은 사용자들에게 도움이 된다 이 미디어 쿼리는 사용자가 모션 감소 .. 더보기 시맨틱 태그 시맨틱 태그란 해당 영역이 그 자체로 의미를 가지며 어떠한 의미를 가지고 있는지 명확하게 표현하는 태그를 말한다 이를 통해 검색 엔진이 콘텐츠를 이해하는 데 도움이 되고, 웹 접근성을 높이는데도 중요한 역할을 하게 된다 시맨틱 태그 특징 의미론적 표현 : 시맨틱 태그는 그 자체로 의미를 가지고 있다 예를 들어 태그는 페이지의 상단, 태그는 문서의 구역을 의미하고 있다. 검색 엔진 최적화 (SEO) : 검색 엔진은 시맨틱 태그를 통해 페이지의 주요 콘텐츠를 더 쉽게 파악할 수 있다. 웹 접근성 향상 : 스크린 리더와 같은 보조 기술은 시맨틱 태그를 사용하여 콘텐츠를 더 정확하게 이해하고 사용자에게 전달할 수 있다. 이렇게 스크린 리더와 같은 부분을 개선시키게 된다면 시각 장애인과 같은 사용자들이 웹 사이트.. 더보기 이전 1 2 다음
