[HTML] SVG 아이콘 만들기

작성자: -
안녕하세요. 명동섞어찌개입니다.

SVG (Scalable Vector Graphics) 는 이름 그대로 Bitmap 이미지와 달리 확대, 축소해도 깨지지 않는 이미지 포맷이죠. 요새 아이콘을 화면에 넣을 때 많이 쓰는 방법으로 아이콘 폰트를 임베딩해서 쓰거나, svg 아이콘을 다운받아 쓰는 법 외에 SVG 아이콘을 그려서 화면에 적용하는 아주 간단한 팁을 알려드릴께요!

1. Adobe 일러스트레이터를 켭니다.

없으신 분은.. 디자이너분께 부탁드려보시거나 회사 라이센스 프로그램이 있을 경우 그걸 써보세요 (협업~)


2. 일러스트레이터에서 필요한 아이콘을 그립니다.

굳이 코딩으로 어렵게 계산해서 그리실 필요가 전혀 없습니다. 그냥 보면서 그립니다.




3. 아이콘을 선택한 후 복사합니다. (Ctrl + C)



4. 새 문서를 만든 뒤 붙여넣기 합니다. (Ctrl + V)

[icon-add-user-on.svg]

끝. 참 쉽죠?!



5. 마지막으로 CSS 에 적용합니다.


저 같은 경우는 일반적으로 이런 식으로 사용합니다.

[layout.css]
1
2
3
.customIcon:before {content: '';position: absolute;top: 12px;left: 3px;background-size: 20px auto;background-repeat: no-repeat;width: 20px; height: 20px;}

.addUser {background-image: url(assets/icons/icon-add-user-on.svg);}

[html]
1
<i class="customIcon addUser"></i>





댓글

댓글 쓰기

주간 인기글

[Ubuntu] inode full 해결을 위한 오래된 Kernel DATA 삭제

작성자: -
이미지
지난 포스팅에서 Ubuntu  서버의 최신 Kernel 적용 방법에 대해 알아보았습니다. 지난 포스팅 보러가기 그런데 몇개의 인스턴스를 업데이트를 진행 하다보니  Kernel 업데이트 도중 DISK 저장공간 부족으로 인해 업데이트가 불가능한 현상이 발생하였습니다. 실제 디스크 용량은 충분 하여 아래 명령어를 통해 확인해 보니 inode 가 100% 사용 중이었습니다. $ df -i cs 검색해 보니 inode 확보를 위해서 이전커널 데이터를 삭제해야 되는것을 확인할 수 있었습니다. /usr/src 폴더로 이동해 커널 정보를 확인해 보면 이전버전의 커널 데이터가 버전별로 줄지어 용량을 차지하고 있는것을 보실수 있습니다. 아래 명령어를 실행하여 이전버전 커널 데이터를 정리할 수 있습니다. $ sudo apt autoremove cs 디스크 용량을 2,022 MB 확보할수 있다는 메시지가 표출 됩니다. "Y" 를 입력하고 넘어갑니다. 작업이 완료되면 아래 그림과 같이 표출됩니다. /usr/src 폴더의 파일을 확인해보면 최신 버전 이외에는 모두 삭제된 것을 확인 할 수 있습니다. 다시 inode 정보를 확인해 보면 가용영역이 늘어난 것을 확인할 수 있습니다. <수동으로 오래된 커널 파일 삭제하기> $ sudo apt autoremove cs   명령어 실행시 " apt-get –f install " 작업이 필요...
자세한 내용 보기

[AWS] ACM (Amazon Certificate Manager)를 통한 SSL 적용 웹사이트 구성

작성자: -
이미지
AWS 의 Certificate Manager 를 활용하면 운영중인 웹사이트에  무료로 SSL 적용이 가능합니다. 기존 방식대로 Web 서버에 HTTPS 접속을 위한 SSL 인증서 적용을 위해서는 웹서버에 직접 모듈을 설치하고 인증서 업로드 및 설정 작업을 진행해 주어야 했지만 ACM 을 활용하면 아래 비교표와 같이 간단한 절차로 SSL 구성이 가능합니다. 그럼 본격적으로 ACM 을 통한 SSL 적용 방법에 대해 알아보겠습니다. 1. 본인소유 도메인과 이메일 접속권한 확인 ACM 을 통한 SSL 적용을 위해서는 우선 본인 소유의 도메인 계정과 도메인 구매시 등록한 이메일 접속 권한이 필요합니다. 도메인 소유자의 이메일을 통해 인증절차 진행 되므로 소유자 메일에 접속이 불가능 하다면 인증서 발급이 불가능 합니다. 2. 소유 도메인 Route53 연결 도메인이 확보 되었으면 두번째로 AWS Route53 서비스에 도메인을 연결 시켜야 합니다. Route 53 > HostZone 에 해당 도메인 정보를 등록하고 NS Value 값을 따로 기록해 둡니다. 3. 소유 도메인의 네임서버 설정 변경 도메인 관리 사이트에 접속하여 위에서 따로 기록해둔 NS Value 값을 네임서버 설정 화면에서 변경하여 적용 합니다. 아래는 가비아의 네임서버 설정 화면 입니다. 네임서버 변경은 일정 시간이 필요 하므로 바로 적용되지 않으면 잠시 기다렸다 다음작업을 진행 합니다. 4. 인증서 요청 도메인에 대한 ACM에서 증명서를 발급받아야하므로, AWS Dashboard에서 Certificate Manage 로 이동합니다. “인증서  요청” 버튼을 선택합니다. 본인이 가지고 있는 도메인 네임을 ibksplatform.com  과 같은 형식으로 입력합니다. 서브 도메인을 사용 예정이라면 *.ibksplatform.com 과 같은 형식으로 이름을 추가합니다. 이렇게 ...
자세한 내용 보기

scp명령어를 이용하여 리눅스 서버 간 파일 이동하기

작성자: -
안녕하세요. 남산돈가스입니다. 리눅스 서버를 운영 중에 서버와 서버 또는 서버와 로컬 간의 파일을 복사하기 위하여 scp 명령어를 자주 사용합니다. 오늘은 scp 명령어 사용법에 대해서 포스팅 해보겠습니다. scp 명령어의 기본 사용법은 다음과 같습니다. $ scp < 옵션 > < 원본 경로 및 파일 > < 복사 받을 곳 경로 및 파일 > 1. 로컬에서 서버로 파일 복사하기 첫번 째로 로컬에서 서버로 파일을 복사하기 위해서 test 파일을 하나 생성합니다. $ touch scpTest $ ls -al scpTest -rw-r--r-- 1 gimseongsin staff 0B 11 21 16:40 scpTest 테스트로 생성한 scpTest라는 파일을 remote 서버로 복사해보겠습니다. $ scp scpTest ubuntu@13.124.XXX.XXX:/home/ubuntu scpTest 100% 0 0.0KB/s 00:00 $ scp <복사할 로컬파일 경로> <계정>@<호스트주소>:<복사 될 경로> 위와 같은 명령어를 통해 로컬에서 Remote 서버로 파일을 복사한 것을 확인 할 수 있습니다. 2. 서버에서 로컬로 파일 복사하기 두번 째로는 Remote서버에 있는 파일을 로컬환경으로 가져오는 방법입니다. 먼저 Remote 서버에서 로컬로 전송할 파일을 생성합니다. $ touch remoteToLocal $ ls -al remoteToLocal -rw-rw-r-- 1 ubuntu ubuntu 0 Nov 21 16:58 remoteToLocal 파일을 생성한 뒤 로컬 터미널 창에서 다음과 같이 입력합니다. $ scp ubuntu@13.124.XXX.XXX:/home/ubuntu/remoteToLocal /User...
자세한 내용 보기

현수막/명함 등 인쇄물 디자인하기

작성자: -
이미지
문화체육행사_포스터 이번 포스팅으로는 행사라던지 일정표 등 여러가지 인쇄물 제작을 할 때의 디자인 방법에 대해 간단하게 소개하려고 합니다 ㅎㅎ 인쇄물 포토샵 세팅  해상도 (Resolution) 300 dpi  로 잡아줍니다. 안그러면 해상도가 낮아서 깨져 보여요. (보통 웹 작업을 할 경우 72dpi 로 잡혀 있음) 색상 (Color Mode) 인쇄물이므로 RGB 컬러가 아닌 CMYK 아시겠지만 RGB와 CMYK 색상은 차이가 많이 나니까 미리 잘 세팅하셔서 나중에 작업 다 끝내놓고 인쇄 직전에 멘붕에 빠지지 않으시기를..^^ <-경험자 일러스트레이터로 작업하실 경우는 컬러모드나 해상도 등은 문제가 되지 않으므로 인쇄물은 되도록 일러로 작업하시는 게 좋을 것 같습니다. 1. 현수막 만들기  체육행사_현수막 사이즈 보통 만들고자 하는 크기가 m 단위인데요 만들려고 하는 크기의 10분의 1정도 사이즈로 작업을 합니다. 예를들어 6m x 1m 사이즈의 현수막을 만든다고 하면 포토샵/일러로는 60cm x 10cm 로 제작을 합니다. 실물 크기로 만들 경우 컴퓨터의 성능이 엄청나지 않은 이상 작업에 무리가 있고, 10분의 1 사이즈로 제작해서 인쇄해도 괜찮아요~ 현수막은 처음부터 사이즈를 확정하고 작업하셔야 수정할 일이 덜 생깁니다.^^ 보통은 강당이나 어느 특정 장소에 걸어야 하기 때문에 사이즈가 제한적일거고, 그걸 미리 잘 알아두시고 작업하셔야 기껏 작업한 디자인을 버리는 일이 생기지 않아요^^ 2. 명찰 만들기 사이즈 실제 사이즈대로 만들되 명찰 사이즈보다 조금 더 작게 만들어 인쇄해야 나중에 명찰에 끼워넣을 때 고생하지 않아요^^ 3. 명함 이번에 아이프렌즈펫에서 명함 사이즈의 홍보카드를 만들었는데요, 작은 사이즈이지만 의외로 까다로워서 처음 제작단계부터 인쇄업체와 대화를 많이 하시는게 좋은 것 같구요  (아...
자세한 내용 보기

파이썬을 이용하여 웹 크롤러 만들기 #2 - BeautifulSoup4을 활용하여 크롤링하기

작성자: -
이미지
안녕하세요. 남산돈가스입니다. 지난 포스팅에 이어 오늘은 두번째 순서인 BeautifulSoup4를 활용하여 웹 크롤링을 해보도록 하겠습니다. 우선, BeautifulSoup 이라는 것이 어떤 건지 간단히 말씀드리자면, html코드를 python이라는 언어가 이해할 수 있는 객체 구조로 변환해주는 대표적인 html Parsing 라이브러리입니다. 웹크롤링을 한다면 필수적인 라이브러리로 파이썬 웹크롤링 서적에서도 소개될 만큼 검증 된 라이브러리입니다. 이번 포스팅에선 대표적으로 requests 와 BeautifulSoup4 라이브러리를 이용해서 크롤링을 해보려고 합니다. 먼저 위에서 말씀드린 라이브러리들을 install 해보겠습니다. 터미널에 pip install beautifulsoup4 를 입력하여 beautifulSoup 라이브러리를 설치합니다. $ pip install beautifulsoup4 Collecting beautifulsoup4 Downloading https://files.pythonhosted.org/packages/9e/d4/10f46e5cfac773e22707237bfcd51bbffeaf0a576b0a847ec7ab15bd7ace/beautifulsoup4-4.6.0-py3-none-any.whl (86kB) 100% | ████████████████████████████████ | 92kB 445kB/s Installing collected packages: beautifulsoup4 Successfully installed beautifulsoup4-4.6.0 다음으로 requests 라이브러리를 install 합니다. $ pip install requests Requirement already satisfied: requests in /Users/gimseongsin/Library/Python/3.6/lib/python/site-packages 제 경우...
자세한 내용 보기