CSS

이 글은 CSS의 clip-path 속성으로 이미지의 표시 영역을 자르는 방법을 다룬다. 다각형 모양으로 고정해서 자르는 예제부터 마우스를 올렸을 때 영역을 펼치는 예제, 페이지가 열리면 애니메이션으로 이미지를 드러내는 예제까지 차례로 확인한다. HTML 구조는 같지만 CSS에 지정한 도형과 변화 방식에 따라 화면이 어떻게 달라지는지 비교할 수 있다. 예제1: 다각형 모양으로 이미지 자르기 clip-path(클립 패스)는 요소에서 화면에 표시할 … 더 읽기

CSS 마스크(Mask)는 특정 그래픽의 알파 채널(투명도)이나 휘도를 기준으로 요소의 표시 영역을 제어하는 속성이다. 마스크는 종이 위에 모양 틀을 대고 원하는 부분만 오려내는 스텐실 공정과 같아서, 사각형 틀을 벗어난 독창적인 외곽선을 웹 요소에 부여할 때 활용된다. 이 문서에서는 벡터(Vector) 형식인 SVG(에스브이지) 그래픽을 마스크 이미지로 지정하여 카드 레이아웃과 비디오 재생 영역에 적용하는 방법을 설명한다. MDN 미리보기 이미지다운로드 … 더 읽기

1. 컨테이너쿼리 VS 미디어쿼리 미디어 쿼리(Media Query): 미디어 쿼리는 CSS3에 소개된 기능으로, 브라우저의 뷰포트 너비와 같은 조건에 따라 스타일을 적용할 수 있게 해주는 기능입니다. 따라서 브라우저 창의 크기에 따라 다른 스타일을 적용하거나, 특정 뷰포트 크기에서만 특정 CSS를 적용하는 등의 작업이 가능합니다. 예를 들어, 미디어 쿼리를 사용해서 브라우저 창의 너비가 600px 미만일 때는 배경색을 빨간색으로, 600px … 더 읽기

7. retina 1. 해상도별 이미지 출력 준비 1.1. 개요 해상도별로 이미지를 출력하는 기술은 다양한 장치와 환경에서 웹 페이지의 사용자 경험을 향상시키기 위해 중요합니다 현재는 다양한 종류의 디바이스(데스크탑, 노트북, 스마트폰, 태블릿 등)와 화면 크기가 존재합니다. 각 디바이스와 환경에 맞는 이미지를 제공하여 사용자가 최적화된 경험을 얻을 수 있도록 해야 합니다 또한 고해상도 이미지를 모든 디바이스에 동일하게 제공하면 … 더 읽기