Front-end
-
[JS] 반복문 알아보기Front-end/Javascript 2020. 11. 29. 22:20
반복문 반복문은 일정한 처리를 한 다음 원래 위치로 돌아가 똑같은 처리를 반복하는 처리를 표현합니다. while 문 while 문은 조건만 맞다면 일정한 처리를 계속 반복해서 실행합니다. while (조건식) { // do something... // break, continue 사용 가능 } while문을 실행하면 가장 먼저 조건식을 평가하고 true면 while 문 블럭을, false면 블럭을 벗어납니다. 반복문에서도 break와 continue를 사용할 수 있습니다. break 문 사용시 : while 문에서 빠져나옴 continue 문 사용시 : while 문의 시작부분으로 돌아감 예제를 통해 알아보겠습니다. function fact(n) { var k = 1; var i = 1; while (i..
-
[JS] 조건문 알아보기Front-end/Javascript 2020. 11. 29. 22:17
조건문 조건문은 조건식의 값에 따라 실행 흐름을 분기합니다. if / else 문 if / else는 만약 ...라면, 그렇지 않으면... 방식의 처리를 담당합니다. if (조건식) { // 조건식이 true 일 때 실행 } else { // 조건식이 false 일 때 실행 } 괄호 안에는 만약에 대한 조건식이 포함되며, true일 경우 윗 블록이 실행되며 false일 경우 아랫 블록이 실행됩니다. var count = 10; if (count > 0) { console.log(`count는 0보다 이상`); } else { console.log(`count는 0보다 이하`); } count가 0보다 크다면 이상이, 0보다 작다면 이하가 나올 것입니다. if / else if / else 문 else i..
-
[JS] 이벤트 알아보기Front-end/Javascript 2020. 11. 29. 22:15
이벤트 이벤트를 통해 화면에서 일어나는 일들에 대한 동작이나 사건들을 수행하고 처리합니다. 웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램으로서 미리 등록해준 작업을 이벤트가 발생할 때 수행하는 것입니다. 이렇게 등록해준 이벤트를 이벤트 처리기라고 하며 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 처리기를 등록하는 방법은 총 3가지로서 하나씩 살펴보겠습니다. HTML 요소의 속성으로 등록하는 방법 DOM 요소의 프로퍼티로 등록하는 방법 addEventListener 메서드를 등록하는 방법 HTML 요소의 속성에 이벤트 처리기 등록 이 부분에서 onclick이라는 부분이 이벤트이며 그 이벤트는 개발자가 정한 이벤트 처리기 이름이라고 합니다. 예제로는 onclick이라는 이벤트를 ..
-
[JS] 연산자 알아보기Front-end/Javascript 2020. 11. 29. 22:12
연산자 데이터 처리를 하는데에 있어 연산자는 매우 중요한 역할을 합니다. 특히 문자열 처리하는 부분은 대부분의 프로그램에서 꼭 필요하니 잘 이해해야 합니다. 문자열 제어 연산자 + 연산자를 사용하여 문자열을 합칩니다. 모두 문자열일 때 "kim" + "junhyoung"; // "kimjunhyoung" "19" + "93"; // "1993" 문자열로 연결합니다. 하나만 문자열일 때 19 + "93"; // "1993"; 10 + {}; // "10[Object object]" 다른 피연산자의 타입을 문자열로 바꾼 후에 연결합니다. String 객체 메서드 문자열을 처리하기 위한 객체로써 문자열을 생성하기 위해 String 생성자를 사용하여 생성합니다. var hello = new String("안녕"..
-
[JS] 함수 알아보기Front-end/Javascript 2020. 11. 29. 22:06
함수 함수는 자바스크립트 프로그래밍의 꽃이라고 볼 수 있으며, 그만큼 중요하고 활용성이 뛰어나다고 할 수 있습니다. 기초부터 차근차근 알아보도록 하겠습니다. 함수 선언문 function plus(x, y) { return x + y; } 이 함수는 x, y의 인자값을 가지고 있으며 가져온 인자값을 + 연산자를 통해 return을 통해 반환하는 함수입니다. 여기서 주의할 부분은 return문은 절대 줄 바꿈 문자를 넣으면 안됩니다. 만약 줄 바꿈을 넣게 되면... function plus(x, y) { return; x + y; } 위처럼 값이 없이 반환이 되기 때문입니다. 함수명 위에서 든 예시는 plus라는 함수명을 가지고 있습니다. 지금은 하나의 함수만 있어서 바로 구별이 가능하지만 몇십, 백개의 함..
-
[JS] 객체 알아보기Front-end/Javascript 2020. 11. 29. 21:56
객체 자바스크립트에서는 원시 타입을 제외한 모든 값이 객체입니다. JSON이라고도 하며 자바스크립트의 가장 중요한 데이터타입이라고 볼 수 있습니다. 객체를 생성하는 방법에는 총 2가지의 방법이 있습니다. 리터럴 방식 생성자 방식 리터럴 방식 리터럴 방식은 변수 내에 {...}을 사용하여 key와 value값을 선언하여 하나 이상의 프로퍼티를 만드는 방식입니다. var artist = { singer: "서태지", music: "Live Wire" }; artist 변수 안에 key로 singer, music을 주었고 value는 "서태지", "Live Wire"를 주었습니다. 여기서 key는 문자열로 선언할 수도 있습니다. key와 value는 콜론(:), {} 안의 프로퍼티는 쉼표(,)로 구분합니다. ..
-
[JS] 변수 알아보기Front-end/Javascript 2020. 11. 29. 21:41
변수 변수는 프로그램을 작성하는데 가장 중요한 요소입니다. 자바스크립트에서는 타입이 없는 변수를 var, let, const라는 선언자를 사용하여 선언하고, 이후 변수명을 입력해 최종적으로 변수를 선언하게 됩니다. 변수 선언 var age; // 1개의 변수 선언 var egg, lemon; // 2개 이상의 변수 선언 console.log(age); // undefined -> 변수를 선언하기만 하면 변수 값이 없다는 뜻인 undefined를 뱉어냅니다. age = 28; // = 연산자를 통해 age 변수에 28을 넣어줍니다. console.log(age); // 28 출력 var name = "junjang"; // 변수 선언과 함께 변수 값을 할당합니다. console.log(name); // j..
-
CSS scroll-snap 속성을 이용하여 스와이퍼 구현하기Front-end/CSS 2020. 11. 13. 01:18
scroll-snap scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성입니다. 예를들면 에어비앤비 모바일 환경의 숙소 사진을 볼 때 스와이퍼 형태가 바로 이런 방식인데요, 볼 때는 많은 기능들이 들어간 것 같지만 scroll-snap을 사용하면 쉽게 구현할 수 있습니다. 위의 기능을 똑같이 구현해보면서 사용법을 익혀보겠습니다. 예제는 iPhoneX를 기준으로 구현하였습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏 코드 전체 보기 index.html 슬라이더를 전체를 감싸는 컨테이너 하나, 그리고 이미지들을 감싸는 슬라이더, 그리고 이미지를 감싸..