라벨이 CSS인 게시물 표시

아이콘을 폰트로 만들어 쓰기

이미지
부트스트랩, Angular 등을 하다보면 부수적이지만 자주 접하게 되는 것이 있습니다.
바로 font-awesome !! (http://fontawesome.io/)
각종 아이콘을 폰트로 만들어 css 만 임베딩하면 다양한 아이콘을 폰트처럼 쓸 수 있는 CSS Toolkit 입니다.

font-awesome 등 아이콘 검색하기 https://glyphsearch.com/
<i class="fa fa-bandcamp"></i>

이런 식으로 아이콘을 만들어 쓰면 우선 수십개의 아이콘을 CSS에서 색상, 크기 등을 코드 한줄로 자유롭게 수정할 수 있기 때문에 사용이 굉장히 편리하구요

이미지로 할 경우 padding, margin 주면서 복잡하게 레이아웃을 맞춰야하는데 폰트 기반이다 보니 아무래도 정렬 등도 덜 신경쓰면서 웹페이지를 만들 수 있어 좋습니다.

그런데 아무리 600가지가 넘는 아이콘을 font-awesome 에서 제공한다 하더라도 모든 디자인이 다 있지는 않아서.. 딱 관리자 페이지 만드는 정도에는 유용한 것 같습니다.

특별한 브랜드 디자인이 들어가거나, 특별한 이미지 아이콘이 필요한 상황에서는 그 이상이 필요합니다.

이번 아이프렌즈펫 쇼핑몰을 만들면서 강아지/고양이 용품 관련 특화된 아이콘들이 다수 필요했는데요, 관련 아이콘들은 기존에 폰트로 만들어져 제공되는 font-awsome 이나 line icon 등에서는 찾을 수 없었습니다.

그렇다고 모든 아이콘을 기존 방식대로 일일이 이미지로 만드는 작업은 저 혼자서 디자인, 코딩 모두를 짧은 시간 내에 해내야 하는 상황에서는 어려울 것 같았구요.

그래서 이미지를 폰트로 바꾸어주는 사이트가 없을까 해서 찾아봤는데 있었습니다 ^ㅁ^
여러 군데를 뒤져봤지만 이곳이 제일 편하더라구요



https://www.flaticon.com


1. 초간단 가입

가입을 안해도 되지만.. 찜한 아이콘을 관리하거나 다운받으려면 가입하는게 좋아요~



2. 원하는 아이콘 검색 (영문으로만 가능합니다^^)




3. …

[NBP] NAVER Clova Speech Synthesis(CSS) API 사용해보기

이미지
CSS (Clova Speech Synthesis) 서비스는 Naver CLoud Platform 의 AI 서비스 중의 하나로
입력한 텍스트를 자연스로운 목소리로 재생해주는 음성 합성  API 입니다.





현재 BETA Version 으로  서비스가 제공되고 있으며 하루에 10,000 글자 까지 (한시적)무료로 사용이 가능합니다.



네이버 클라우드 플랫폼 아이디가 있다면 
https://console.ncloud.com/  대시보드 화면으로 이동합니다.


AI NAVER API 서비스를 선택합니다.


대시보드 화면에서 Application 등록하기를 선택합니다.





Application 등록화면으로 이동합니다.

어플리케이션 이름을 등록하고 Clova Speech Synthesis 를 선택합니다.
Web 서비스 URL 및 앱 패키지 이름을선택하고 등록을 선택합니다.
* Web URL 입력시 Localhost 는 입력이 불가능 하므로 127.0.0.1 형식으로 입력합니다.


등록이 완료되면
Client ID 와 Client Secret 코드를 확인할 수 있습니다. 





API 예제 소스는 아래 URL 에서 확인이 가능합니다.
http://docs.ncloud.com/ko/naveropenapi/naveropenapi-4-2.html

Node.js 소스를 가지고 테스트를 진행해 보도록 하겠습니다.
아래  client_id client_secret 영역에  조금 전 발급받은 키를 입력합니다.

// 네이버 음성합성 Open API 예제 var express = require('express'); var app = express(); var client_id ='YOUR_CLIENT_ID'; var client_secret ='YOUR_CLIENT_SECRET'; var fs = require('fs'); app.get('/tts', function (req, res) { var api_url ='h…

[Angular 2+ / 퍼블리싱] 일반적인 모바일 UI 를 코딩할때 유용한 링크 모음

*이 문서는 지속적으로 업데이트 될 예정입니다

*가로스크롤 UI

모바일에서 터치 + 스크롤 되는 기본적인 CSS 문법이 가장 잘 설명된 예 입니다.
자세한 설명은 여기서 보실 수 있습니다.

See the Pen Flickity horizontal scrolling navigation by Steve (@stevemckinney) on CodePen.



Angular2+ 에서 Bootstrap 과 함께 horizontal scroll 을 구현할 때 한가지 팁이라면
가로 width 를 고정값을 주면 화면 리사이징 할 때 Bootstrap Layout 이 깨집니다.
height 만 주거나, 이게 불편하면 Slider 플러그인 같은 다른 대책을 구해보심이 좋을듯합니다.


+ Sly 라는 꽤 괜찮은 가로 스크롤 플러그인이 있는데 angular2 용으로는 아직 없어서 대단히 아쉽네요
http://darsa.in/sly/




* 이미지의 가로 세로 비율 유지하면서 잘라 보여주기 (CSS)

중앙 정렬 맞추면서 Responsive UI 에서 이미지 비율대로 Crop 해 보여주기 링크

소스 설명은 여기서 보실 수 있습니다.

See the Pen 이미지의 가로세로비를 유지하면서 틀 안에 맞추기 by feeva (@feeva) on CodePen.


* 함께 보면 좋은 문서

당신은 모를 수도 있는 CSS의 7가지 단위

vh, vw 같은 것들은 PC Web 에서는 아직 쓸 수 없겠지만 모바일만을 대상으로 한다면 꽤 매력적인 신기능입니다