본문 바로가기
반응형

분류 전체보기127

풀페이지 만들기 스크롤이 될 섹션들을 만들어줍니다. section1 section2 section3 section4 간단하게 스타일도 입혀줍니다. html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #wrap { position: fixed; width: 100%; height: 100%; background: gray; } #wrap .section { position: relative; width: 100%; height: 100%; } 스크롤 이벤트를 이용하여 만들고 트윈맥스로 애니메이션을 주었습니다. var sectionWrap = $('#wrap'); var section = $('.section'); var sectionLen = section... 2019. 9. 26.
농구게임 만들기 책을 보며 만든 농구게임입니다. 컴퓨터와 사용자가 번갈아 슛을 하고, 컴퓨터의 2,3점 슛은 랜덤으로 발생합니다. 2점슛이 들어갈 확률은 50%, 3점슛은 33% 으로 되어있습니다. 남은 슛 횟수 10 컴퓨터 0 사용자 0 컴퓨터부터 시작합니다. 컴퓨터 슛하기 사용자 2점 슛 3점 슛 var shotLeft = 10; var shotLeftNum = $('#shot_left'); var computerTurn = true; var txt = $('#txt'); var btnShootComputer = $('#shoot_computer'); var comSroreNum = $('#computer_score'); var comScore = 0; var btnShootUser2 = $('.btn_user2').. 2019. 9. 26.
스코프(Scope) 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의합니다. 스코프엔 두 가지 종류가 있는데요, 전역 스코프(global scope)와 지역 스코프(local scope)가 있습니다. 전역스코프(Global Scope) 변수가 함수 바깥이나 중괄호 {} 바깥에 선언되었다면, 전역 스코프에 정의된다고 합니다. 전역 변수를 선언하면, 여러분의 코드 모든 곳에서 해당 변수를 사용할 수 있습니다. 심지어 함수에서도 말이죠. const hello = 'Hello CSS-Tricks Reader!' function sayHello () { console.log(hello) } console.log(hello) // 'Hello CSS-Tricks Reader!' sayHello() // 'Hello CS.. 2019. 9. 26.
호이스팅(Hoisting) var 변수의 의도치 않은 현상 if(true){ var name = 'hj'; } console.log(name); //hj for(var i=0; i 2019. 9. 26.
아이폰 버튼 효과 HMTL + CSS3로 아이폰 버튼 효과를 만들었습니다. 동의 거부 .btn_wrap { padding: 50px; } .btn_wrap label { font-size: 30px; } .btn { display: inline-block; position: relative; background: #b2b2b2; border-radius: 30px; width: 100px; height: 50px; cursor: pointer; vertical-align: middle; transition: all 0.3s; } .btn:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 48px; height: 48px; bor.. 2019. 9. 26.
제이쿼리로 슬라이드 만들기 제이쿼리로 간단한 슬라이드를 만들었습니다. PREV NEXT * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } span { margin: 0 20px; font-size: 20px; } #slider { position: relative; width: 640px; height: 480px; overflow: hidden; } #slider li { display: none; position: absolute; left: 0; top: 0; } #slider img { display: block; } #slider li:first-child { display: block; } $('#next').click(function(){ s.. 2019. 9. 26.
반응형

티스토리툴바