본문 바로가기

프로그래밍 언어/HTML5 + CSS327

[CSS] 텍스트를 드래그하지 못하게 하는 방법 텍스트를 드래그하지 못하게 하는 방법입니다. CSS만으로 할 수 있어서 좋네요^^ CSS 소스를 보면 각 브라우저별로 다 막아버렸습니다. 위 예제 Result에서 마우스로 드래그 한번 해보세요~ 2019. 3. 21.
[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.
[HTML5/CSS3/jQuery] 반응형 상단에 광고 추가 가능한 헤더 템플릿(Template) - 밝은 빨강 계열 샘플 See the Pen responsive header template (red) by Woojin Choi (@woojin-choi) on CodePen. 밝은색의 경쾌한 상단 템플릿 예제입니다. 외국계 템플릿을 참고해서 반응형으로 한번 만들어 봤습니다. 구글 애드센스 하시는 분들을 위해 광고도 하나 넣었습니다. 2018. 12. 13.
[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.
[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.
Html Html5 Css Javascript(자바스크립트) jQuery 실행기 - 바로 확인 가능) Editor - HTML HTML5 CSS javaScript jQuery Output 새창으로 보기 2018. 5. 20.