코딩용 글꼴 D2Coding 설치하는 방법
코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다.
코딩에 한글이 많이 들어가는 경우 한글도 잘 나오는 글꼴이 필요한데, 그러한 글꼴 중의 하나가 네이버에서 제공하는 D2coding입니다. 영어도, 한글도 보기 좋게 나옵니다.
D2coding 글꼴 배포는 GitHub에서 합니다. 최신 버전의 ZIP 파일을 다운로드 하세요.
압축을 풀고 글꼴을 설치하세요. 윈도우 10 사용자라면 글꼴을 선택하고, 마우스 우클릭한 후 [모든 사용자용으로 설치]를 클릭하면 됩니다.([설치]를 클릭하면 현재 사용자만 글꼴을 사용할 수 있습니다.)
D2coding 글꼴은 다음처럼 생겼습니다. 한글과 영어의 모양이 일관성 있고, 가독성이 높습니다.
아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법
아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...
MySQL Workbench / Windows 10에 설치하는 방법
MySQL Workbench는 MySQL 데이터베이스를 관리하고 분석할 때 유용한 도구입니다. 호환성 문제가 있다고 하지만, MariaDB로 관리 가능합니다. MySQL Workbench를 Windows 10에 다운로드하고 설치하는 방법을 정리합니다. 다운로드 https://www.mysql.com/products/workbench/에서 다운로드 합니다. 는 MySQL을 다운로드 하는 것이니, 혼동하지 마세요. 로그인하라고 하는데, 굳이 그러고 싶지 않다면 를 클릭합니다. 바로 ...
InfranView를 이용하여 이미지를 WebP 형식으로 변환하는 방법
WebP는 Google에서 개발한 이미지 파일 형식으로, 이미지 파일의 품질을 유지하면서 파일 크기를 줄이는 데 중점을 둔 포맷입니다. WebP는 손실 압축과 무손실 압축을 모두 지원하며, JPEG, PNG, 그리고 GIF와 같은 기존 이미지 형식의 대안으로 설계되었습니다. JPEG나 PNG 등의 이미지를 WebP 형식으로 바꾸는 프로그램은 여러 가지가 있는데, 이미지 뷰어인 InfranView도 그 중의 하나입니다. InfranView를 ...
Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { content: "\f105"; } 기본 마커 없애기 순서 ...
WebP와 AVIF는 웹에서 이미지 파일을 압축하고 전달하는 데 사용되는 최신 이미지 포맷이다. 이들은 기존 포맷인 JPEG, PNG와 비교하여 더 나은 압축 성능과 이미지 품질을 제공한다. WebP Google에서 개발한 이미지 포맷으로, 2010년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다. 장점 더 작은 파일 크기 JPEG와 비교했을 때, WebP는 동일한 이미지 품질에서 파일 크기를 약 25-34% 줄일 ...
cwebp를 이용하여 이미지를 WebP 형식으로 변환하는 방법
JPG, PNG 등의 이미지를 WebP 형식으로 변환하는 방법은 여러 가지가 있습니다. 그 중 구글이 제공하는 cwebp라는 프로그램으로 변환하는 방법을 알아보겠습니다. 다운로드 아래의 링크에서 다운로드를 할 수 있습니다. https://developers.google.com/speed/webp/docs/precompiled?hl=ko Windows용, Linux용, macOS용을 제공하고 있으니, 사용하는 OS에 맞게 다운로드합니다. 여기서는 Windows용으로 설명합니다. 압축 풀기 Windows용 파일을 다운로드한 후 압축을 풉니다. 압축만 풀면 되고, 설치는 따로 할 필요가 없습니다. D:\cwebp에 압축을 ...
웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법
웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...
CSS에서 주석은 /*와 */로 만듭니다. SASS에서는 CSS 주석 외에 한 줄 주석인 //를 지원합니다. 컴파일 했을 때 CSS 주석은 그대로 남아 있지만 한 줄 주석은 사라집니다. SASS /* CSS Comment */ // Line Commnet p { color: red; /* CSS Comment */ padding: 20px; // Line Comment } CSS /* CSS Comment */ p { color: red; ...
Font Awesome 5 / 아이콘으로 체크박스 디자인하기
체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...
SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...