HTML, CSS, javascript (36) 썸네일형 리스트형 javascript - 기초 (3) 함수(Function) - 자바스크립트에서의 함수는 변수에 할당 할수 있으며 인자로 함수를 전달하거나 콜백함수를 구현하는 형태 등 다양하게 함수를 활용할 수 있다. 함수선언 - function 키워드로 선언하며 인자를 가질 수 있다. - 인자의 매개변수도 타입없이 갯수에 따라 변수명을 나열하고, 함수안에 또다른 함수를 정의할 수 있다. var count = 0; myFnc(); function myFnc() { count++; } document.write(count + " "); 선언적 함수 - 부를 이름을 정하고 명령이 필요할 때 이름을 불러 사용한다. var fColor = ["red", "blue", "green", "orange"] var j=0; function fontColor() { j++.. javascript - 기초 (2) 연산자와 제어문 1) 연산자 비교 연산자 - 비교연산자의 결과는 기본적으로 true/false 입니다. > 크다 == 값이 같다 (타입 상관 없음) = 크거나 같다 != 같지 않다 b ? "javascript" : "Hello"; // 조건식 ? 참 출력 내용 : 거짓 출력 내용 document.write(result); // a가 b보다 크므로 javascript가 출력 논리 연산자 && AND 연산자 || OR 연산자 ! NOT 연산자 2) 조건문 if, else if - 조건이 참인 경우 수행하며 else 와 결합해 조건 범위나 조건을 세분화하는 것이 가능하다. var price = Number(prompt("구매 금액은 얼마입니까?")); if (price < 20000) { document.wr.. javascript - 기초 (1) 변수 자바스크립트는 자료형이 고정되어 있지 않은 동적타입 언어이기 때문에 변수를 선언할때 별도의 자료형을 명시하지 않아도 된다. 1) 자료형 내부적으로는 Primitive(기본형)과 Object(객체형)이 있으며 각각 다음과 같습니다. Primitive - Boolean: true, false - null: 빈 값 - undefined: 변수에 값이 할당되지 않았을 때 나타남. - Number: 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자가 아님)등. - String: 문자열 Object - Reference 타입 - 클래스 뿐만 아니라, 배열과 함수, 사용자 정의 클래스도 모두 Object. - JSON(Java Script Object Notation)의 기본 구조. 1) 변수 선언 - 변.. 반응형 웹페이지 실습 - 모바일 우선 - min-width를 이용하여 모바일 우선 웹페이지를 만들어 보았다. - Animal 영역에서 그림을 선택하면 영상이나 이미지가 나올 수 있게 fancybox jquery를 사용했다. - 이미지는 픽사베이의 무료이미지이며 fancybox에 있는 영상은 유튜브 영상이다. nicescroll 실습 nicescroll Jquery 를 이용해 스크롤 시 오른쪽으로 화면이 이동하는 횡 웹페이지를 구현했다. - 5페이지로 간단하게 구현했고, 좌측의 메뉴를 누르면 각 페이지로 이동한다. - 3번째 화면에서는 bxslider를 이용해 이미지가 슬라이드 되며, 4번째 화면의 우측 하단의 보트 이미지에 애니메이션을 넣어 이동하게 만들었다. - 이미지 파일들은 픽사베이의 무료이미지이며 4번째 페이지의 유튜브는 출처를 표시했다. ScrollTop - 페이지의 위치를 인식하여 어떠한 동작을 하게 하기 위해 사용한다. (1) 예시 - sctop라는 변수가 500이 넘으면 ani클래스에 on이라는 클래스를 추가하고 아니면 제거한다는 스크립트를 작성했다. - 위 코드를 입력해서 스크롤을 내리다가 어느 지점이 되면 ani라는 클래스가 5초동안 30배 확대된다. (2) 예제 - (1)의 조건과 동일한 스크립트를 작성했고, 위 코드를 실행하면 일정 위치가 되면 이미지들이 opacity가 0에서 1로 각각에 걸려있는 transition에 맞게 바뀐다. (3) AOS(Animate On Scroll Library) 사용 - 더욱 편리하게 사용하는 방법이다. (출처 : https://github.com/michalsnik/aos / https://michalsni.. side-menu - SideMenu 실습은 checkbox로 하는 방법과 script를 사용해서 하는 2가지 방법을 했다. (1) - checkbox가 체크 되면 사이드 메뉴가 나오고 체크가 해제되면 사이드 메뉴가 사라지는 방식이다. 이때, 메뉴 아이콘을 span 태그 3개로 만들어서 checkbox가 체크 되면 span 태그가 x 처럼 보이게 만들고 체크가 해제되면 다시 메뉴로 보이게 하기 위해서 transform 속성과 opacity 속성을 이용했다. (2) - script를 이용한 방식에서 메뉴 아이콘은 font-awesome에서 가져와 사용했다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set jus.. gnb 실습 웹페이지에서 메뉴 부분에 hover 하게되면 아래쪽에 소메뉴들이 나오게 하는 방법에 대한 실습이다. (1) - 소메뉴의 ul 부분이 display:none이었다가 대메뉴의 li 부분에 hover를 하게되면 display:block으로 해서 보이게 했고, 소메뉴는 position:absolute이기 때문에 아래쪽 내용부분의 크기에 간섭하지 않고 위에 표시되게 된다. (2) - nav 태그의 height가 40px이었다가 hover하게 되면 200px로 늘어나고, overflow:hidden이기 때문에 40px을 넘는 내용에 대해서는 보이지 않다가 나타나는 방법이다. - nav 태그에 position:absolute 속성을 주어 위로 올리게 되면 contents 영역을 침범하지 않고 메뉴가 열리고 닫히게 된다. 이전 1 2 3 4 5 다음
