프로그래밍 언어349 [CSS] 텍스트를 드래그하지 못하게 하는 방법 텍스트를 드래그하지 못하게 하는 방법입니다. CSS만으로 할 수 있어서 좋네요^^ CSS 소스를 보면 각 브라우저별로 다 막아버렸습니다. 위 예제 Result에서 마우스로 드래그 한번 해보세요~ 2019. 3. 21. [Bootstrap] 부트스트랩으로 만든 Adsense 광고가 포함된 퀴즈/문제 템플릿 예제 샘플 See the Pen responsible quiz/question template with adsense by Woojin Choi (@woojin-choi) on CodePen. 부트스트랩과 CSS로 만든... 광고를 포함한 퀴즈/문제(4문항) 템플릿입니다.개인적으로 사용할데가 있어서 만들어 봤습니다. 2018. 12. 18. [Bootstrap] 부트스트랩 토글 버튼 - 클릭시 서로 색상이 바뀌는 예제 샘플 See the Pen bootstrap toggle button - color change by Woojin Choi (@woojin-choi) on CodePen. 클릭시 버튼 색상이 서로 바뀌는 예제입니다. 단순히 active 클래스만 변경되는 게 아님. 2018. 12. 17. [Bootstrap] 부트스트랩과 CSS로 이미지 위에 글자 보여주고 overlay되게 하기 See the Pen Bootstrap/CSS transparent text on image by Woojin Choi (@woojin-choi) on CodePen. 부트스트랩과 CSS 이용해서 브라우저 크기 조절하면 이미지가 브라우저 크기에 맞게 바뀝니다. 이미지 위에 반투명으로 글자가 보이고 마우스를 이미지 위에 올리면 글자가 이미지 전체에 overlay 됩니다. 2018. 12. 17. [CSS] 이미지 위에 글자(텍스트) 보여주기 샘플 예제 (반투명) See the Pen text mouseover on image with transparent by Woojin Choi (@woojin-choi) on CodePen. 이미지 위에 글자 보여주는 소스에요. 이미지는 원하는 url로 바꿔주시면 됩니다. 2018. 12. 17. [CSS] 반응형 퀴즈 및 문제풀이(4문항) 레이아웃(Layout) See the Pen responsive Quiz Layout - multiple skin by Woojin Choi (@woojin-choi) on CodePen. 퀴즈 프로그래밍 할 일이 있어서 퀴즈 레이아웃을 CSS로 만들어 봤습니다. class만 바꾸면 되도록 여러가지 색깔별로 변경이 가능합니다. (그건 직접 테스트 해보세요.) 이미지를 원하는 url로 변경하셔서 사용하시면 됩니다. 2018. 12. 17. [Bootstrap] CSS만 사용해서 하단(footer) 고정 레이어 샘플 예제 (부트스트랩용 샘플) See the Pen bottom fix footer - bootstrap by Woojin Choi (@woojin-choi) on CodePen. 하단 고정 레이어 여러가지 방법이 있는데요. 부트스트랩으로 템플릿을 만들어야해서 부트스트랩 class를 사용해서 만들어 봐야겠습니다. 부트스트랩의 기능으로 하단을 고정시킨 건 아닙니다. CSS로만 화면 하단에 고정시켰습니다. 2018. 12. 13. [HTML5/CSS3/jQuery] 반응형 상단에 광고 추가 가능한 헤더 템플릿(Template) - 밝은 빨강 계열 샘플 See the Pen responsive header template (red) by Woojin Choi (@woojin-choi) on CodePen. 밝은색의 경쾌한 상단 템플릿 예제입니다. 외국계 템플릿을 참고해서 반응형으로 한번 만들어 봤습니다. 구글 애드센스 하시는 분들을 위해 광고도 하나 넣었습니다. 2018. 12. 13. [JavaScript] inputbox에 숫자와 백스페이스(←)만 Key-In(입력)되게 하는 자바스크립트 소스 See the Pen Input Only Number & Backspace by Woojin Choi (@woojin-choi) on CodePen. Inputbox에 숫자와 백스페이스(←)만 Key-In되게 하는 자바스크립트입니다. event.keyCode로 제어합니다. 문자가 입력되었다 사라지는 게 아니고 아예 문자는 입력이 안됩니다. 2018. 11. 20. [jquery] 제이쿼리로 map()과 join()을 사용해서 객체의 문자열을 연결하는 간단한 방법 See the Pen jquery join sample by zzzznara (@zzznara) on CodePen. map()과 join()을 사용해서 객체의 문자를 연결하는 간단한 방법입니다. join()은 문자열을 콤마(,)로 연결해 줍니다. 2018. 11. 18. [CSS] CSS만으로 content / sidebar의 좌우 높이가 동일하게 유지하는 간단한 방법 See the Pen CSS sidebar content equals Heigtht by zzzznara (@zzznara) on CodePen. 새창으로 보셔야 합니다. 화면이 작으면 sidebar와 content가 위아래로 보입니다. 예제는 bootstrap을 사용했는데 CSS만 확인하시고 적용하시면 됩니다. 2018. 11. 18. [HTML/CSS] 메뉴 클릭시 애니메이션 효과로 해당 메뉴를 활성화시키는 소스 See the Pen Activated animation Accordions by Woojin Choi (@woojin-choi) on CodePen. 2018. 11. 16. [HTML/CSS] Radio Accordions - 하늘색 계열의 클릭하면 설명을 보여주는 메뉴입니다. See the Pen BGZpbN by Woojin Choi (@woojin-choi) on CodePen. 2018. 11. 16. [HTML/CSS] 움직이는 애니메이션 효과가 있는 메뉴 (Horizontal Accordion) See the Pen bQRgmd by Woojin Choi (@woojin-choi) on CodePen. 깔끔하면서도 클릭하는 재미가 있는 메뉴네요^^ CSS만으로 이런 Animation 효과를 낼 수 있다는 게 놀랍습니다. 2018. 11. 16. [HTML/CSS] 일명 Sexy CSS Button(버튼)이라고 합니다. FontAwesome을 이용해서 SCSS로 만들어진 버튼인데요. 일명 Sexy SCSS Button이라고 합니다. 그래서 그런지 버튼이 좀 섹시한 것도 같고... CSS로 변환된 소스를 올려봅니다. 2018. 11. 16. 이전 1 2 3 4 ··· 24 다음