본문 바로가기

HTML15

[HTML5/CSS3/jQuery] 반응형 상단에 광고 추가 가능한 헤더 템플릿(Template) - 밝은 빨강 계열 샘플 See the Pen responsive header template (red) by Woojin Choi (@woojin-choi) on CodePen. 밝은색의 경쾌한 상단 템플릿 예제입니다. 외국계 템플릿을 참고해서 반응형으로 한번 만들어 봤습니다. 구글 애드센스 하시는 분들을 위해 광고도 하나 넣었습니다. 2018. 12. 13.
[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.
Html Html5 Css Javascript(자바스크립트) jQuery 실행기 - 바로 확인 가능) Editor - HTML HTML5 CSS javaScript jQuery Output 새창으로 보기 2018. 5. 20.
[html] meta 태그로 페이지 이동하기 Head Css .remainSeconds {color:red} Javascript var seconds = 11; function calSeconds() { seconds--; $(".remainSeconds").html( seconds ); setTimeout(calSeconds, 1000); } $(function(){ calSeconds(); }); Body 10초 후에 티스토리로 넘어갑니다. 설명 위 메타 태그를 사이에 넣어주시면 됩니다. 10초 후에 티스토리로 이동하는 샘플입니다. 10초 후에 티스토리로 넘어갑니다. 2016. 2. 28.
[Html] javascript로 체크박스의 글자(text)를 클릭해도 체크되도록 하기 체크박스의 작은 부분을 클릭하는 게 간혹 힘들다고 느껴지는 때가 있습니다.특히, 사용자 입장에서 많은 편리함을 제공하는 요즘같은 때에는 더욱 불편하게 느껴지고, 운영자의 무심함을 탓하기도 합니다.조금만 더 신경써 줬으면 하고요. 아래처럼 작성하는 게 체크박스의 전통적인 방법인데요.checkbox” id=”hintYn” /> 힌트 포함checkbox” id=”imageUrl” /> 이미지 포함checkbox” id=”explanation” /> 설명 포함 아래처럼 정말 조금만 신경쓰면 체크박스의 영역을 텍스트로 확장할 수 있고 사용자에게 편리함을 더할 수 있습니다.“hint“>checkbox” id=“hint” /> 힌트 포함“image“>checkbox” id=“image” /> 이미지 포함“explan.. 2016. 2. 9.
[JSP] Jsp 주석과 Html 주석을 같이 사용하면 편리합니다. 코딩을 하다보면 해당 구간을 주석처리 하고 싶은데, 이미 주석이 안에 들어 있어서 난감할 때가 있죠. 이렇게 코딩하면 에러나죠. 그렇다고 기존에 있던 주석을 지우고 하기도 좀 꺼림칙합니다.이럴 땐 Jsp 주석()을 사용하시면 깔끔합니다. 깔끔하죠? 2015. 6. 5.
[자바스크립트] javascript 정규식으로 Html 태그 제거하기 다음 정규식 스크립트로 Html 태그를 제거합니다.(]+)>) 아래처럼 Html 태그를 제거하는 함수를 만들어 사용하시면 됩니다.function removeTag( html ) { return html.replace(/(]+)>)/gi, ""); } 2015. 3. 23.
[java/jsp] Html Tag(태그) 제거하는 정규식 Html 태그가 갯수가 몇 갠데 그 많은 태그를 어떻게 다 제거해? 게다가 태그 안에는 갖가지 속성들도 들어있는데 말이지.. 이렇게 생각을 하셨다면 아직 정규식의 위력을 모르시는 분일 가능성이 큽니다. 정규식 단 한줄이면 모든 Html 태그를 다 제거할 수가 있답니다. java나 jsp에서 아래 메소드를 만들어서 한번 사용해 보세요~ Html 태그 없는 내용만 추출하실 수 있습니다. 저는 엑셀다운로드할 때 웹에디터의 내용을 엑셀에 넣어야 하는 경우에 사용해 봤습니다. 엑셀에서는 Html 태그를 인식못하기 때문에 모두 제거하고 내용만 뿌려줘야 하거든요. ]*)?(\\s)*(/)?> /** * 모든 HTML 태그를 제거하고 반환한다. * * @param html * @throws Exception */ pu.. 2015. 3. 19.
HTML 글자를 강조 태그들 - b (굵게), i (기울임), u (밑줄), ins (밑줄), tt (타자체), sup (위첨자), sub (아래첨자), s (가로선), del (가로선), small (작게), big(크게) 설명이 필요 없습니다.Result 눌러서 직접 실행된 모습을 보시면 됩니다. 2015. 1. 16.
HTML과 CSS만으로 구축하는 웹 - NaraDesign 이미지 없이 HTML / CSS 만으로 템플릿을 깔끔하게 만들어놓은 곳이 있어서 링크합니다. http://naradesign.net/ouif 정찬명 님이 직접 만들어서 올려놓은 소스들인데,,, 너무 맘에 드네요~게다가 웹표준까지 지킨 소스라고 하니 브라우저와 상관없이 잘 동작하리라 봅니다.앞으로 자주 애용할 듯.. 2012. 11. 15.

티스토리툴바