본문 바로가기

분류 전체보기

 (385)
[자바스크립트]상단 고정된 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 변수에..
[CSS3] transition 속성 전환 transition 속성 전환 transition은 background, color, height, witch, transformation 등의 속성들에 애니메이션을 적용 하는것. transition : property duration timingfunction; property : 애니메이션 시킬 속성을 사용함. duration : 시작해서 끝날 때까지 시간을 초 단위로 지정함. timingfunction : 속도 변화를 기술하는데 큰 차이를 느끼기 어렵지만 다음 항목들이 있다. linear : 등속 cubic-bezier(0, 0, 1, 1)과 같음. ease : 느리게 시작했다가 빨라졌다 다시 느려짐. cubic-bezier(0.25, 0.1, 0.25, 1)과 같음 ease-in : 점점 빨라짐...
[CSS3] 2D Transform 2D Transform 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다. h1{ width:300px; height:300px; margin:20px; padding:20px; border:1px solid #dddddd; } .transformTest_translate{ background:#e8e8e8; transform : translate(500px, -360px); -moz-transform : translate(500px, -360px); -webkit-transform : translate(500px, -360px); -ms-transform : translate(500px, -360px); -o-transform : trans..
[CSS3] box-sizing:borderbox, content-box CSS .boxMenu{width:100%; padding:0;} .boxMenu::after{content:""; display:block; clear:both;} .boxMenu li{list-style-type: none; float:left; width:50%; text-align:center; padding:20px; background:#f8f8f8; border:10px solid #dddddd; } .bBox li{ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .cBox li{ box-sizing:content-box; -moz-box-sizing:content-box; -webkit-..
[CSS3] 컬럼 나누기 colume-count, column-gap, column-rule CSS .multipleColume{ background:#ffffe6; width:768px; height:768px; padding:20px; text-align: justify; column-count:3; /*박스의 내용을 3단으로 */ column-gap:40px;/*각 단의 간격 */ column-rule:2px dotted #000000; /* 단과 단사이에 구분선 */ } See the Pen CSS3 column example by daeyun (@daeyun) on CodePen.
[CSS3] Animation CSS p.test { animation:myfirst 5s infinite; -moz-animation:myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; -o-animation:myfirst 5s infinite; } @keyframes myfirst { 0% {background:#ffffff; width:150px; height:150px; } 25%{background:#ffff66; width:175px; height:175px; } 50%{background:#ffaa00; width:200px; height:200px; } 75%{background:#ff6600; width:225px; height:225px; } 100%{backg..

티스토리툴바