css

프로그래밍/Style & Design

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

브라우저 화면 드레그 안되게 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; } 드래그를 할 수 없습니다. 드래그를 할 수 있습니다.

프로그래밍/Style & Design

[CSS] media query - 모바일 세로일때 , 아닐때

이미지 갤러리 한 줄에 4개씩 보여지다가, 모바일 세로일때 (가로 480px 이하일때) 한 줄에 2개씩 보여주기. 이미지는 width=100% 로 하고 넓이는 div에서 조절. object-fit:contain @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_contai..

프로그래밍/Style & Design

image full screen css - How TO - Full Page Image

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 ww..

프로그래밍/Style & Design

html table css 참고

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

프로그래밍/Style & Design

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

CSS 레인보우(Rainbow) 색상의 텍스트 만들기 background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple); // 배경색으로 무지개를 만듦 -webkit-background-clip: text; // 배경색이 텍스트에만 적용되도록 함 color: transparent; // 텍스트의 색을 투명으로 변경되어 배경색이 적용되도록 바꿈 Hello Rainbow! .text-rainbow { background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple); -webkit-background-clip: text; c..

프로그래밍/Style & Design

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

CSS 이미지 스프라이트(Image Sprite) 이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다. 이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 ..

프로그래밍/Script

[javascript] jQuery HTML / CSS Methods

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(..

프로그래밍/Script

[CSS] 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 Wel..

홍반장水_
'css' 태그의 글 목록