그럼에도 불구하고

이벤트 리스너를 1회만 실행하는 법과 삭제하는 법에 대해 알아보자 [ 이벤트 리스너 1회 실행하기 ] addEventListener()의 세 번째 인수에 옵션을 지정할 수 있다. 반드시 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다. 세 번째 인수로 지정할 수 있는 옵션은 다음과 같다. 옵션 의미 타입 capture 이벤트 캡쳐 여부 진릿값 once 리스너 1회 실행 여부 진릿값 passive 패시브 이벤트 여부 진릿값 다음 예제를 보자 버튼 버튼을 눌렀을 때 이벤트는 한 번만 발생하고 그 이후로는 발생하지 않는다. [ 이벤트 리스너 삭제하기 ] removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다. 버튼 페이지가 실행되고 3초까..

mixin, extend, 모듈화(import/use)에 대해 알아보자 [ @ 문법 ] Sass는 작업을 편하게 해 줄 @으로 시작하는 At-Rules라는 문법이 있다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있다. (@font-face 또는 @counter-style, @media 등) Sass에서는 여기에 더해 추가적인 기능들을 제공하는 at-rules 들이 추가된다. 예를 들면 @mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있다. @extend : 여러 선택자가 스타일을 상속받도록 할 수 있다. @import / @use : 다른 스타일시트에 있는 변수, 함수, 믹스인 등을 불러와 결합해서 쓸 수 있다. @function : SassScript에서 사용할 수 ..

Sass의 기본 문법을 익혀보자 [ 중첩 ] 우리가 사용하는 CSS는 ( Cascading Style Sheet )로 가장 큰 특징은 "Cascading" 위에서 아래로 흐르는 특징을 갖고 있다. 그래서 CSS는 .grand-parent > .parent > .child와 같이 부모에서 자식 순서로 작성한다. 아래의 예시를 보자 .container-grand-parent { color: red; } .container-grand-parent .container-parent { color : orange; } .container-grand-parent .container-parent .container-child { color : yellow; } 부모에서 자식으로 내려가면서 CSS를 적용하고 있지만, 길..

Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만, 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance CSS와 비교하여 Sass는 아래와 ..

딥링킹에 대해 알아보자 [ 딥링킹 (Deep linking) ] 딥링킹이란 URL 링크의 일종으로 사용자를 웹사이트나 스토어가 아닌 앱으로 직접 안내하는 것을 말한다. 딥링크는 사용자가 특정 페이지로 이동하는 시간과 노력을 줄여주어 사용자 경험을 크게 향상해 준다. 딥링크는 커스텀 URL 스킴(iOS Universal Link)이나 Intent URL(Android 기기)을 사용하여 설치된 앱을 시작한다. 또한 딥링크를 통해 특정 이벤트나 페이지로 사용자를 보내어 캠페인 효과를 높일 수 있다. [ 딥링크가 중요한 이유 ] 딥링크를 통해 원활한 사용자 여정을 구축하여 이탈율을 낮추고 앱의 설치를 증가시킬 수 있다. 또한, 고도화된 캠페인을 진행하면서 뛰어난 사용자 경험을 제공하고 한 번의 클릭으로 앱으로 ..

flexbox flexbox에서 제일 중요한 것은 flex-direction이다. flex-direction이란 flex 속성을 부여했을 때 기준점을 잡는 것을 말한다. 기본값은 row로 되어있다. 여기서 중요한 점은 flex-direction이 row일때 main-axis이 가로 축이며, cross-axis는 세로 축이라는 것이다. flex-direction이 column이면 main-axis는 세로축이며, cross-axis는 가로축이다. ※ flex-direction : row (기본값) main-axis : 가로 cross-axis : 세로 ※ flex-direction : column main-axis : 세로 cross-axis : 가로 이 부분을 확실하게 알고나니 내가 자주하던 실수가 왜 일..

아날로그 시계를 만들어보자 조건: 1. Date 함수를 이용한다. 2. Date 함수를 통해 각도를 구해서 사용한다. HTML 더보기 CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgba(15, 14, 14, 0.889); } .container { width: 600px; height: 500px; background-color: rgba(28, 27, 27, 0.829); border-radius: 60px; margin: 25vh auto; } .clock { width: 400px; height: 400px; border-radius: 50%; background-color: rgba(37, 36..

mousemove 이벤트로 색 변환을 해보자 조건 1. 마우스를 움직일 때마다 화면의 색이 바뀜 2. 왼쪽, 오른쪽 여부 상관없이 바뀜 3. 화면의 색은 Math.random() 메서드 사용 box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 box18 box19 box20 HTML 삽입 미리보기할 수 없는 소스 ※ 화면 크기 및 확대, 축소 비율에 따라 event.pageX의 범위가 다르기 때문에 const num =parseInt(event.pageX / ? ); ? 는 개별 지정 필요

FileReader 객체 사용하여 image 올려보자 ref: [JavaScript] FileReader 객체에 대해 알아보자 FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, e despiteallthat.tistory.com 조건 1. 파일을 올릴 수 있는 버튼을 누르면 파일을 올린다. 2. 올릴 파일은 image로 제한한다. 3. 파일은 한 개만 올릴 수도 있고 다수도 가능하다. (여기서는 4개) 4. 각 파일마다 파일명, 사이즈, 파일타입을 알려준다. CSS 더보기 * { marg..

FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장한다. 개발자는 result 속성을 통해 데이터에 접근할 수 있다. [ 비동기 동작 ] JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작한다. 비동기로 동작하면 H..

input type="file"에 대해 알아보자 code 이미지 미리보기 1. type을 file로 할 경우 파일을 선택할 수 있는 버튼이 생기고 원하는 파일을 넣을 수 있다. ( 단, 다중 선택 불가 ) 파일을 선택해서 넣으면 파일 이름을 보여준다. 2. type을 file로 하고 mutiple 속성을 지정하면 한 번에 여러 파일을 선택해서 넣을 수 있다. 3. accept 속성을 지정하면 내가 지정한 파일 형식만 올릴 수 있다. 위와 같이 "image/*"라고 지정하면 이미지 파일만 업로드 가능하고, 파일 형식은 상관없다는 뜻이다. 이렇게 파일 형식이 자동으로 지정되어 있다. 하지만 모든 파일로 바꾸면 accept 속성을 지정해도 올라간다는 단점이 있다. 4. accept 속성은 image뿐만 아니라..

배열을 섞을 수 있는 메서드를 만들어보자. 1. 기존 배열 값은 바꾸지 않는다. (복사해서 사용) 2. 메서드를 실행할 때마다 무작위로 섞인다. [ array [ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 피셔 예이츠(Fisher Yates) 알고리즘을 사용하며, 재사용할 수 있도록 처리 작업을 함수로 만든다. ※ 피셔 예이츠 알고리즘 [ array[ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 예를 들어, 5개의 요소 [0, 1, 2, 3, 4]를 가지는 배열을 생각해보자. for문 i에 4, 3, 2, 1, 0 을 대입했을 때 Math*random()은 0 이상..