전체 글
freebiesbug : 무료 웹페이지 psd, figma 사이트
https://freebiesbug.com/psd-freebies/website-template/ Free PSD Website Design Templates - Freebiesbug A collection of free high quality website templates designed with Photoshop freebiesbug.com 무료 PSD 뿐만 아니라 Figma, 스케치까지 무료로 받을 수 있는 사이트! 요즘 퍼블리싱을 안하다보니 손가락이 녹슬고 있는 것 같아서 혼자서 페이지나 만들어볼까~ 하다가 발견한 사이트! Figma 같은 경우엔 하루에 3개까지 무료로 받을 수 있다. 확실히 Figma가 대세인것 같은 요즘.. Figma와 친해질 겸 다운을 받았다. 다운 받은 Figma파일을 체..
[자바스크립트] 제어 구문
제어 구문은 프로그램의 처리 흐름을 제어하는 문장이다. 제어 구문을 배우면 알고리즘에 담긴 논리를 표현할 수 있고 본격적으로 프로그램을 만날 수 있다. 문장은 위에서부터 아래 방향으로 작성한 순서대로 실행된다 => 순차적 실행 순차적 실행 흐름을 변화시키는 문장을 제어 구문이라고 한다. 분류 제어 구문 설명 조건문 if/else, switch, try/catch/finally 조건에 따라 처리를 분기 반복문 while, do/while, for, for/in, for/of 조건을 만족하면 처리를 반복 실행 점프문 break, continue, throw 프로그램의 다른 위치로 이동 조건문 조건문은 조건식의 값에 따라 실행 흐름을 분기한다. if / else '만약 ~ 이라면 ... 그렇지 않으면 ...'..
[자바스크립트] 객체
4장 객체와 배열, 함수의 기초 자바스크립트는 원시 타입을 제외한 나머지는 참조타입(객체 Object)이다. 배열, 객체, 함수가 대표적이다. Object의 데이터 자체는 별도의 메모리 공간(heap)에 저장되며, 변수에 할당 시 데이터에 대한 주소(힙 Heap 메모리의 주소값)가 저장되기 때문에 자바스크립트 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근하게 된다. 객체는 객체 리터럴과 생성자로 생성할 수 있다. 4.1 객체의 기초 ①객체 리터럴 객체는 데이터 여러 개를 하나로 모은 복합 데이터이다. 객체에 포함된 데이터 하나(key, value 쌍)를 가리켜 객체의 프로퍼티라고 부른다. 프로퍼티의 이름 부분을 프로퍼티 이름 또는 키라고 부른다. let card = { suit: "..
[VUE] 아코디언 만들기
아코디언 만들기전에 vue transition에 대해서 알아보자. transition 컴포넌트로 싸여진 엘리먼트가 삽입되거나 제거 될 때 일어난다. vue는 대상 엘리먼트에 css 트랜지션 또는 애니메이션이 적용되었는지 여부를 자동으로 감지한다. 그렇다면 css 트랜지션 클래스가 적정한 타이밍에 추가 / 제거된다. 트랜지션 컴포넌트가 JavaScript 훅을 제공하면 이러한 훅은 적절한 타이밍에 호출된다. css 트랜지션 / 애니메이션이 감지되지 않고 JavaScript 훅이 제공 되지 않으면 삽입 또는 제거를 위한 DOM 작업이 다음 프레임에서 즉시 실행된다. # 진입 / 진출 트랜지션에는 네가지 클래스가 적용된다. enter / enter-to / leave / leave-to ( class ) 0 ..
[SVG] svg 백그라운드로 사용하기
1. SVG 아이콘을 저장한다. https://heroicons.com/ Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. heroicons.com 2. SVG를 압축한다. (좌측 Paste markup에 붙여넣는다.) https://jakearchibald.github.io/svgomg/ SVGOMG - SVGO's Missing GUI jakearchibald.github.io 3. 백그라운드 이미지로 사용하려면 Data URI로 변경해야 한다. https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io 4. 색상 변경하기 위 코드에서 fill..