남산 아래 개발자들

안녕하세요. 명동섞어찌개입니다. 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: 12 px ; left: 3 px ; background - size: 20 px auto ; background - repeat: no - repeat ; width: 20 px ; height: 20 px ;} . addUser { background - image: url ( assets / icons / icon - add - user - on . svg );} [html] 1 < i class = "customIcon addUser" ></ i >

HTML 으로 코딩된 테이블, 그림, 글자 등 다양한 요소가 섞여 있는 문서를 PDF 또는 A4용지로 출력했을 때 각 요소가 중간에 끊어지지 않고 보기좋게 출력할 수 있는 방법이 있는지 알아보았습니다. 방법은 생각보다 간단한데요, CSS의 @media print 속성을 이용하면 가능했습니다. @media print 는 인쇄할 때만 적용되는 것으로 다양한 기능이 있지만 바쁜 분들을 위해 핵심 CSS만 보면, 이 두 개만 알아도 충분한 것 같습니다. @media print {       .page-divide {               page-break-after: always;        } } .page-divide 라는 클래스를 준 요소 뒤에는 언제나 페이지를 분할하도록 하는 CSS 입니다. table, figure, .sector {         page-break-inside: avoid; } table, figure 또는 sector 라고 클래스를 지정해 준 요소는 페이지 때문에 끊기지 않도록 처리해주는 구문입니다. 이렇게 지정한 요소가 만약 A4 용지 단위로 프린트물이 나올 때 중간에 걸리게 되면 통째로 그 다음 장으로 넘어가게 처리해줍니다. 간단 예제 소스보기 <style> @media print {      .page-divide {             page-break-after: always;      }      .no-print-page {             display: none; //작업의 편리함을 위해 넣은 페이지 구분선. 프린트 시에는 보이지 않음       } } h1, h2, h3, h4, h5 {       page-break-after: avoid; } table, figure, .sector {        page-break-inside: avoid; } .table {        width: 100%;  

부트스트랩, 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. 초간단 가입 가입을 안해도 되지만.. 찜한 아이콘을 관리하거나 다운받으려면 가

*이 문서는 지속적으로 업데이트 될 예정입니다 *가로스크롤 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 에서는 아직 쓸 수 없겠지만 모바일만을 대상으로 한다면 꽤 매력적인 신기능입니다