전체보기 (92) 썸네일형 리스트형 [Pixi.js] Vue3를 곁들인 PixiJS설치법 npm install pixi.js CDN 설치는 내가 별로 안좋아하니까 npm으로 설치함 import * as PIXI from 'pixi.js'; 사용할 파일에 import해서 쓰면 됨 예를 들어서 코드를 이렇게 짜면 이런식으로 화면이 나오게 된다. 오늘은 여기까지. [Routing] Vue-Router 없이 라우팅하기 화면이 좌/우로 트랜지션(?)되는 라우터를 만들어보자. App.vue 각 컴포넌트의 표시 여부를 관리하는 showComponent2, showComponent3, showComponent4 변수를 선언했다. 전환 효과를 위한 transitionName 변수를 선언했다. 초기 화면에는 Component1만 보이게 하고 Component1에서 이벤트를 발생시키면, Component2가 나타나고, Component1은 사라진다. Component2에서 이벤트를 발생시키면, Component3 또는 Component4가 나타나고, Component2는 사라진다. Component3에서 이벤트를 발생시키면, Component2가 다시 나타나고, Component3은 사라진다. Component4에서 이벤트를 발생.. [230420] 살아가기 '앞을 보지만 뒤를 생각한다' 대학교 선배의 상태메시지였다. 이십대 초반, 국문학도였던 나는 문장에 반했다. 고난이 있을 때마다 문장을 떠올리며 나 자신에게 위로를 건냈다. 나중에야 알았지만 어느 판타지 소설의 내용이었다. 2023년은 상급종합병원 행정직. 고연봉을 포기하고 내가 하고 싶은 일을 시작하게 된 해이다. 올해까지 장기렌트중인 승용차의 인수금을 마련해야한다. 전세계약이 만료되는 해이기도 하다. 그래서 새해 목표는 '앞을 보고 뒤를 생각하면서 잘 버텨보자'였다. 쉽지가 않다. 며칠 전, 일 중에 그날따라 새삼스럽게 전화가 왔다. 가족 중 누군가에게 큰 일이 생겼다는 내용이었다. 속이 쓰렸다. 내가 할 수 있는 건 아무 것도 없었다. 그럼에도 힘들어할 우리 가족들이 걱정돼서 그 다음날에는 본가 근.. [CSS] linear-gradient 예제와 함께 알아보자 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다. 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있다. 즉, background-color 또는 color 와 같은 속성에는 사용할 수 없다. 사용법 linear-gradient() 함수 사용법은 다음과 같다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달한다. 이는 선택사항이나, 지정하지 않을 경우 'to bottom'이 기본값으로 적용된.. [CSS] 애니메이션, 트랜지션, 트랜스폼의 차이 뜬금없지만 프론트엔드 개발자이지만 CSS를 잘 다루지 못하는 상태로 취업해서 밑바닥부터 구르고 있다. 통장 잔고를 보면 눈가가 뜨거워진다. 애니메이션, 트랜지션, 트랜스폼의 차이. 매번 단편적으로 보고 넘어가버리니 다시 보면 헷갈려서 정리해 보려고 한다. CSS의 Animation, Transition 및 Transform은 모두 웹 페이지에서 요소를 시각적으로 개선하기 위해 사용되는 CSS 속성이다. 애니메이션 (Animation) CSS3에서 새롭게 추가된 기능으로, 특정 요소에 대해 애니메이션 효과를 부여하는 방법이다. 요소에 복잡한 시각적 변화를 부여하는 데 사용되며, 일반적으로 사용자가 상호작용하지 않아도 자동으로 실행한다. @keyframes 규칙을 사용하여 정의하며, 시작 상태와 끝 상태를 .. [MD5] md5로 암호화해보자 MD5(Message-Digest algorithm 5)는 암호화 해시 함수이다. npm install md5 하면 쉽게 사용 가능하다. 설치 후 md5() 함수를 사용하면 된다. 괄호 안에 문자열을 입력하면 리턴값으로 암호화된 값을 내놓는다. 예를 들어 md5("Hello World")는 리턴값으로 b10a8db164e0754105b7a99be72e3fe5가 나온다. 그럼 의문이 들 수 있다. 그럼 md5 코드를 역으로 인코딩하면 원문이 나오는 거 아님? 이라고 생각할 수 있다. MD5는 해싱 알고리즘이므로 일방향 함수이다. 입력 값을 출력 값으로 변환할 수는 있지만, 출력 값을 입력 값으로 변환할 수는 없다. 이러한 특성 때문에 비밀번호와 같은 중요한 데이터를 저장할 때 사용하는 암호화 방식이 아니라.. [CSS] Position에 대해 알아보자 position은 다섯가지로 분류된다. 1. static 2. relative 3. absolute 4. fixed 5. stickty static position 속성을 지정하지 않았을 때 기본값으로 적용되는 값이다. 요소들은 문서의 일반적인 흐름에 따라 배치된다. top, bottom, left, right 속성을 사용할 수 없다. relative 요소가 '원래 위치에 있을 때'의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다. top, bottom, left, right 속성을 사용할 수 있다. absolute 요소의 위치를 상위 요소 중 position 속성이 static이 아닌 가장 가까운 요소를 기준으로 이동시킨다. 만약 상위 요소 중 position 속성이 static이 아닌 요소가.. [CSS] 푸터 하단에 고정시키기 HTML 삽입 미리보기할 수 없는 소스 웹에서 흔히 나오는 방법으로 부모 요소에 position: relative;를 주고 자식 요소에 position: absolute;를 주면 absolute 특성상 부모를 무시하게 되므로 부모요소 내용이 많아질 경우에도 굳건히 자리를 지킨다. 해결방법 1 HTML 삽입 미리보기할 수 없는 소스 작은 화면에서 보면 하단에 잘 붙어있는 것처럼 보이지만, 함정이 있다. 해결방법 2 HTML 삽입 미리보기할 수 없는 소스 위에서 제시한 코드는 푸터가 스크롤을 맨 아래로 내렸을 때에 최하단에 존재하게 하는 코드이다. 모바일 화면을 만들려면 약간의 수정이 필요하다. 푸터를 화면의 하단에 고정시켜야 하기 때문이다. HTML 삽입 미리보기할 수 없는 소스 이런 식으로 wrapper.. 이전 1 2 3 4 5 6 ··· 12 다음
