반응형
반응형

[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

반응형
반응형

CSS 레인보우(Rainbow) 색상의 텍스트 만들기

background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
// 배경색으로 무지개를 만듦

-webkit-background-clip: text;
// 배경색이 텍스트에만 적용되도록 함

color: transparent;
// 텍스트의 색을 투명으로 변경되어 배경색이 적용되도록 바꿈
<span class="text-rainbow">Hello Rainbow!</span>
.text-rainbow {
  background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
  -webkit-background-clip: text;
  color: transparent;

  font-weight: bold;
  font-size: 40px;
}
반응형
반응형

A guide of UI design trends for 2021

 

uxdesign.cc/a-guide-of-ui-design-trends-for-2021-637ac038cb99

 

A guide of UI design trends for 2021

More 3D, more color, glassmorphism and great tools! 🤩

uxdesign.cc

반응형
반응형

Bootstrap - admin LTE

 

version 3 :adminlte.io/themes/dev/AdminLTE/index3.html

 

AdminLTE 3 | Dashboard 3

12% CONVERSION RATE 0.8% SALES RATE 1% REGISTRATION RATE

adminlte.io

version 2 : adminlte.io/themes/AdminLTE/index2.html

 

AdminLTE 2 | Dashboard

Sales: 1 Jan, 2014 - 30 Jul, 2014

adminlte.io

반응형

+ Recent posts