[JS] Window.matchMedia()
window.matchMedia(mediaQueryString) [mediaQueryString] 분석할 미디어 쿼리를 나타내는 문자열. [예시] window.matchMedia('(orientation: portrait)'); window.matchMedia('(min-width: 300px)'); *문자열을 넣돼 괄호도 같이 넣어야 한다. [반환] 뷰포트가 300px 이상이면 matches가 true | 미만이면 false 값을 가지게 된다. [활용] if (window.matchMedia("(min-width: 400px)").matches) { /* 뷰포트 너비가 400 픽셀 이상 */ } else { /* 뷰포트 너비가 400 픽셀 미만 */ } [공부좌표] https://developer.mo..
# 무손실 압축 무손실 압축을 하려면 각 이미지 유형을 다르게 처리해야 한다. 그러나 대체로 스크립트를 통해 압축을 자동화 할 수 있다는 장점이 있다. 온라인으로 무손실 압축을 지원하는 서비스 사이트도 많지만 매번 많은 이미지들을 수작업으로 변환하는 일은 번거롭다. 따라서 무료로 배포되는 라이브러리의 명령어들을 이용해 자동화하는 방법을 활용하도록 한다. 파일명 프로그램 png pngcrush jpeg mozjpeg gif imagemagick # 손실 압축 손실 압축은 특정 이미지 정보를 누락, 즉 손실시켜 파일 크기를 줄이는 방법이다. 예를 들어 사람의 시각은 명암 차이에 민감하지만 채색 차이에 크게 민감하지 않다. 따라서 이미지 색이 비슷한 부분을 하나의 색으로 통일해 그만큼의 정보를 손실시켜도 사용..
# 설치 brew install imagemagick # 명령어 mogrify identify convert [이미지의 정보를 보기] identify -verbose example.jpg [다른 타입으로 변환] convert input.gif output.png https://lifeasy88.tistory.com/51 imagemagick 설치 및 사용법(사진 용량 및 크기 줄이기) Mac에서 이미지 편집에 자주 사용하는 커맨드 라인 툴인 imagemaggick을 소개합니다. imagemagick은 커맨드 라인 명령어로 엄청나게 다양한 이미지 편집 기능을 제공하는 프로그램이에요. 저는 일반적 lifeasy88.tistory.com