web sprit

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년 하려고 했는데 몇년은 더 할 수 있겠어요~우선 ..

placeholder 는 input 박스 안에 input 의 사용용도나 설명 내용을 넣을 수 있습니다. 하지만 기존의 낮은 브라우저에서 작동을 하지 않기 때문에 label 태그를 이용하거나 다른 태그에 내용을 넣어 스크립트로 작동하게 만들어 사용하였습니다. CSS3 기술임으로 모바일 위주의 작업에서 사용하면 유익할 것으로 보입니다. 다음은 input 에 placeholder 를 사용하는 코드입니다.123 Colored by Color Scriptercs 다음은 placeholder 선택자를 사용하여 input을 입력하기전 내용을 꾸며 줄 수 있습니다.12345678.text-placeholder-wrap{border-radius:5px; border:1px solid #e1e1e1; padding:20p..

작은 공간에서 긴문장을 한 줄에 표현하지 못할때 쓸 수 있는 방법입니다. 개발단에서 글자를 바이트 단위로 끊어 표현할 수 있지만 css로도 말줄임을 표현할 수 있으니 방법을 알려드리도록 하겠습니다. 12345678.box{ width:300px; overflow:hidden; //width 값에 벗어나면 숨김 text-overflow:ellipsis; //점처리 white-space:nowrap; //글씨가 길어도 아래로 떨어지지 않게 처리} Colored by Color Scriptercs 여기서 주의 할점은 꼭 width값이 존재해야 합니다. 그래야 점처리가 효과적으로 나타날 수 있습니다. 위의 기술은 한줄문장을 말줄임표시 처리를 한다면 2줄에서 또는 3줄에서 자기가 원하는 라인번째에 말줄임을 할 수..

box-sizing 속성은 CSS3 기술로서 이것을 사용함으로서 여백과 선을 포함시킬것인지 아님 내용만 포함시킬 것인지를 정할 수 있습니다.우선 지원하는 브라우저를 알아보도록 하겠습니다. 크롬 엣지 익스플로러 파폭 사파리 오페라 10.0 ~ 4.0-webkit- 12.0 8.0+ 29.0 ~ 2.0-moz- 5.1 ~ 3.2-webkit- 9.5 box-sizing 속성값 content-box 너비와 높이의 사이즈를 입력했을 때 그에 관한 사이즈를 선이나 안의 여백 부분을 포함시키지 않은 순수한 내용 부분만 사이즈가 적용됩니다.즉 box-sizing 의 값을 지정하지 않았을때와 같습니다. 기본이라는 것이죠. border-box width값과 height값이 있을경우 여백과 선을 포함시켜 사이즈를 적용 시..

다른말 필요없이 토렌트를 다운 받아 설치하고 그 밖에 기본 셋팅 요령에 대하여 설명하겠습니다.우선 다운받을 사이트에 접속 합니다.http://www.utorrent.com/intl/ko/ 들어가면 아래와 같은 메인 화면을 보실 수 있습니다. 하단으로 스크롤을 내리시면 아래와 같은 화면이 나오는데요 ~빨간영역을 클릭하면 토렌트를 설치할 수 있는 exe 파일을 다운 받게 됩니다. (참고로 저는 Window OS를 사용하기 떄문에 Window용을 다운 받았습니다.) 자 그럼 본격적으로 설치를 해 볼까요? 설치파일을 더블클릭하면 언어선택이 나옵니다. 당연히 한국인이니 Korean을 선택합니다.이제 계속 순조롭게 넘어가 보죠~ 자 그럼 스피드하게 넘어 가셧나요? 이 화면에서 다음 화면이 나올겁니다. 저는 필요없는..