HTML, CSS, javascript/이론 (22) 썸네일형 리스트형 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) 변수 선언 - 변.. 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.. 반응형 웹페이지를 스크린 상에서 반응된 결과로 보여주기 위해서 사용하며, pc사이즈뿐만 아니라 모바일 사이즈에서도 기기의 해상도에 반응하게 처리하기 위한 선결 조건은 '뷰포트' 추가이다. 뷰포트추가 - 모바일 해상도에 맞게 HTML 문서를 조절해 주는 속성들 width=device-width : 문서 너비를 현재 기기의 너비에 맞춘다. initial-scale=1 : 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정한다. 기본 개념 나(요소의 너비) ÷ 부모(콘텐츠를 감싸는 요소의 너비) × 100 = 가변 값 * 디자인된 시안에서 지정한 고정 값을 가변 값으로 변환하기 * - 요소의 너비를 %로 지정할 때 소수점 이하 숫자가 많다면 소수점 이하 3~4자리까지 표시하는 것이 좋다. 예) 요소 | 고정 그리.. flex 관련 이론 (3) align-self - 각각의 flex 아이템들의 교차 축 정렬 방식을 제어할 때 사용한다. flex-grow - flex 아이템이 기본 크기보다 커지게 할 때 사용하며, 컨테이너 내부에서 할당 받는 공간을 상대적으로 정의할 수 있다. - 2번째와 4번째 flex 아이템의 크기가 다른 flex 아이템에 비해 커졌으며, 4번째 아이템이 첫번째 보다 2배 큰것을 볼 수 있다. - 컨테이너의 크기가 작아지게되면 작동하지 않는다. flex-shrink - flex-grow 속성과 반대로 작아지게 할 때 사용한다. - 컨테이너의 너비가 좁을때 작동하며, 넓어지게되면 작동하지 않는다. flex-basis - flex 아이템의 초기 크기를 결정한다. 단위가 있는 값을 넣어야 한다.( 예 : px, %) order -.. flex 관련 이론 (2) 메인 축 정렬 - 메인 축 정렬 속성은 justify-content로 할 수 있으며 기본 속성은 flex-start이다. - flex-start : 메인 축 시작점을 기준으로 정렬 flex-end : 메인 축 끝을 기준으로 정렬 center : 메인 축 중앙 정렬 space-between : 좌우는 축의 시작과 끝에 배치하고 나머지를 여백을 주며 정렬 space-around : 각 요소의 좌우에 같은 여백을 주며 정렬 space-evenly : 모든 요소에 같은 여백을 주며 정렬 교차 축 정렬 - 교차 축 정렬 속성은 align-items로 할 수 있으며 기본 속성은 flex-start이다. - flex-start : 교차 축 시작 점을 기준으로 정렬 flex-end : 교차 축 끝을 기준으로 정렬 ce.. 이전 1 2 3 다음 목록 더보기
