InfranView를 이용하여 이미지를 WebP 형식으로 변환하는 방법
WebP는 Google에서 개발한 이미지 파일 형식으로, 이미지 파일의 품질을 유지하면서 파일 크기를 줄이는 데 중점을 둔 포맷이다. WebP는 손실 압축과 무손실 압축을 모두 지원하며, JPEG, PNG, 그리고 GIF와 같은 기존 이미지 형식의 대안으로 설계되었다.
JPEG나 PNG 등의 이미지를 WebP 형식으로 바꾸는 프로그램은 여러 가지가 있는데, 이미지 뷰어인 InfranView도 그 중의 하나이다.
InfranView를 설치하고, WebP 형식으로 변경하는 방법을 알아본다.
설치
- InfranView 홈페이지에서 다운로드하고 설치한다.
- WebP 변환을 위해서는 플러그인도 설치해야 한다.
WebP로 변환
- 변환하려는 이미지를 InfranView에서 연다.
- [File - Save as]를 클릭한다.
- 파일 형식을 WEBP로 선택한다.
- 오른쪽 창에서 옵션을 적절히 설정한다.
- [저장]을 클릭하면 WebP 형식으로 이미지가 저장된다.
- 기본 설정 하에서 JPG 파일을 변환했을 때, 이미지 크기가 약 1/4로 줄어든 것을 확인할 수 있다.
- 아래 이미지가 변환 전 JPG 이미지이고...
- 아래 이미지는 변환한 WebP 이미지이다. 손실 압축을 하였기에 약간의 차이는 있다.
CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다. 문법 @import "path/filename"; 예를 들어 @import "inc/abc.scss"; 는 inc 폴더 안의 abc.scss 파일을 가져옵니다. CSS 파일 가져오기 CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다. SCSS @import "inc.css"; CSS @import url(inc.css); SCSS 파일 가져오기 SCSS 파일을 가져오면 그 파일의 내용이 현재 파일에 추가됩니다. inc.scss h1 { margin: ...
크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법
웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다. 이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데... 원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다. 해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 ...
Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...
Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하기 Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다. CDN 이용하기 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 4.7.0은 Font Awesome 버전으로, 숫자를 변경해서 원하는 버전을 사용할 수 있습니다. 다운로드 받아 사용하기 Font Awesome v4.7.0 홈페이지에서 다운로드를 클릭합니다. 새 창이 뜨면 ...
robots.txt 파일은 웹사이트의 루트 디렉터리에 위치하여 검색 엔진 크롤러(예: Googlebot)에게 어떤 페이지나 파일을 크롤링할 수 있는지 또는 크롤링할 수 없는지 알려주는 텍스트 파일이다. 이 파일은 웹사이트의 크롤링 지침을 설정하는 데 사용된다. 구성 요소 User-agent 크롤러의 이름을 지한다. 예를 들어, 구글은 Googlebot, 빙은 Bingbot이다. *는 모든 크롤러를 의미한다. Disallow 크롤러가 접근하지 못하도록 할 경로를 지정한다. Disallow: ...
대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...
코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...
CSS는 변수를 사용할 수 없습니다. 반복적으로 사용되는 코드라도 계속 입력을 해야 합니다. 그 코드가 바뀌면 모든 코드를 수정해야 합니다. 하지만, SASS는 변수를 사용할 수 있습니다. 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있습니다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해집니다. 변수 선언하기 $variable-name: variable-value; 예를 들어 $jb-color: red; 와 같이 하면 jb-color라는 변수에 ...
clipboard.js / 클립보드에 복사하게 해주는 스크립트
clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...
InfranView를 이용하여 이미지를 WebP 형식으로 변환하는 방법
WebP는 Google에서 개발한 이미지 파일 형식으로, 이미지 파일의 품질을 유지하면서 파일 크기를 줄이는 데 중점을 둔 포맷이다. WebP는 손실 압축과 무손실 압축을 모두 지원하며, JPEG, PNG, 그리고 GIF와 같은 기존 이미지 형식의 대안으로 설계되었다. JPEG나 PNG 등의 이미지를 WebP 형식으로 바꾸는 프로그램은 여러 가지가 있는데, 이미지 뷰어인 InfranView도 그 중의 하나이다. InfranView를 ...