CSS25 [CSS] 마우스로 드래그하여 선택한 글자의 배경 색상 바꾸는 방법 마우스로 드래그해서 선택한 글자의 배경색을 바꿔보세요. 새로운 느낌일 겁니다^^ 보통은 마우스로 드래그 한 글자의 색상은 파란색 바탕에 글자색은 흰색으로 보여지는데요. 이걸 CSS 두 줄만 추가하면 바꿀수가 있습니다. ::selection { color:white; background:#ec008c; } ::-moz-selection { color:white; background:#ec008c; } /* firefox */ 아주 간단하죠. 여러분의 웹사이트 css 파일에 이 두 줄만 넣으시면 바뀝니다. 물론, 색상은 원하는 색으로 수정하시면 됩니다. 원래는 이런 색상으로 나오는데요. CSS를 추가하면 이렇게 색상이 바뀝니다. 2016. 2. 17. [이클립스] 톰캣서버에서 js, css 파일 변경되어도 브라우저에서 제대로 로딩하지 못할 때 js, css 파일 변경되어도 브라우저에서 제대로 로딩하지 못할 때는 톰캣이 어느 곳의 소스를 바라보고 있는지를 확인해야 합니다. 톰캣을 마우스로 더블클릭하면 위와같이 관리 화면이 나오는데요.Server Path, Deploy Path를 확인하셔서 그 폴더를 찾아가 보세요.톰캣은 이 Path에 있는 소스를 바라보기 때문에 이곳에 변경된 소스가 아닌 이전 소스가 있다면 브라우저가 반영하지 못합니다. 그럴 경우에는 톰캣서버에서 마우스 오른쪽 클릭을 해서 clean을 하시고 다시 톰캣을 restart 하시면 됩니다. 2015/11/17 - [프로그래밍 툴/Eclipse] - [이클립스] eclipse에서 톰캣(Tomcat) 실행시 프로젝트를 못 불러올 때 2015. 12. 9. [naradesign] CSS로 만든 깔끔하고 다양한 색상의 상단 메뉴바 CSS로 만든 깔끔하고 다양한 색상의 상단 메뉴바가 있어 소개합니다. CSS가 적용되지 않으면 이렇게 보입니다.깔끔하면서도 방탄웹으로 잘 만들었네요~http://naradesign.net/wp/2010/02/11/1185/ 2015. 6. 23. [구글] js, css 파일 구글 드라이브(Drive)에 저장해서 링크 가져다 사용하기 구글 드라이브에 js, css 파일을 저장해서 원하는 곳에 링크를 걸어서 사용하면 편리합니다.특히, 무엇보다 버전관리(이력관리)를 해준다는 장점이 있습니다.https://drive.google.com => 구글 드라이브 가기 먼저, 원하는 js, css 파일을 구글 드라이브에 업로드하세요.올린 파일에 마우스 오른쪽 버튼을 클릭해서 [공유]를 클릭하세요. [변경]을 클릭하시구요. [사용 - 웹에 공개]를 선택합니다. 공유할 링크 중에 아래 색칠된 부분이 중요합니다.나중에 연결할 url에서 key가 되는 부분입니다. Key가 되는 부분을 복사해서 다음 url을 만듭니다.http://googledrive.com/host/key==>http://googledrive.com/host/0B-QKv6rUolcCem0.. 2015. 6. 17. 이미지 없이 CSS로 만든 깔끔한 가로세로 막대그래프 및 별그래프 이미지 없이 CSS로 만든 깔끔한 이런 그래프 어떠세요? 1. 세로 막대그래프 2. 가로 막대그래프 3. Bar 그래프 4. 만족도 별그래프 http://naradesign.net/wp/2010/03/17/1233/여기 가시면 소스 확인하실 수 있습니다. 2015. 6. 17. [jQuery] 글자 폰트 사이즈 늘리고 줄이기, 숨기고 보이기 예제 먼저, 아래 링크를 클릭해서 이전 예제를 참조하세요.2014/12/03 - [프로그래밍 언어/jQuery] - 글자 폰트 사이즈 늘리고 줄이기 예제 .more { color: blue; font-size: 25px; font-weight: bold; text-decoration: underline; } 말줄임표(...)에 스타일시트에 more 클래스를 정의합니다. $("p:eq(1)").hide(); /* 태그 중 첫번째 객체를 숨긴다. */ $("span.more").click(function() { $("p:eq(1)").show('slow'); $(this).hide('slow'); }); show()는 객체를 보이게 하고, hide()는 숨기는 명령입니다. show('slow')는 객체를 천천히 .. 2014. 12. 3. [jQuery] 글자 폰트 사이즈 늘리고 줄이기 예제 .label { font-weight: bold; /* 글자를 진하게 */ font-size: 12pt; margin: 20px 0; /* 바깥 위아래 여백을 20px 준다. */ } .button { width: 200px; border: 1px solid #CCCCCC; /* 테두리를 1px크기의 실선으로 #CCCCCC 색깔로 입힌다. */ background-color: #EEEEEE; /* 배경색 */ padding: 2px; margin: 10px 0; } 스타일시트에 label과 button 클래스를 정의합니다. $(document).ready(function() { $("div.button").click(function() { var $speech = $("div.speech"); var c.. 2014. 12. 3. [jQuery] 행에 징검다리 스타일 입히기 (:odd, :even) .odd { background-color: #FFC;/* 홀수번째 줄은 연한 노란색 */ } .even { background-color: #CEF;/* 짝수번째 줄은 연한 푸른색 */ }스타일시트에 odd, even 클래스를 정의합니다. 각각, 홀수와 짝수 행에 적용할 클래스입니다. $(document).ready(function() { $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); $("td:contains('헨리')").addClass("highlight"); });DOM이 로드되고 이미지가 로드되기 전에 $(document).read() 함수가 실행됩니다. 홀수행(tr:odd)에 odd 클래스를 적용하고, 짝수행(tr:even)에 ev.. 2014. 12. 3. [jQuery] 리스트 항목에 레벨 단위로 스타일 입히기 (UL, LI 태그) .horizontal { float: left; /* 좌측 정렬 */ list-style: none; /* 목록 앞의 글머리 기호 표시를 제거한다. */ margin: 10px; /* 요소의 모든 가장자리에 10 픽셀의 여백을 준다. } 스타일시트에 horizontal 클래스를 정의합니다. $(document).ready(function() { $("#selected-plays > li").addClass("horizontal"); }); DOM이 로드되고 이미지가 로드되기 전에 $(document).read() 함수가 실행됩니다. selected-plays를 ID값으로 가지는 요소에 horizontal 클래스를 적용하라는 명령입니다. 2014. 12. 3. HTML과 CSS만으로 구축하는 웹 - NaraDesign 이미지 없이 HTML / CSS 만으로 템플릿을 깔끔하게 만들어놓은 곳이 있어서 링크합니다. http://naradesign.net/ouif 정찬명 님이 직접 만들어서 올려놓은 소스들인데,,, 너무 맘에 드네요~게다가 웹표준까지 지킨 소스라고 하니 브라우저와 상관없이 잘 동작하리라 봅니다.앞으로 자주 애용할 듯.. 2012. 11. 15. 이전 1 2 다음
