eunyo의 it이야기

브랜드 로고 사용 가능한 상업용 무료 한글 폰트 추천 안녕하세요. 은요입니다. 오늘은 상업적으로 사용가능한 무료 폰트에 대해 알아보겠습니다. 무료폰트라고 해도 로고, CI 제작이 불가한 폰트가 있는데요. 브랜드 로고는 기업의 얼굴이기때문에 특히나 주의해서 로고폰트를 사용해주어야합니다. 그럼 오늘은 저작권 걱정없이 로고 사용가능한 무료폰트를 알려드릴게요~! 상업적 무료 한글 폰트 1.마포서체(https://www.mapo.go.kr/site/main/content/mapo04010201) 첫번째로 소개드릴 폰트는 마포 서체입니다. 마포서체는 마포 금빛나루, 마포 당인리발전소, 마포 애민, 마포 꽃섬,마포 마포나루, 마포한아름, 마포 다카포, 마포 배낭여행, 마포홍대프리덤 총 9가지로 마포구에서 제작한 폰트..

카카오맵 api 사용법 및 예제 카카오에서는 다양한 api를 제공하고 있습니다. 그 중에서 오늘은 카카오맵을 알아보겠습니다. 우선 카카오 맵을 사용하려면 API KEY를 발급받아야 합니다. 1. 카카오 개발자 사이트 접속하기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 위의 링크를 클릭해 카카오 개발자 사이트에 접속합니다. 2. 카카오 API KEY 발급 시작하기 버튼을 눌러줍니다. 애플리케이션 추가하기를 클릭 한 후, 카카오맵을 사용할 사이트의 정보를 입력해줍니다. 입력이 끝났으면, 새로..

워드프레스 무료 테마 추천 워드프레스는 코딩을 몰라도 웹사이트를 사용할 수 있는 아주 좋은 cms입니다 :) 테마도 다양하고, 플러그인으로 커스텀도 가능한 장점을 가지고 있는데요! 오늘은 워드프레스에서 무료로 사용할 수 있는 테마 중에서 추천할 만한것들을 모아봤습니다. 1.Twenty Twenty 미리보기 다운로드 기본적인 블로그형 반응형 테마입니다. 심플한 레이아웃으로 활용도가 높아보이는 테마입니다. 2.Neve 미리보기 다운로드 블로그, 기업, 개인 포트폴리오 등 여러 사이트에서 사용가능한 Neve 테마입니다. 검색엔진 최적화가 되어있다는 점이 특징이네요! 3.Hestia 미리보기 다운로드 블로그, 기업 개인 포트폴리오에서 사용가능한 Hestia 테마입니다. 4.PhotoBook 미리보기 다운로드 블..

워드프레스(WordPress) 설치 및 다운로드 총 정리 워드프레스는 세계에서 가장 유명한 콘텐츠 관리 시스템(CMS)으로, 웹사이트 시장 40%를 차지할 만큼 높은 점유율을 가지고 있는 CMS입니다. 전 세계 CMS 시장에서는 60%라는 압도적인 점유율을 가지고 있습니다. 워드프레스를 사용해서 블로그, 웹사이트, 쇼핑몰 등의 다양한 사이트를 제작할 수 있습니다. 그럼 오늘은 워드프레스를 설치하는 방법에 대해 알아보겠습니다. 우선 워드프레스를 설치하기 위해서는 웹호스팅이 있어야 합니다. 웹호스팅이 없으신 분들은 아래 포스팅을 참고하여 호스팅을 신청해주세요 ! 국내 호스팅 업체 순위 및 가격 비교 국내 무료 웹 호스팅 서버 사이트 총 정리 1. 워드프레스 다운로드 https://ko.wordpress.or..

[무료] 온라인 웹 포토샵 사이트 포토샵은 어도비에서 월정액을 내고 프로그램을 사용할 수 있습니다.디자이너나 사용량이 많은 분들은 어도비에서 월정액으로 이용해주는 것이 좋겠지만, 개인이 사용하기에는 꽤나 부담스러운 가격이죠. 그래서 포토샵으로 간단하게 수정하거나, PSD 파일을 확인해봐야할 때 사용하기 좋은 무료 포토샵 사이트를 소개해드리려고 합니다. Photopea https://www.photopea.com/ UI를 확인해보면, 어도비의 포토샵과 굉장히 유사한 형태를 가지고 있습니다. PSD뿐만 아니라 AI, XD, sketch와 같은 기능도 지원하고 있습니다. 파일>새로 만들기 시, 포토샵과 동일하게 다음과 같이 작업할 수 있는 프로젝트가 생성됩니다. 아무래도 웹으로 사용하는 포토샵이다보니까, 조금..

유튜브 iframe 반응형 css 사용하기 홈페이지를 제작할 때, ifame을 통해 유튜브나 동영상을 불러오는 경우가 많습니다. 그럴 때 그냥 사용하게 되면 모바일이나 테블릿에서 검은 배경이 노출되기 때문에 css를 조정해줘야하는데요. 다음은 ifame을 반응형으로 사용하는 방법에 대해 알아보겠습니다. 우선, 내가 사용할 동영상의 비율을 알아야 합니다. 일반적으로 pc 기준으로 16:9의 비율을 많이 사용합니다. 다음은 16:9의 비율의 해상도입니다. 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 240p 426x240 비율 구하기 다음은 해상도에 따라 비율을 구하는 방법입니다. 16:9일 경..

컨테이너에 맞게 이미지 크기를 조절해주는 jQuery 플러그인입니다. 반응형에서도 이미지가 깨지지않게 해주고, 사용법도 쉽고 간단합니다. 1. js파일 다운로드 https://github.com/karacas/imgLiquid GitHub - karacas/imgLiquid: jQuery plugin to resize images to fit in a container. jQuery plugin to resize images to fit in a container. - GitHub - karacas/imgLiquid: jQuery plugin to resize images to fit in a container. github.com 깃허브 홈페이지에 가서 js파일을 다운로드 받아줍니다. 2. js파일 연..

맥북 에어 m1 골드 구매후기 한달동안 고민하다가 구매한 맥북 m1 맥북 에어와 맥북 프로와 엄청x100 고민하다가 맥북에어와 프로의 성능차이는 있지만, 스펙은 거의 동일하고 펜의 유무가 가장 큰 차이점이라고 해서 맥북프로를 구매할 가격으로 m1 맥북 에어에 램 업그레이드해서 구매했습니다. 맥북에어 램추가 쿠팡찬스로 145만원에 구매했습니다. 교육할인으로 하면 공홈에서 구매하는게 더 저렴하긴 한데 빨리 받고 싶어서 로켓배송이 되는 쿠팡으로 구매했어요. 주문하고 다음날 바로 배송 된 맥북 후 쿠팡 쵝오야,, 색상 고민도 했는데, 맥북 에어에만 나오는 컬러인 골드컬러를 구매했어요! 결론적으로 완전 만족합니다. 그냥 골드가 아니라 로즈골드 컬러라서 더 이뻐요 ㅠㅠㅠ 매우 초 심플한 구성 .. 구성품은 충전기 ..

파일업로드 커스텀 - reset 파일업로드 폼필드는 브라우저마다 디자인도 다르고, 모양새도 보기 좋지 않기때문에 커스텀을 해서 사용합니다. 하지만 다른 input 과는 다르게 css만으로는 커스텀이 불가능하기때문에 js와 함께 사용해주셔야 합니다. 자세한 코드는 아래를 확인해주세요 :) [html] 파일 찾아보기 파일 지우기 [css] /* 파일 업로드 */ .file_wrap{position: relative;} .file_wrap:after{content: '';display: block;clear: both} .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overfl..

차트를 그릴 때 좋은 c3.js의 사용법과 옵션 등에 대해 알려드리겠습니다. d3를 기반의 플러그인입니다. chart의 font-family color 등 여러가지 항목들을 css로 커스텀이 가능해서 무료 차트중에서는 확장성이 높은편입니다. 01. c3 설치 https://github.com/c3js/c3/releases/tag/v0.7.20 Release v0.7.20 · c3js/c3 Changes Fix config subchart_axis_x_show (#2806) Fix pan of y-axis when zoomed and rotated=true #2799 (#2805) github.com C3의 깃허브에서 c3를 설치해줍니다. 02. JS/CSS 추가 아래의 코드는 c3 css와 js파일 cd..