반응형

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

반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?  (0) 2021.04.20
AdminLTE - Bootstrap 4 Admin Dashboard  (0) 2021.03.23
[style] CSS 레인보우(Rainbow) 색상의 텍스트 만들기  (0) 2020.12.21
A guide of UI design trends for 2021  (0) 2020.12.09
[Style] Bootstrap - admin LTE  (0) 2020.11.24
반응형

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;
}
반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

AdminLTE - Bootstrap 4 Admin Dashboard  (0) 2021.03.23
[bootstrap] AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때. CSS3 Media Queries  (0) 2020.12.21
A guide of UI design trends for 2021  (0) 2020.12.09
[Style] Bootstrap - admin LTE  (0) 2020.11.24
CSS 이미지 스프라이트(Image Sprite)  (0) 2020.11.17
반응형

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

반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

[bootstrap] AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때. CSS3 Media Queries  (0) 2020.12.21
[style] CSS 레인보우(Rainbow) 색상의 텍스트 만들기  (0) 2020.12.21
[Style] Bootstrap - admin LTE  (0) 2020.11.24
CSS 이미지 스프라이트(Image Sprite)  (0) 2020.11.17
[iCon] iCon download  (0) 2020.10.19
반응형

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

반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

[style] CSS 레인보우(Rainbow) 색상의 텍스트 만들기  (0) 2020.12.21
A guide of UI design trends for 2021  (0) 2020.12.09
CSS 이미지 스프라이트(Image Sprite)  (0) 2020.11.17
[iCon] iCon download  (0) 2020.10.19
Free themes for Bootstrap  (0) 2020.10.14
반응형

CSS 이미지 스프라이트(Image Sprite)

 

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.

 

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다.

하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

 

이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다.

모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다.

또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.

 

다음 예제는 하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제입니다.

네 개의 아이콘을 만들기 위해 네 개의 이미지를 사용하는 것이 아닌 다음 이미지 하나만을 가지고 작업하게 됩니다.

<style>
    .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
    .up { width: 21px; height: 20px; background-position: 0 0; }
    .down { width: 21px; height: 20px; background-position: -21px 0; }
    .right { width: 22px; height: 20px; background-position: -42px 0; }
    .left { width: 22px; height: 20px; background-position: -65px 0; }
</style>

 

코딩 연습 : www.tcpschool.com/examples/tryit/tryhtml.php?filename=css_basic_imageSprites_01

 

©TCP-tryWWW

CSS Image Sprites .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; } .up { width: 21px; height: 20px; background-position: 0 0; } .down { width: 21px; height: 20px; background-position: -21px 0; } .right { wi

www.tcpschool.com

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Image Sprites</title>
	<style>
		.up, .down, .right, .left {
			background: url("/examples/images/img_image_sprites.png") no-repeat;
		}
		.up {
			width: 21px;
			height: 20px;
			background-position: 0 0;
		}
		.down {
			width: 21px;
			height: 20px;
			background-position: -21px 0;
		}
		.right {
			width: 22px;
			height: 20px;
			background-position: -42px 0;
		}
		.left {
			width: 22px;
			height: 20px;
			background-position: -65px 0;
		}
	</style>
</head>

<body>

	<h2>이미지 스프라이트를 이용한 이미지 로딩</h2>
	<p>- 원본 이미지 -</p>
	<img src="/examples/images/img_image_sprites.png"><br><br>
	<p>- 추출한 이미지 -</p>
	<div class="up"></div><br>
	<div class="down"></div><br>
	<div class="right"></div><br>
	<div class="left"></div><br>

</body>

</html>
반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

A guide of UI design trends for 2021  (0) 2020.12.09
[Style] Bootstrap - admin LTE  (0) 2020.11.24
[iCon] iCon download  (0) 2020.10.19
Free themes for Bootstrap  (0) 2020.10.14
[FONT] 웹 한글 폰트 - 눈누 https://noonnu.cc/  (0) 2020.09.17
반응형

아이콘 다운로드 

 

icons8.com/icons/set/file

 

Download free icons, music, stock photos, vectors

Designers, download the design stuff for free — icons, photos, UX illustrations, and music for your videos.

icons8.com

 

 

반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

[Style] Bootstrap - admin LTE  (0) 2020.11.24
CSS 이미지 스프라이트(Image Sprite)  (0) 2020.11.17
Free themes for Bootstrap  (0) 2020.10.14
[FONT] 웹 한글 폰트 - 눈누 https://noonnu.cc/  (0) 2020.09.17
USER FRIENDLY UI 란?  (0) 2020.09.11
반응형

Free themes for Bootstrap

bootswatch.com/

 

Bootswatch: Free themes for Bootstrap

Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.

bootswatch.com

 

반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

CSS 이미지 스프라이트(Image Sprite)  (0) 2020.11.17
[iCon] iCon download  (0) 2020.10.19
[FONT] 웹 한글 폰트 - 눈누 https://noonnu.cc/  (0) 2020.09.17
USER FRIENDLY UI 란?  (0) 2020.09.11
부트스트랩, 어떻게 사용해야할까? -파트 1 (번역본)  (0) 2020.06.19
반응형

웹 한글 폰트 - 눈누

noonnu.cc/

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

나눔바른고딕

NanumBarunGothic

noonnu.cc/font_page/36

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

 @font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 400;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 700;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 300;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}

.nanumbarungothic * {
 font-family: 'NanumBarunGothic', sans-serif;
}

body {
  font-family: 'NanumBarunGothic';
  font-weight: 400;
}
반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

[iCon] iCon download  (0) 2020.10.19
Free themes for Bootstrap  (0) 2020.10.14
USER FRIENDLY UI 란?  (0) 2020.09.11
부트스트랩, 어떻게 사용해야할까? -파트 1 (번역본)  (0) 2020.06.19
반응형웹, Typical Device Breakpoints, media queries  (0) 2020.06.17

+ Recent posts

티스토리툴바