반응형

smile-o   meh-o  frown-o

https://fontawesome.com/v4/icon/smile-o

 

fa-smile-o: Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

https://fontawesome.com/v4/icon/meh-o

 

fa-meh-o: Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

https://fontawesome.com/v4/icon/frown-o

 

fa-frown-o: Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

 

반응형
반응형

반응형 웹 디자인의 9가지 기본 원칙

https://knulab.com/archives/1153

 

반응형 웹 디자인의 9가지 기본 원칙 – KNULAB

반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없

knulab.com

 

반응형
반응형

이미지 갤러리 한 줄에 4개씩 보여지다가, 모바일 세로일때 (가로 480px 이하일때) 한 줄에 2개씩 보여주기. 

이미지는 width=100% 로 하고 넓이는 div에서 조절. 

object-fit:contain

<div>
 	<div class='img_contain_left' ><img src='image/1번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/2번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/3번.jpg' width='100%' ></div>
 	<div class='img_contain_left' ><img src='image/4번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/5번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/6번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/7번.jpg' width='100%'  ></div>
 	<div class='img_contain_end'  ><img src='image/8번.jpg' width='200px'  ></div>
 </div>
    @media screen and (min-width: 480px) {                
        .img_contain_left {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }
    
    @media screen and (max-width: 480px) {    
        .img_contain_left {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }

1. meta viewport 설정

<meta name="viewport" content="width=device-width, initial-scale=1" />

 

2. 4개의 반응형 분기점

- 낮은 해상도의 PC, 태블릿 가로 : ~1024px

- 태블릿 가로 : 768px ~ 1023px

- 모바일 가로, 태블릿 : 480px ~ 767px

- 모바일 : ~480px

 

3. 3개의 반응형 분기점

- PC : 1024px ~

- 태블릿 가로, 세로 : 768px ~ 1023px

- 모바일 가로, 세로 : ~768px

 

4. Media Query 사용법

@media screen and (min-width:1024px) {
	/* Desktop */
}
@media screen and (min-width:768px) and (max-width: 1023px) {
	/* Tablet */
}
@media screen and (max-width:767px){ 
	/* Mobile */
}

5. PC / Tablet / Mobile 구분해서 CSS 파일 작성 

<link href="style_pc.css" media="screen and (min-width:1024px)" rel="stylesheet" />
<link href="style_tablet.css" media="screen and (min-width:768px) and (max-width:1023px)" rel="stylesheet" />
<link href="style_mobile.css" media="screen and (min-width:320px) and (max-width:767px)" rel="stylesheet" />

 

https://record22.tistory.com/98

반응형
반응형

피그마 Figma, 주목받는 UI GUI 디자인 프로그램

 

https://www.figma.com/

 

Figma: the collaborative interface design tool.

Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

www.figma.com

1) 윈도우OS, 맥OS 대응 + 웹 브라우저를 통한 디자인 진행

  • 웹 기반 브라우저로 사용하여 프로그램 활용 범위가 용이하며 앱 설치를 하지 않아도 됩니다.
    → 스케치는 맥OS에서만 사용 가능하지만, 피그마는 윈도우OS 및 웹 브라우저에서도 사용할 수 있습니다.
  • 웹 브라우저가 아니라도 컴퓨터에 직접 (네이티브) 프로그램을 설치하여 사용할 수도 있으므로 빠르게 작업을 진행할 수 있습니다.

2) 실시간 협업 시스템 (공동 라이브 디자인)

  • 웹 기반 브라우저 프로그램으로서, 피그마 계정 소유자가 링크를 공유하여 여러 명이 아트 보드를 확인하며 동시에 온라인으로 실시간 작업을 진행할 수 있습니다.
  • 개발자가 참조할 수 있는 정보를 주는 ‘개발 툴바’가 있어 개발자와 소통에 매우 효과적입니다.
    마우스 툴바로도 수치값을 확인할 수 있어 가이드라인이 없어도 빠른 작업이 가능합니다.
  • 스케치는 제플린 zeplin이라는 앱을 따로 사용하여 (핸드오프) 작업물을 내보내는 방식으로 개발자와 소통하는 반면, 피그마는 앱 하나에서 바로 핸드오프 기능을  사용할 수 있습니다.

3) 버전 히스토리 관리

  • 히스토리 영역을 통해 협업자 중 누가 무엇을 변경했는지 확인하고, 필요에 따라 날짜&시간별로 기록되어 있는 히스토리를 확인할 수 있습니다. 때문에 버전 관리 필요 없이 히스토리 기능을 사용하여 편리하게 버전 관리가 가능합니다.
  • 포토샵과는 다르게 사용자가 날짜를 지정하여 저장할 수 있으며, 최대 30일까지 히스토리 저장이 가능합니다.
  • 히스토리뿐만 아니라 피그마 파일로도 저장이 가능하므로 필요시 파일로 내보내기 하여 파일을 관리하실 수 있습니다.

4) 최적화된 어댑티브(ADAPTIVE) 레이아웃 시스템

  • 포토샵은 해상도에 맞추어 매번 새롭게 작업을 해야 하는 것에 비해, 피그마는 외곽 선을 조정하는 것만으로도 대부분의 콘텐츠 레이아웃을 크기에 맞게 자동 조정해 줍니다.

5) SKETCH 파일과의 연동

  • 기존에 작업하던 스케치 파일들을 피그마에 임포트 하여 작업할 수 있습니다.
  • 현재 온라인에 배포되어 있는 스케치 UI 키트들을 피그마에서도 사용할 수 있습니다.

6) 프로토타이핑 PROTOTYPING

  • 직관적인 인터페이스로 UI 상호작용 및 애니메이션 제작이 가능합니다.
  • 클릭/호버/버튼 동작 등 단순한 인터렉션을 넣어 프로토타입을 제작할 수 있습니다.
  • 모바일에 최적화되어있어 플레이 시 프레임 및 모멘텀 스크롤과 같은 세부적인 부분의 프로토타입 또한 실제 화면처럼 느낄 수 있습니다.

장점

  • 스케치와 거의 비슷한 인터페이스를 다양한 환경에서 사용하실 수 있습니다.
  • 윈도우와 맥 모두 호환이 가능하여 사용 환경이 넓습니다.
  • 프로그램을 설치하지 않아도 사용할 수 있고, 1인은 무료로 사용 가능합니다. 

단점

  • 스케치에서 옮겨올 시 폰트가 깨질 가능성이 높습니다.
    *특히 한글 폰트는 무조건 깨집니다. 앱으로 사용할 시 폰트 깨짐 현상이 줄어듭니다.
  • 심볼 기능이 없으나, 스케치에서 옮겨온 것은 사용이 가능합니다, 단 Figma → Sketch로 파일을 옮기는 것은 불가능합니다.

출처 : https://medium.com/designcodeio/figma-vs-sketch-c01e5e74eddd#.jufkza6p1

 

Figma VS Sketch

Figma is like Sketch in the browser with real-time collaboration.

medium.com

 

.

반응형
반응형

[Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램

 

http://www.chengyinliu.com/whatfont.html

 

WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu

← Back to Chengyin's main page What is this for? What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily g

www.chengyinliu.com

 

 

 

반응형
반응형

bootstrap dashboard 

*** 27 Best Free Bootstrap Admin Templates 2021 
 -> https://athemes.com/collections/free-bootstrap-admin-templates/

 

25+ Best Free Bootstrap Admin Templates 2021 - aThemes

Creating a professional looking dashboard for your website or app needn’t be expensive. Thanks to this collection of the best free Bootstrap admin templates you…

athemes.com

 
1. https://designrevision.com/downloads/shards-dashboard-lite/

2. https://demos.creative-tim.com/light-bootstrap-dashboard/examples/dashboard.html

3. https://webthemez.com/demo/brilliant-free-bootstrap-admin-template/index.html

4. https://demos.wrappixel.com/free-admin-templates/bootstrap/matrix-bootstrap-free/html/index.html

5. https://p.w3layouts.com/demos/28-03-2016/shoppy/web/index.html#

6. https://webthemez.com/demo/target-free-responsive-bootstrap-admin-template/ui-elements.html

  
7. https://demos.wrappixel.com/premium-admin-templates/bootstrap/monster-bootstrap/package/html/horizontal/index4.html
   : 메뉴 상단 

 

Monster Template by WrapPixel

Daniel Kristeen UI/UX Designer Follow 14 Photos 54 Videos 145 Tasks Lorem ipsum dolor sit ametetur adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunLorem ipsum dolor sit ametetur adipisicing elit, sed do e

demos.wrappixel.com

 

8. https://p.w3layouts.com/demos/july-2016/22-07-2016/colored_admin_panel/web/charts.html
   : 작은 좌측메뉴, 컬러풀한 차트

 

Colored an Admin Panel Category Flat Bootstrap Responsive Website Template | Charts :: w3layouts

 

p.w3layouts.com

반응형
반응형

image full screen css - How TO - Full Page Image

 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page 

 

Tryit Editor v3.6

body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: co

www.w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<div class="bg"></div>

<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

반응형
반응형

 

중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까?

 

body{
  font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
}

중국어폰트

body{
  font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
}

반응형

+ Recent posts