web sprit

select 를 꾸미는 건 쉽지 않다. 브라우저마다 css 값도 다르게 적용되어 지고 제한되는 부분도 많이 때문에 원하는 디자인 변경이 불가한 경우도 있다. 기존의 select 를 꾸며주는 플러그인들이 많지만 접근성을 해치는 방식으로 꾸며주기 다반사다. select를 커스터마이징 해줄 때 다음과같이 이용한다. HTML1234567891011 선택해 주세요 선택해 주세요 선택1 선택2 선택3 선택4 Colored by Color Scriptercs CSS12345.select-script{position:relative; width:200px; height:40px; line-height:40px; border:1px solid #606976; border-radius:4px; text-transform:..

그대로의 radio 버튼을 사용하여도 되지만작업을 하다보면 커스터마이징 해야하는 경우가 있다. 그때를 대비해서 미리 준비해 봅니다. 아래와 같이 적용해 줍니다. HTML12345678910111213141516171819 라디오버튼1 라디오버튼2 라디오버튼3 Colored by Color Scriptercs CSS12345678.radio-list{width:300px; margin:20px auto 0;}.radio-list li{position:relative; font-size:13px; color:#000; border:1px solid #e2e2e2; background:#fbfbfb; padding:6px 10px; margin-bottom:-1px;}.radio-list li.active{f..

Window + L >>> 잠금화면 전환

자주쓰는 단축키 새탭열기 CTRL + T 탭 선택 CTRL + 1 ~ 8 마지막탭 선택 CTRL + 9 탭 순차적으로 선택 CTRL + TAB 탭 반대 순차적으로 선택 CTRL + SHIFT + TAB URL강조 CTRL + L 또는 ALT + D 북마크 지정 CTRL + D 다운로드 페이지 열기 CTRL + J 크롬 종료 CTRL + Q

jQuery 다운 URL : http://jquery.com/ 위 URL을 들어가시면 jQuery 사이트가 나옵니다. 메뉴에서 Download 를 눌러 들어 갑니다. 실제 적용하는 소스는 압축버전을 사용하시고 그에대한 내용을 보시고 싶으시다면 코드정리버전으로 확인하시면 되겠습니다. jQuery 1.x & jQuery 2.x 차이점 jQuery 1.x 버전은 하위 브라우저의 호환성을 가지고 있으나 jQuery 2.x 버전은 IE6/7/8 을 지원하지 않습니다. 간단하게 장·단점을 따지자면 jQuery 1.x 버전이 호환성을 보장하는 대신 그만큼 jQuery 2.x 버전보다 소스량 즉 용량이 큽니다. 그렇다면 당연히 jQuery 2.x 버전은 용량이 작겠죠. 불러오는 속도도 차이가 날겁니다. 체감적으로 많은..

웹페이지에 들어가면하드코딩 되어진 글씨 영역에 마우스를 대고 드래그하여 복사를 할 수 있다. css 에서는 드래그를 막아주는 속성이 있습니다. 그렇다고 해서 완벽히 차단은 아니고,속성을 적용하지 않은 곳에서 부터 드래그 한다면 표시는 안나더라도 복사할 수 있다고 하네요 ^^;;; 그래도 실전에 필요할 수 있으니 꼭 참고 바랍니다. 저도 플젝을 하면서 한번 사용해 보았네요 . 소스는 다음과 같습니다.123456 -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; cs 설정값은 다음과 같습니다.text – 텍스트를 선택할 수 있습니다.element – 텍스트를 선택할 수 있지만 요소 범위로 제한됩니다..

css로 투명도를 설정하는 방법과 그 밖의 유용한 Tip 정보를 알려드리기 위해 늦은 시간을 활용하여 끄적여(?) 보겠습니다. 일반적으로 저는 모를 사항 이었습니다만... 우리가 투명도를 주기 위해서는 CSS의 opacity라는 속성을 사용합니다.접근성을 고려하여 아래와 같은 순으로 작성합니다. 1234567.box{ -ms-filter:alpha(opacity=0); /* IE8 */ filter:alpha(opacity=0); /* IE5 ~ 7 */ opacity:0; /* IE9+, chrome4.0+, firefox2.0+, safari3.1+, opera9.0+ */} Colored by Color Scriptercs 하지만 위와 같이 작성하여 내가 원하는 곳만 투명하게 작업하기 위해선 불만족..

transform 속성은 크게 2가지로 나눌 수 있습니다. 2D Transforms 와 3D Transforms 입니다. 우선 브라우저 서포트 현황을 알아 봅시다. propertiy 크롬 엣지 파이어폭스 사파리 오페라 2D Transforms 36.0 ~ 4.0 -webkit- 10.0 ~ 9.0 -ms- 9.0 ~ 3.2 -moz- 23.0 ~ 15.0 -webkit- 10.5 -o- 23.0 ~ 15.0 -webkit- 10.5 -o- 3D Transforms 36.0 ~ 12.0 -webkit- 12.0 ~ 10.0 16.0 ~ 10.0 -moz- 9.0 ~ 4.0 -webkit- 23.0 ~ 15.0 -webkit- ※ 정확한 정보가 아닐 수 있으니 문제점 지적 부탁드립니다. ^^ Syntax12..

CSS3 는 아직 표준안에 확정되지 않은 상태에서각 브라우져는 벤더 프리픽스를 제공하여 CSS3 속성을 실험적으로 사용할 수 있게 해 줍니다.브라우져별 벤더 프리픽스는 아래와 같습니다. 웹킷 계열 브라우저 (사파리, 크롬) -webkit- 모질라 (파이어폭스) -moz- 오페라 -o- 인터넷 익스플로러 -ms- CSS3 기본속성기본속성 작성 벤더 프리픽스를 작성할 때 위와 같은 순으로 작성하면 됩니다.그 이유는 추후 CSS3 속성이 표준안으로 변경 되었을 경우 벤더 프리픽스가 붙은 내용은 무시하고 표준 속성만 지원하기 때문 입니다. ex)123456789box{ -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-..

오늘은 도메인을 구입하여 합니다.요즈음 블로그 꾸미는 맛에 살고 있는 관리자인데요 ㅎㅎ 티스토리 같은 경우 도메인에 tistory.com 이 붙는데요. 붙어있다고 나쁘진 않지만하위도메인으로 인해 애드센스를 달 수 없는 관계로 도메인을 구입하려 합니다. 자 서론이 긴건 별로죠 ~자 저는 대표적인 도메인 구입 사이트로 가비아와 카페24에서 구입하려 합니다.제가 하려는 도메인은 kcmschool 인데요 의외로? 없네요 ㅎㅎㅎ 뒤에 붙은 국가나 관공서 영역을 나타내는 부분(com, org 등...) 이 무엇이냐에 따라 가격이 심하게 차이 나는 군요. 가비아 카페24 저는 애드센스만 달것이기에 전혀 보지 못한 주소로 구입하려 합니다. 가비아가 정말 싸긴 싸군요 1년 하려고 했는데 몇년은 더 할 수 있겠어요~우선 ..