분류 전체보기 (20) 썸네일형 리스트형 [Js] 로그인 폼을 만들어보자. 간단한 로그인 폼을 만들기 전에 필요한 기능들에 대해서 먼저 정리해보자. 1. 폼 작성 필드 사용자의 정보를 입력받을 수 있는 폼 작성 필드를 구현한다. form 태그와 action 속성 2. 실시간 알림 사용자가 아이디나 비밀번호를 입력하면 실시간으로 정보를 확인하고 잘못된 입력사항을 공지해준다. 이벤트 헨들러 'iput' 기능 classList 기능 3. 정규식 사용자가 입력한 정보가 특정 기준에 부합하는지를 확인한다. 정규식 검사 test 기능 4. 조건문 사용자가 입력한 정보가 부합하다면 '통과', 부합하지 않는다면 '실패' 라는 기준을 세워야함. 조건문(if문 또는 switch문) 대충 필요한 기능들은 이정도. 그럼 먼저 HTML을 활용해서 뼈대부터 세워보자. 이메일을 입력하세요. 아이디를 이메.. [Js] if와 '?'를 사용한 조건문에 대해서 알아보자. 조건에 따라서 다른 처리결과를 보여주기 위해서 조건문(if)과 물음표를 사용한 ? 조건부 연산자를 사용합니다. if문 if(...)문은 괄호 안에 들어가는 조건을 평가해서 그 결과가 true이면 코드가 실행됩니다. let value = prompt('집에 가고 싶습니까?', 'yes or no') if(value == 'yes') alert('저도 그렇습니다.') 위 조건문에서는 하나의 간단한 조건만을 다뤘는데, 조건문은 조금 더 복잡할 수도 있습니다. 조건이 맞을 때 복수의 문을 실행하려면 중괄호를 사용해서 코드 블럭을 감싸주면 됩니다. let value = prompt('집에 가고 싶습니까?', 'yes or no') if(value == 'yes') { alert('저도 그렇습니다.') alert(.. [Js] 형변환에 대해서 알아보자. 형변환 문자형 변환 alert() 함수는 매개변수로 문자형을 받기 때문에 alert(value)에서 value는 문자형이어야 함 만약 다른 형의 값을 전달 받으면 이 값을 문자형으로 자동 변환됨 let value = true alert(typeof(value)); //boolean value = String(value) alert(typeof(value)) //string String() 함수를 사용하면 전달받은 값을 문자형으로 변활할 수 있음 숫자형 변환 수학과 관련된 함수와 표현식에서 자동으로 발생하며 주로 숫자형이 아닌 값에 나누기(/)를 적용한 경우가 대표적임 alert('6' / '2') // 3 // 문자형으로 입력된 두 수가 자동으로 숫자형으로 변환되어서 계산이 진행됨 let str = '1.. [Js] 대화상자에 대해서 알아보자. 대화상자란? 사용자와 상호작용할 수 있는 세 가지 함수 입니다. alert() 일방적인 메시지 모달창 prompt() 사용자에게 텍스트를 입력할 수 있는 입력필드 모달 창 confirm() 사용자의 의사를 확인하는 모달 창 모달 창이 떠있는 동안에 스크립트의 실행이 일시 중단되며 사용자가 창을 닫기 전까지 페이지의 다른 요소들과 상호작용이 불가능합니다. 또한, 이런 모달 창은 브라우저 중앙에 위치하는 것이 특징이며 스타일 적용하는 것이 불가능합니다. alert() alert() 함수는 메세지가 떠있는 작은 모달 창입니다. 모달이라는 단어는 '페이지의 나머지 부분과 상호작용이 불가능하다' 라는 의미가 내포되어 있기 때문에 사용자가 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 요소들을 조작할 수 없습니다.. [Js] 자료형에 대해서 알아보자. 자바스크립트에서 변수를 선언할 때 데이터 타입을 명시해주지 않아도 에러가 발생하지 않습니다. 또한, 변수에 저장되는 값의 자료형은 언제든지 바꿀 수 있습니다. 이는 자바스크립트가 동적 타입(dynamically typed)언어이기 때문입니다. let message = 'hello'; message = 123456; message라는 변수에 초기 문자형태의 자료형을 담았지만 다시 숫자형 자료를 대입해도 전혀 에러가 발생하지 않습니다. 자바스크립트에는 8가지의 자료형이 존재합니다. 이를 이해하는 것이 중요합니다. 문자형(String) 따옴표로 묶은 형태의 자료형입니다. 자바스크립트에서 따옴표는 세 가지 종류가 있습니다. let str = "문자형"; let str1 = '작은 따옴표도 가능합니다.'; let.. [Css] object-fit 속성에 대해서 알아보자. object-fit Css의 object-fit은 이미지와 비디오 요소의 크기와 관련된 속성입니다. 이 속성은 이미지나 비디오 요소의 '부모 크기'에 맞게 조정하고 요소의 가로세로 비율을 유지하면서 요소를 자르거나 확대/축소할 수 있습니다. object-fit이 가지고 있는 속성값들은 다음과 같습니다. 속성값 설명 fill 기본값, 이미지나 비디오 요소를 부모 요소에 맞게 꽉 채우면서 가로세로 비율은 유지하지 않기 때문에 오브젝트가 늘어나거나 찌그러집니다. contain 이미지나 비디오 요소를 부모 요소에 맞게 조정하면서 가로세로 비율을 고정된 상태로 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. cover 이미지나 비디오 요소를 부모 요소에 꽉 채우면서 가로세로 비율을 고정된 상태로 맞추기 때문에.. [Vue.js] Router(라우터) 기능에 대해서 알아보자. Vue.js 라우터란?? -vue.js 공식 라우터. -페이지간 전환을 스무스하고 쉽게 구현해주는 라이브러리. -페이지 이동 시 URL이 변경되면, 변경된 요소의 영역에 컨포넌트를 갱신함. -SPA(Single Page Application)의 특징으로 DOM을 새로 갱신하는 것이 아님. 폴더 구조 ├── router │ └── index.js ├── App.vue └── main.js 주요 기능 1. 라우트 정의와 컴포넌트 매핑 : routes 배열을 정의하여 각 URL에 맞는 컴포넌트를 매핑함. : path 속성으로 경로를, component 속성으로 매핑할 컴포넌트를 지정함. (이 두 속성 필수로 작성해애함.) import Vue from 'vue' import VueRouter from 'vue-.. [Vue.js] Router(라우터)에 대해서 알아보자. Vue Router란 Vue.js 애플리케이션에서 사용하는 공식 라우팅 라이브러리입니다. 이 라이브러리를 사용하면 SPA(Single Page Application)에서 페이지간 전환을 스무스하고 쉽게 구현할 수 있습니다. Vue Router는 라우트를 정의하고, 각 라우트에 맞는 컴포넌트를 매핑하며, 라우트 간 전환을 처리하는 라우팅 시스템을 제공합니다. 이를 통해 사용자가 애플리케이션에서 다른 페이지로 이동할 때마다 새로운 페이지를 로드하지 않고도 페이지간 전환을 새로고침 없이 부드럽게 처리할 수 있습니다. 예를들어 사용자가 /about이라는 페이지를 URL로 요청하면 /about 페이지를 보여주도록 컴포넌트를 '지정'하는 것을 라우트 정의라고 합니다. 이 라우터 정의 후 사용자의 URL 요청에 맞는.. 이전 1 2 3 다음
