본문 바로가기

javascript

(78)
[jQuery] 메뉴 요약 정보 표시하기 메뉴에 마우스 오버시, 간략한 정보를 표시하는 툴팁tooltip같은 것을 적용해보도록 하겠습니다. ,h3>jQuery $(document).ready(function(){ // hide span element $('.w').hide(); $('.m').hide(); $('.s').hide(); // show class name 'w' $('#w').hover(function(event){ $('.w').show(); $('.m').hide(); $('.s').hide(); $('#w').addClass('hover'); }, function(){ $('#w').removeClass('hover'); }); //show class name'm' $('#m').hover(function(event){ $('..
[jQuery] 메뉴 항목에 Hover 효과 추가하기 HTML 파일에는 "강아지"라는 리스트로, 순서가 없는 엘리먼트를 작성합니다. 강아지의 종류로 웰시코기, 말라뮤트, 시바 3가지 항목을 추가했습니다. HTML 코드는 아래 codepen을 확인해주세요. 순서없는 리스트가 메뉴모양을 갖추도록 간단하고 심플하게 스타일을 적용했습니다. 스타일시트에 타입 선택자를 작성해서 세 엘리먼트에 자동 적용되도록 합니다. 아래와 같이 CSS를 작성합니다. css div{width:200px; box-sizing:border-box;} ul{list-style:none; box-sizing:border-box; margin:0; padding:0; background:#eeeeee; } ul > li {width:100%; padding:0.8em; box-sizing:bo..
[jQuery] ul 메뉴를 브랜드크럼 메뉴( breadcrumb ) 스타일로 표현하기. 브랜드크럼 메뉴 breadcrumb 현재의 위치를 홈 > 서비스 > 서비스 상세 같이 표시하는 것을 브랜드크럼이라고 부릅니다. 빵조각이라는 뜻으로 '헨젤과 그레텔'이야기에서 빵조각으로 돌아갈 길을 표시한다는 의미에서 유래되었습니다. CSS .listStyle{padding:20px; display:inline;} .listStyle::before {padding-right:15px; content:">"; font-size:0.75em; color:#266FEF; } .ulListStyle {list-style: none; display:inline; margin:0; padding:0;} jQuery $(document).ready(function(){ $('ul').addClass('ulListSty..
[자바스크립트]상단 고정된 sticky 메뉴 응용 (function() { 'use strict'; var contents = document.querySelector(".contents"); var h = document.querySelector("header"); var H_height ; function seTopPadding(){ H_height = h.offsetHeight; contents.style.paddingTop = H_height + "px"; } function onScroll(){ window.addEventListener("scroll", callbackFnc); function callbackFnc(){ var y = window.pageYOffset; if(y > 500){ h.classList.add("scroll"); }..
[jQuery] scroll to top 스크롤 탑 버튼 만들기 $(document).ready(function(){ // hide #toTop first $("#toTop").hide(); // fade in #toTop $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); // scroll body to 0px on click $('#toTop a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); See the Pen scroll to top butto..
[javascript] 변수 및 데이터형 알아보기 변수란? "값을 저장하는 상자" 라고 생각하면 됩니다. 변수에는 한번에 1개의 데이터 값만 저장할 수 있습니다. 새로운 데이터가 입력되면 기존의 값은 삭제됩니다. 변수명 작성시 주의사항 1. 대-소문자 구분 : 변수명을 소문자로 만들고 출력할 때 대문자로 입력하면 '정의되지 않은 변수'라고 오류 발생. var num = 100; document.write(NUM); // 대,소문자 구분으로 인한 오류가 발생합니다. 2. 변수명 맨 앞에는 영문, _, $ 등만 가능 var number = 2; //OK var _numberis = 4; //OK var $num = 10; //OK var 3num = 0; // NO 3.변수명에는 영문, $, _, 숫자만 포함 가능 var the% = 100 ; NO 변수에..