분류 전체보기 (484) 썸네일형 리스트형 드래그 앤 드랍 자바스크립트를 사용해서 드레그 앤 드랍 효과를 구현 해 보겠습니다. 구성하기 드래그하고자 하는 요소에 draggable="true" 속성을 추가합니다. 스타일을 통해 크기과 너비 등을 지정합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; border-radius: 50%; } img { object-fit: cover; object-positi.. 앵귤러 템플릿 - template expression (statement) template expression은 interpolation과 같은 문법을 사용하지만 가치를 템플릿에서 생성한다는 차이점이 있습니다. 주의할 점은 JavaScript의 일부 표현은 템플릿에서 사용이 불가한데요. 사용할 수 없는 표현들은 아래와 같습니다. 정의 (Assignments): =, +=, -=, ... Operators: new, typeof, or instanceof ( ; ) or ( , ) 를 사용한 연계표현 (Chaining expressions) 가감식: ( ++ )이나 ( -- ) 일부 ES2015+ operators bitwise operators: ( | ), ( & ), ... 또 statement (expressiont)에는 사용된 표현이 속하는 문맥 (context)이 존재.. 앵귤러 템플릿 - property binding HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 property binding은 이러한 HTML요소의 속성과 상응하는 DOM property를 동적으로 변화시키는 기능을 합니다. 사용방법 사용하는 방법은 템플릿에서 변화를 주고자 하는 속성을 아래와 같이 다양한데요 주로 꺽쇠를 사용하는 문법을 많이 사용합니다. 변수명을 사용할 경우 해당 TypeScript 클래스에서 반드시 사용된 변수명을 제공해 주어야 합니다. // property-binding.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-proper.. 앵귤러 템플릿 - interpolation imterpolation은 TypeScript에서 동적가치를 템플릿을 가져오거나 템플릿에서 생성하여 표시하게 해 주는 기능입니다. 사용방법 1. interpolation 구현하는 방법은 아래와 같이 이중 중괄호 ( {{ }} ) 안에 표시하고자 하는 값의 이름을 넣어 주면 됩니다. 변수명을 사용할 때 주의할 점은 .ts 클래스에 반드시 해당 변수명이 존재해야 한다는 것입니다. {{ interpolation }} // interpolation.component.ts import { Component } from '@angular/core'; @Component({ selector: 'interpolation-root', templateUrl: './interpolation.component.html', s.. 프로젝트 - 가위 바위 보 도마뱀 스폭 게임 가위, 바위, 보 업데이트 버전 게임이라고 합니다. index.html rock paper scissors and so on CSS @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: space-around; font-family: 'Poppins'; } .card { min-height: 400px; width: 450px; margin: auto; display: flex; flex-dire.. 프로젝트 - 계빨 게임 (Math Sprint) 가장 짧은 시간 안에 주어진 문제의 답이 맞는지 맞추는 게임입니다. math sprint 10 questions best score: '' 40 questions best score: '' 70 questions best score: '' 120 questions best score: '' 1 2 3 Go 1 1 1 1 YOUR TIME '' base time: '' penalty: '' start wrong correct try again CSS @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100.. 연산자 (Operators) 다른 언어와 마찬가지로 자바스크립트도 다양한 연산자를 가집니다. 연산자의 종류 수학연산자 (arithmetic operators) 1. 더하기 addition ( + ) const result = 2 + 3; 더하기 연산자의 경우 문자를 연결하는 기능 (concatenation)도 합니다. 주의할 점은 문자와 숫자를 연결할 경우 결과는 텍스트로 표시됩니다. const result = "one" + " " + "and" + " " + 2; 따라서 문자형태의 숫자와 일반 숫자를 +로 연결하면 연산된 결과가 아닌 결합된 문자의 형태로 반환됩니다. const result = "1" + 2; 2. 빼기 subtraction ( + ) const result = 2 - 3; 3. 곱하기 multiplication .. User Experience (UX) UX (User Experience)는 사용자가 제품을 접하면서 갖게 되는 느낌을 의미합니다. UX 디자인은 이러한 유저의 경험이 긍정적인 경험이 될 수 있도록 하는데 초점을 둡니다. 사용자와 인터페이스의 소통이 가장 중요한 웹디자인의 특성상 UX는 UI와 밀접한 관계를 가지고 때로는 혼용되어 사용되는데요. UX와 UI는 모두 쉽고 편리하게 사용할 수 있는 웹사이트를 사용자에게 제공하는 것을 목적으로 하는 점에서는 동일하나 UX는 사용자와 Interface의 관계에 초점을 두는 UI와 달리 보이지 않는 모든 부분까지 고려한다는 점에서 UI를 포함하는 개념입니다. 참고 What is User Experience (UX) Design? What is User Experience (UX) Design? Use.. 이전 1 ··· 51 52 53 54 55 56 57 ··· 61 다음
