본문 바로가기

분류 전체보기

 (370)
[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 변수에..
[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.

티스토리툴바