반응형
반응형

브라우저 화면 드레그 안되게 css

 

.unselectable {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.all {
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
<head>
<style type="text/css">
.no-drag {
	-ms-user-select: none; 
	-moz-user-select: 
	-moz-none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	user-select:none;
}
</style>
</head>
<body>
   <p class="no-drag">드래그를 할 수 없습니다.</p>
   <p>드래그를 할 수 있습니다.</p>
</body>

 

반응형
저작자표시 비영리

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

웹폰트 사용하기,구글폰트/웹폰트 연결하기, 직접 폰트 변환하여 적용하기  (0) 2022.10.31
Pixabay 이미지  (0) 2022.10.13
텍스트나 배경에 순수한 검정을 사용하면 안 되는 이유  (0) 2022.07.15
image , giphy, Drunk fall  (0) 2022.06.16
랜딩 페이지란 무엇인가요?  (0) 2022.05.27
반응형

이미지 갤러리 한 줄에 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

반응형
저작자표시 비영리 변경금지

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

smile-o meh-o frown-o  (0) 2022.04.15
반응형 웹 디자인의 9가지 기본 원칙 - 반응형 VS 적응형  (0) 2022.01.19
피그마 Figma, 주목받는 UI GUI 디자인 프로그램  (0) 2021.12.10
[Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램  (0) 2021.11.26
[bootstrap] 27 Best Free Bootstrap Admin Templates 2021  (0) 2021.11.04
반응형

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>

반응형
저작자표시 비영리

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

[Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램  (0) 2021.11.26
[bootstrap] 27 Best Free Bootstrap Admin Templates 2021  (0) 2021.11.04
[CSS] 중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까?  (0) 2021.06.09
html table css 참고  (0) 2021.04.29
[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?  (0) 2021.04.20
반응형

html table css 참고 

nanati.me/html_css_table_design/

 

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

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

nanati.me

 

반응형
저작자표시 비영리

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

image full screen css - How TO - Full Page Image  (0) 2021.08.26
[CSS] 중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까?  (0) 2021.06.09
[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?  (0) 2021.04.20
AdminLTE - Bootstrap 4 Admin Dashboard  (0) 2021.03.23
[bootstrap] AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때. CSS3 Media Queries  (0) 2020.12.21
반응형

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
반응형

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

+ Recent posts

티스토리툴바