반응형
CSS〃간단한 드롭다운 메뉴(Simple Dropdown Menu)

CSS〃간단한 드롭다운 메뉴(Simple Dropdown Menu)

제목에 맞게 HTML과 CSS만으로 구현한 정말 간단한 드롭다운 메뉴를 정리합니다. 심플하게 드롭다운 구성만 들어있기 때문에 여기서 응용해서 작업이 들어가야겠죠. 드롭다운은 버튼안에 a 태그를 숨긴 뒤에 마우스 버튼을 위에 올렸을때 보이기 하는 원리입니다. See the Pen Simple Dropdown Menu by jihun Sim (@simjihun) on CodePen.

  • format_list_bulleted HTML·CSS
  • · 2019. 3. 17.
  • textsms
CSS〃글자 밑 호버 이펙트 (Bottom Border Hover Effect)

CSS〃글자 밑 호버 이펙트 (Bottom Border Hover Effect)

웹사이트의 메뉴나 버튼에 마우스를 올렸을때 효과를 주기 위한 이펙트 중에 하나로 Border bottom에 효과를 주는 방법이 있는데요. bottom에 solid 효과에 색만 잘 골라서 선택해주면 사이트가 좀 달라집니다. hover effect도 글자 가운데에서부터 퍼져 나갈지, 왼쪽에서부터 퍼질지, 오른쪽에서 퍼질지에 따라 사용 방법이 다른데 좋은 소스가 있어 저장 용도로 가져왔습니다. ◇ 소스코드 See the Pen Border bottom hover effect by jihun Sim (@simjihun) on CodePen. 간단한 CSS나 자바스크립트는 앞으로 코드펜에 저장 후 가져오는 방법이 가독성이 좋아보이네요. 이제는 이 방법을 사용해서 블로그 포스팅 하겠습니다.

  • format_list_bulleted HTML·CSS
  • · 2019. 3. 17.
  • textsms
Javascript&CSS〃웹사이트 로딩중 이미지 띄우기

Javascript&CSS〃웹사이트 로딩중 이미지 띄우기

이번글은 웹사이트나 홈페이지에서 이미지나 CSS, JavaScript 등을 전송받을때 로딩중 이미지를 띄우는 방법입니다. 아주 간단하게 자바스크립트와 CSS로만 만들어서 메인페이지나 쓰고자 하는 페이지에 간단히 복사 붙여넣기로 적용만 시키면 됩니다. ■ 로딩 이미지 만들기 1. http://preloaders.net/ 여러가지 로딩 이미지를 제공합니다. 2. http://www.ajaxload.info/쉽고 간단한 로딩 이미지를 만들 수 있습니다. ■ 로딩 소스 위에서 로딩이미지를 생성하셨다면 다음은 소스를 입혀줄 차례입니다. 먼저 CSS소스 다음은 SCRIPT 소스 마지막으로 HTML or JSP 안에 들어가는 소스 이정도면 이미지나 AJAX 통신을 할때 로딩중 이미지를 보여주고, 모든 응답이 끝나면 ..

  • format_list_bulleted Script·JQuery
  • · 2017. 2. 2.
  • textsms
Javascript〃자바스크립트 팝업창 1일동안 띄우지 않기

Javascript〃자바스크립트 팝업창 1일동안 띄우지 않기

홈페이지나 웹사이트를 만들게 되면 메인화면에 팝업창을 띄우게 될 경우가 생기죠? 팝업 띄우는 방법은 여러가지 있는 걸로 알고 있습니다. DIV로 팝업 띄우는 것도 이쁘긴 한데 각 사이트 성격마다 어울리는 것을 써야겠죠~!!! 그래서 저는 자바스크립트로 팝업창을 띄워봤습니다. 실행결과를 올리고 싶지만 회사 사이트라 소스만 정리합니다. ■ MAIN 페이지 jQuery(document).ready(function($) { pevent(); }); function pevent(){ function getCookie(name){ var nameOfCookie = name + "="; var x = 0; while (x

  • format_list_bulleted Script·JQuery
  • · 2017. 1. 23.
  • textsms
티스토리 SyntaxHighlighter 테마/브러쉬 변경

티스토리 SyntaxHighlighter 테마/브러쉬 변경

이전 글 티스토리에 SyntaxHighlighter 적용하는 방법 글과 이어지는 관련 글입니다. 그래서 이번 글에서는 소스코드를 보기 좋게, 편하게 하기 위한 플러그인인 SyntaxHighlighter 의 테마와 브러쉬를 변경하는 방법을 설명하는 글이 되겠습니다. ■ 테마 변경SyntaxHighlighter 테마는 7가지 종류가 있습니다. 각자 마음에 드는 테마를 골라 사용하시면 되겠습니다.먼저 공식주소는 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 여기서 보시면 되구요.티스토리 관리자모드 HTML/CSS 편집화면에서 해당 스크립트를 복사 붙여넣기 하면 됩니다. 1) Default 2) Django 3) Eclipse 4) Emacs 5) Fa..

  • format_list_bulleted 꾸미기
  • · 2016. 12. 9.
  • textsms
티스토리 SyntaxHighlighter 적용하는 방법

티스토리 SyntaxHighlighter 적용하는 방법

티스토리에 글작성할 때 그동안 Color Scripter로 소스를 올렸었는데, 반응형 스킨이라서 그런지 몰라도 제가 원하는대로 수정하기 힘들어서 바꾸고 싶어졌습니다. 그래서 알아보다가 한번 적용 시켜본 소스코드 플러그인이 SyntaxHighlighter입니다. 설명에 앞서 일단 적용부터 시켜볼게요. 많은 말이 필요 없습니다. 사람들이 왜 이 플러그인을 사용하는지 써보면 알겠더라구요. But~ 하지만 혼자서 적용하기엔 좀 까다롭기 때문에 잘 보고 따라하셔야 됩니다. ■ 적용방법 - 주소링크 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에 들어가서 위 사진에 빨간색 화살표가 가르키는 Click here to download를 클릭하여 다운로드를 받습니다. ..

  • format_list_bulleted 꾸미기
  • · 2016. 12. 9.
  • textsms
반응형