본문 바로가기

전체 글751

[HTML/CSS] 일명 Sexy CSS Button(버튼)이라고 합니다. FontAwesome을 이용해서 SCSS로 만들어진 버튼인데요. 일명 Sexy SCSS Button이라고 합니다. 그래서 그런지 버튼이 좀 섹시한 것도 같고... CSS로 변환된 소스를 올려봅니다. 2018. 11. 16.
[HTML/CSS] 심플하고 단순하지만 깔끔한 구글 버튼 (Google Button) 진짜 심플,단순하지만 깔끔한 구글 버튼입니다.저는 요즘 이런게 좋더군요^^ 종류도 몇 가지 안되네요. 2018. 11. 16.
[HTML/CSS] 깔끔하고 심플한 일명 쿨버튼(Cool Button)입니다. 색상별 크기별 다 있습니다. 2018. 11. 16.
[CSS] 깔끔하고 심플한 플라스틱 버튼입니다. 설명 필요 없습니다.HTML / CSS로만 만들어졌으므로 소스 참고하시면 됩니다. 2018. 11. 16.
[HTML] Textarea에 간단하게 가로 스크롤 추가하기 See the Pen Horizotal scrollbar textArea attribute by zzzznara (@zzznara) on CodePen. 구글링하면 javascript로 scrollbar를 만드는 예제가 많은데요. 그럴 필요없이 이렇게 속성 하나만 추가해주면 됩니다. 2018. 11. 15.
[jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 2가지 이상의 객체를 동시에 사용할 때 사용합니다. 즉, 위 예제에서 버튼과 레이어를 클릭할 때는 사라지지 않아야 하고 그 2개를 제외한 다른 곳을 클릭하면 레이어가 사라집니다. 2018. 11. 14.
[jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 메뉴바나 레이어 메뉴에 많이 사용되는 스크립트랍니다. 2018. 11. 12.
[제이쿼리 플러그인 소스] inputbox에서 커서가 원하는 곳에 위치하게 하는 jquery plugin See the Pen [jQuery plugin] inputbox에서 커서가 원하는 곳에 위치하게 하는 제이쿼리 플러그인 소스 by zzzznara (@zzznara) on CodePen. 자동으로 커서를 inputbox에 위치하게 할 때 inputbox의 내용 뒤에 커서가 위치하게 하는 제이쿼리 플러그인 입니다. $(“[name=cur]”).focus(); 이렇게 focus()를 주게 되면 커서가 앞에 위치합니다. $(“[name=cur]”).focus().setCursorPosition(); 이 플러그인을 넣고 focus() 뒤에 setCursorPosition( 1 )를 하게 되면 커서가 글자 뒤에 위치합니다. setCursorPosition() 안의 숫자는 포커스의 위치입니다. 2018. 10. 25.
[구글 유튜브] 클립다운(Clip Down)으로 Youtube를 mp3, mp4 파일로 다운로드하기 유튜브를 보다보면 파일로 다운로드 받고 싶을 때가 있는데요.다행히도 이런 기능을 가지고 있는 무료 프로그램이 있네요~이 프로그램 만드신분 저작권에 걸리는 건 아닌지 걱정이 됩니다. http://clipdown.co.kr 이 링크 클릭하고 들어가셔서 윈도우용 클립다운 파일을 다운로드해서 설치하시면 되구요.(아직은 윈도우용 설치파일만 지원하는 것 같아요.) 사용방법은 정말 간단합니다.클립다운을 실행한 상태에서 유튜브의 원하는 영상을 여시고 주소만 복사하면 나머지는 클립다운이 다 알아서 하네요.유튜브에서 주소를 복사하려면 [공유 > 복사]하시면 됩니다. (아래 그림을 참고해 주세요.) 이렇게 복사만해도 아래 그림처럼 클립다운이 자동으로 주소를 인식해서 프로그램이 동작합니다.자동으로 동작안하면 클립다운에 주소를.. 2018. 8. 11.
[티스토리] Tistory의 블로그 제목(블로그 타이틀)에 색상 넣기(꾸미기) 티스토리의 블로그 타이틀은 다소 밋밋하게 표시가 되죠."어느 프로그래머의 스마트한 이야기"라는 블로그 제목이 있으면 이 전체의 색상을 바꾸거나 꾸미는 건 쉽지만 부분부분 글자별로 색상을 넣으려면 어떻게 해야 할까요? 이렇게 흰색으로 돼 있는 블로그 타이틀을 아래처럼 부분부분 마디별로 색상을 주려면 어떻게 해야 할까요? 그냥 단순히 CSS 만으로는 불가능하고요.자바스크립트의 replace(), 즉 치환 기능을 사용하면 아주 간단하게 해결할 수 있습니다. 티스토리의 스킨편집에 들어가서 이 변수를 찾아야 합니다.바로 이것이 블로그 제목 즉, "어느 프로그래머의 스마트한 이야기"라고 보여지는 부분입니다.jQuery로 이 부분을 소스로 표현하면... $("header .title a").html();로 표현할 수.. 2018. 6. 28.
[Wordpress] 워드프레스 글 제목을 url로 사용해 보자. (Permalink Settings를 Post Name으로 사용) 워드프레스를 공부하고 사용한지도 벌써 4년이 넘어 가네요.이제 정말 본격적으로 뭔가 만들어 볼 셈으로 사이트 이곳저곳을 보다가http://###.com/?p=123 이렇게 숫자로 보여지는 url이 맘에 좀 걸렸습니다.뭔가 글 내용을 반영해주는 url이었으면 좋겠다는 생각을 하게 됬죠. 그래서, Permalink 셋팅에 들어가서 글 제목을 Url로 사용할 수 있게끔 설정을 바꿔봤습니다. 근데, 이렇게하고 메뉴를 클릭해보니 해당글을 찾지를 못하는걸요 ㅠㅠ 도리어 Url이 한글이면 한글까지 깨지는군요 ㅠ구글링을해서 찾아보니 한글문제는 Wordpress 루트에 있는 .htaccess 파일에 아래처럼 4줄을 추가하면 해결이 된다고 하네요.1234CheckURL OnServerEncoding UTF-8cs 이렇게 .. 2018. 6. 22.
[jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) See the Pen [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) by zzzznara (@zzznara) on CodePen. 3단 레이아웃일 경우, 상단/좌측하단/우측하단 이렇게 구분이 되는데요. 이미지나 내용이 많을 경우 좌측하단과 우측하단의 높이가 일치하지 않는 문제가 생깁니다. 이럴 때 사용하면 좋을 것 같네요~ 예제에서 처음 화면이 열릴 때 좌우측 하단의 높이가 다릅니다. 좌측하단 높이 : 300px 우측하단 높이 : 100px 하지만, setTimeout() 함수로 2초 후에 equalHeights() 함수를 호출하여 높이를 같게 해줍니다. 물론, 실제 레이아웃 등에 사용할 때는 setTimeout() 함수는 필요없으므로 제거하시면 됩니다... 2018. 6. 10.
[jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) See the Pen [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) by zzzznara (@zzznara) on CodePen. 1. 달력에 숫자와 하이픈(-)만 입력가능합니다. 2. 존재하지 않는 날짜를 입력했는지 체크합니다. 3. from ~ to 달력인 경우, 서로 기간이 엇갈리지 않게 체크 및 disabled 처리합니다. (from 달력에 ‘2018-01-01’이 선택된 경우, to 달력은 ‘2018-01-01’ 이후만 선택 가능합니다.) 2018. 5. 31.
[bootstrap] 부트스트랩 사이드바 픽셀(px)로 고정된 반응형 레이아웃 그리드 보통 부트스트랩 반응형 그리드는 브라우저 창 너비가 줄어들면 사이드바도 같이 줄어드는데 사이드바는 줄어들지 않고 정해진 px로 고정돼 있으면서 내용 부분만 줄어드는 반응형 그리드 예제입니다. 참고로, 부트스트랩 3.0 이상에서만 동작한다고 합니다. 2018. 5. 26.
[자바스크립트] javascript로 iframe에 동적으로 소스를 추가하거나 변경하는 방법 이런식으로 iframe에는 파일을 하나 만들어서 src 속성으로 넣었는데요. 파일이 없어도 iframe에 소스를 추가하거나 변경할 수 있습니다. 소스에 주석이 돼 있으므로 설명은 생략합니다. 2018. 5. 24.