전체 글
-
제이쿼리 애니메이션 UIJAVASCRIPT 2022. 2. 9. 13:05
제이쿼리에선 animate라는 함수가 있다. $('.box').animate({ marginLeft : '100px', marginTop : '90px' }, 1000); 이런 식으로, 셀렉터에 .animate({ })를 붙이는 게 기본 형태이고 { }는 object자료형이라고 하는데 이 자료형 안에서 애니메이션에 줄 속성을 ,(콤마)로 나열하면 된다. 이때 우측엔 문자 형태로 '100px' 이렇게 준다. 그리고 뒤에 1000은 1초를 뜻하며 ms단위이다. animate 함수를 이용해 간단한 애니메이션을 만들어보자 Menu Title 버튼 이렇게 옆에서 나올 메뉴바와 버튼을 만들어 준 후, .left-menu { width : 150px; height : 100%; background : black; c..
-
var / let / const 변수 (사칙연산)JAVASCRIPT 2022. 2. 8. 13:45
변수라는 어떤 자료를 저장하기 위한 문법이 있다. 사용법부터 알아보자. var 이름 = "지우"; var 나이 = 27; 이처럼 var 변수의 이름 = "담을 값" 이렇게 사용한다. 여기서 변수의 이름을 만드는 건 선언 이름에 값을 넣는 건 할당이라고 한다. 변수는 이렇게 긴 문자를 담아 놓거나 심지어 셀렉터로 찾은 요소도 저장할 수 있다. var 안내창 = document.getElementById('alert'); var 안내창 = $('#alert'); 이렇게 셀렉터를 담으면 직관적이며 자바스크립트의 동작속도가 빨라진다.(DOM탐색을 한번만 해도 되므로) 변수에는 3가지가 있다. var -- 재선언가능 / 재할당가능 / 범위는 함수 내 (함수 밖에서 만들면 함수 안에서 사용가능) let -- 재선언..
-
if/else 조건문과 and/or 사용JAVASCRIPT 2022. 2. 7. 19:57
특정 조건을 충족시켰을 때만 코드를 실행할 때 if/else문을 사용한다. if ( 1 > 3 ) { console.log('안녕') } else if ( 1 < 2 ) { console.log('반가워') } else { console.log('잘가') } if문의 기본 형태는 위와 같다. if 에 조건을 써서 비교해주고 틀리다면 else if의 조건 틀리다면 외에 나머지 else를 실행하게 된다. if문은 위에서부터 조건을 읽으며 맞는 하나의 식만 출력한다. 그리고 조건을 두개 세개 비교하고 싶을 땐 and 와 or을 사용하면 되는데, and는 && 기호를 사용하며 모두가 true일 때 true로 만들고, or은 ||기호를 사용하며 하나만 true여도 true로 만든다. if문을 자주 사용하는 예시가..
-
jQueryJAVASCRIPT 2022. 2. 7. 19:33
제이쿼리는 기본적으로 자바스크립트와 비슷하다. 하지만 자바스크립트를 좀 더 간편하게 사용할 수 있게 한다. 예를 들면, //자바스크립트 document.getElementById('title').innerHTML = '바보'; //제이쿼리 $('#title').html('바보'); 이렇게 절반정도로 짧게 줄일 수 있다. 제이쿼리에선 셀렉터로 $('무언가')를 사용한다. 클래스는 $('.클래스이름')으로 아이디는 $('#아이디이름')으로 쓴다. 그리고 메소드는 html의 무언가를 바꿀 땐 html('바꿀내용') css의 무언가를 바꿀 땐 css('속성', '값')으로 쓴다. 클래스를 추가하거나 삭제할 땐 addClass, removeClass를 사용할 수 있다. 많은 메소드가 있으므로 찾아서 사용하면 된다..
-
자바스크립트의 functionJAVASCRIPT 2022. 2. 7. 18:01
자바스크립도 함수를 사용할 수 있다. function 함수이름() { document.getElementById('아무거나').style.display = "block" } 이런 식으로, 함수 이름과 내용물을 적어준 후 사용할 때 함수이름() 이렇게 사용하면 된다. 함수에는 변수라고 구멍을 뚫을 수 있다. 변수를 이용하면 재사용률이 올라간다. 예를 들면, 앞에 버튼 열기 닫기와 연결해보면, function 열기닫기함수(변수) { document.getElementById('아무거나').style.display = 변수; } 이런 식으로 변수를 집어넣고, 버튼 하면 닫기이고, 버튼 하면 열기가 된다. 이렇게 함수를 잘 이용하면 긴 코드도 줄여서 여러번 재사용할 수 있다. 변수는 2개 이상 사용할 수 있다...
-
onclick속성과 addEventListener속성JAVASCRIPT 2022. 2. 7. 13:03
UI를 만드는 기본적인 법칙은 1. html css 로 미리 UI디자인을 해놓기 2. UI를 평소엔 안보이게 숨겨놓기 (display: none 또는 visibility: hidden을 많이 준다) 3. 버튼을 누르거나 어떤 행동을 하면 UI를 보여준다 이런 식으로 만든다. onclick은 버튼을 누를 때 어떤 어떤 행동을 하게끔 도와주는 속성이다. 누르면 뭐가 바뀜 이런 식으로 사용하며 onclick="" 안에는 javascript을 이용해서 코드를 작성한다. 누르면 뭐가 바뀜 이렇게 onclick함수 내부에 작성할 수 있다. display를 block으로 바꾸면서 원래 none이여서 안보이던 UI가 버튼을 누르면 보이게 되는 원리이다. 자바스크립트로 개발해서 HTML에 onclick으로 심어넣기는 옛..
-
자바스크립트의 셀렉터JAVASCRIPT 2022. 2. 7. 12:54
자바스크립트는 HTML요소를 변경하기 위해서 사용한다. 회사 가고 싶다 을 집에 가고 싶다 라고 변경하기 위해선 해당 h3셀렉터에 id (클래스, 태그도 가능하지만 어느 하나를 특정하기 위해선 id가 적합하다)를 부여하고 자바스크립트로 코드를 document.getElementById('home').innerHTML = '집에 가고 싶다'; 이런 식으로, 바꿀 수 있다. 해석해보면, document는 웹문서에서 getElementById는 id가 home인 아이를 찾아서 innerHTML은 HTML에 대입하라 이다. 스타일을 바꾸고 싶다면 document.getElementById('home').style.fontSize = * 이런 식으로 style을 뒤에 붙여서 사용하면 된다. 셀렉터 (getElem..
-
돌아가는 프로필 사진HTML,CSS 2022. 1. 26. 20:48
이런 식으로 돌아가는 프로필 사진을 만들 수 있다. 먼저, .flip-outer { width: 300px; height: 300px; } .flip-inner { width: 100%; height: 100%; position: relative; } 이렇게 외곽을 잡아준다. .flip-outer은 프로필 사진의 크기를 지정해주고 .flip-inner은 안에 들어있는 내용물에 position을 쓰기 위해 position: relative; 속성을 써준다. 그런 다음, 앞면과 뒷면을 만들어준다. 개발자 망나뇽 .front에는 사진 .back에는 프로필 텍스트를 써주고 각각 공중에 떠 있으므로 position: absolute;를 주고 뒷면은 transform: rotateY(180deg);로 돌려서 뒷면처..