반응형

[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;
}

반응형
반응형

html table css 참고 

nanati.me/html_css_table_design/

 

html/css로 만드는 table 디자인 샘플

html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^ 웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 밖에 없죠.거기다 장식할만한 파트도 선이나

nanati.me

 

반응형
반응형

[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?

 

반응형 웹 대응

====================================================

720, 1024, 1334, 1600 네 가지 분기 처리(Breakpoint)를 기본

360 / 640 / 720 / 1024 / 1334 / 1600 / 1920

- PC

@media all and (max-width:1500px) {}

@media all and (max-width:1280px) {}

@media all and (max-width:1180px) {}

- 태블릿, 모바일

@media all and (max-width:981px) {}

@media all and (max-width:768px) {}

@media all and (max-width:640px) {}

 

gs.statcounter.com/screen-resolution-stats

 

Screen Resolution Stats Worldwide | StatCounter Global Stats

This graph shows the stats of screen resolutions worldwide based on over 10 billion monthly page views.

gs.statcounter.com

 

Source: StatCounter Global Stats - Screen Resolution Market Share

반응형
반응형

AdminLTE - Bootstrap 4 Admin Dashboard

 

AdminLTE is a fully responsive administration template. Based on Bootstrap 4.6 framework and also the JS/jQuery plugin. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.

 

github.com/ColorlibHQ/AdminLTE

 

ColorlibHQ/AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 4 - ColorlibHQ/AdminLTE

github.com

반응형
반응형

AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때.  미디어쿼리 사용하자. 

CSS3 Media Queries

 

기존 css에 media=screen 으로 지정하고, print에도 동일한 스타일 적용할꺼면  media="screen,print" 로 지정

<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" media="screen" />


<!-- print -->
 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"/>

print.css에 있으면 인쇄시 적용된다. 

 @media print { 
 }

그래서, 일단 모바일로 안나오게끔 인쇄할때에도 사용되는 col-lg-~~를 넣어주었다. 

 

/* Enhancement for printing */
 
@media print {   
    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%; 
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

}

/* End of media print */

 

 

 

github.com/ColorlibHQ/AdminLTE/issues/199

반응형

+ Recent posts