css, div, float_left, media_query
반응형

이미지 갤러리 한 줄에 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
[CSS] media query - 모바일 세로일때 , 아닐때  (0) 2021.12.23
피그마 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
background-image, css, full-screen, IMAGE, Screen
반응형

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
image full screen css - How TO - Full Page Image  (0) 2021.08.26
[CSS] 중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까?  (0) 2021.06.09
html table css 참고  (0) 2021.04.29
[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?  (0) 2021.04.20
css, HTML, style, table, 스타일
반응형

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
html table css 참고  (0) 2021.04.29
[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, 레인보우, 텍스트
반응형

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
[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 이미지 스프라이트(Image Sprite)  (0) 2020.11.17
css, IMAGE, Sprite, 이미지스프라이트
반응형

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
CSS 이미지 스프라이트(Image Sprite)  (0) 2020.11.17
[iCon] iCon download  (0) 2020.10.19
Free themes for Bootstrap  (0) 2020.10.14
[FONT] 웹 한글 폰트 - 눈누 https://noonnu.cc/  (0) 2020.09.17
css, HTML, jQuery, Methods, W3schools
반응형

jQuery HTML / CSS Methods

www.w3schools.com/jquery/jquery_ref_html.asp

 

jQuery HTML / CSS Methods

jQuery HTML / CSS Methods jQuery HTML / CSS Methods The following table lists all the methods used to manipulate the HTML and CSS. The methods below work for both HTML and XML documents. Exception: the html() method. Method Description addClass() Adds one

www.w3schools.com

MethodDescription

addClass() Adds one or more class names to selected elements
after() Inserts content after selected elements
append() Inserts content at the end of selected elements
appendTo() Inserts HTML elements at the end of selected elements
attr() Sets or returns attributes/values of selected elements
before() Inserts content before selected elements
clone() Makes a copy of selected elements
css() Sets or returns one or more style properties for selected elements
detach() Removes selected elements (keeps data and events)
empty() Removes all child nodes and content from selected elements
hasClass() Checks if any of the selected elements have a specified class name
height() Sets or returns the height of selected elements
html() Sets or returns the content of selected elements
innerHeight() Returns the height of an element (includes padding, but not border)
innerWidth() Returns the width of an element (includes padding, but not border)
insertAfter() Inserts HTML elements after selected elements
insertBefore() Inserts HTML elements before selected elements
offset() Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent() Returns the first positioned parent element
outerHeight() Returns the height of an element (includes padding and border)
outerWidth() Returns the width of an element (includes padding and border)
position() Returns the position (relative to the parent element) of an element
prepend() Inserts content at the beginning of selected elements
prependTo() Inserts HTML elements at the beginning of selected elements
prop() Sets or returns properties/values of selected elements
remove() Removes the selected elements (including data and events)
removeAttr() Removes one or more attributes from selected elements
removeClass() Removes one or more classes from selected elements
removeProp() Removes a property set by the prop() method
replaceAll() Replaces selected elements with new HTML elements
replaceWith() Replaces selected elements with new content
scrollLeft() Sets or returns the horizontal scrollbar position of selected elements
scrollTop() Sets or returns the vertical scrollbar position of selected elements
text() Sets or returns the text content of selected elements
toggleClass() Toggles between adding/removing one or more classes from selected elements
unwrap() Removes the parent element of the selected elements
val() Sets or returns the value attribute of the selected elements (for form elements)
width() Sets or returns the width of selected elements
wrap() Wraps HTML element(s) around each selected element
wrapAll() Wraps HTML element(s) around all selected elements
wrapInner() Wraps HTML element(s) around the content of each selected element

 

 

반응형
저작자표시비영리

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

[jQuery] jQuery 데이터 속성 값을 기반으로 요소를 찾는 방법은 무엇입니까?  (0) 2020.11.10
[jQuery] javascript - How to format $.now() with Jquery  (0) 2020.11.10
[javascript] jQuery HTML / CSS Methods  (0) 2020.10.21
[javascript] jQuery - append, prepend, after, before  (0) 2020.10.21
[javascript] Deleting duplicated values from html form drop-down option list  (0) 2020.10.15
[javascript] null, undefined, 공백 체크  (0) 2020.10.12
css, selector, 셀렉터, 스타일
반응형

 

www.w3schools.com/cssref/css_selectors.asp

 

CSS Selectors Reference

CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements

www.w3schools.com

www.w3schools.com/cssref/trysel.asp

 

Try CSS Selector

Welcome to My Homepage My name is Donald Duck. I live in Duckburg I have many friends: Goofy Mickey Daisy Pluto All my friends are great! But I really like Daisy!! Ciao bella We are all animals! My latest discoveries have led me to believe that we are all

www.w3schools.com

CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.

SelectorExampleExample description

.class .intro Selects all elements with class="intro"
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links

 

반응형
저작자표시비영리

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

[javascript] Deleting duplicated values from html form drop-down option list  (0) 2020.10.15
[javascript] null, undefined, 공백 체크  (0) 2020.10.12
[CSS] CSS Selector  (0) 2020.09.08
TypeScript-Handbook 한글 문서  (0) 2020.08.28
Next.js Conf — An interactive online experience by the community, free for everyone  (0) 2020.08.28
FileSaver.js - An HTML5 saveAs() FileSaver implementation.  (0) 2020.08.21
array, css, dashoffet, jQuery, jsfiddle, SVG
반응형

SVG, dashoffset, X,Y, animation

https://jsfiddle.net/user/dashboard/fiddles/

반응형
저작자표시비영리

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

파사드(프랑스어: Façade) Facade 디자인  (0) 2019.07.10
웹측정 - 모니터 디스플레이, 화면해상도  (0) 2019.06.19
SVG, dashoffset, X,Y, animation  (0) 2019.06.18
해상도/일람  (0) 2019.06.17
UXPin - UI Design and Prototyping Tool  (0) 2019.05.30
CSS3 Media Queries  (0) 2019.04.17

+ Recent posts