개발 (50) 썸네일형 리스트형 [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.. [Capacitor] 플러그인 없이 카메라 사용하기 앱을 만들다보면 카메라 기능을 넣어야 하는 경우가 생긴다. Capacitor 공식문서를 보면 Camera 플러그인이 있다. 그런데 그 방법 없이도 안드로이드, IOS에서 카메라를 돌릴 수 있다는 사실. 이 코드 한 줄이면 된다. 신박하다. HTML코드 한 줄로 이게 된다. 물론 IOS는 Xcode에서 카메라 권한 설정을 해줘야 한다. Project Navigator에서 Info.plist 파일을 선택 Info.plist 파일에서 카메라 권한을 설정하려면 NSCameraUsageDescription 키를 찾는다. 없으면 우클릭 후 add row를 클릭한 다음 직접 입력한다. 키를 정한 후, Value 열에서 권한에 대한 설명을 입력한다/ [Vue3] img 경로 설정, 엑스박스, 사진이 안 나올 때 이런 식으로 나오시는 분들(미래의 저를 포함)을 위해 이번에 블로그에 정리해둡니다. 저렇게 나오는 분들 대부분 이렇게 지정하셨을 거예요. 요렇게 src 폴더를 기준으로 하는 @ 상대경로로 바꿔주세여. [IndexedDB] 생소한 그 이름 파헤쳐 보자 팀에서 IndexedDB를 한 번 사용해보자는 이야기가 나왔다. 내게는 신기술로 느껴지는 만큼 기록을 남겨두지 않으면 분명 나는 까먹고 말 것이다. 그래서 IndexedDB가 뭐냐면 늘 무심하게도 지나쳤던 이 항목이다. 기존 DB들과는 구조도 조금 다르고 쿼리문(?)도 익숙하지 않으니 그냥 예제부터 보고 갑시다. const dbName = "myDatabase"; const storeName = "Person"; const data = { "김창식": { age: "25", gender: "male" }, "윤옥분": { age: "30", gender: "female" } }; const request = indexedDB.open(dbName, 1); request.onupgradeneeded = f.. [Capacitor] Android / IOS 대상 버전 설정 Android 대상 버전을 지정하려면, "capacitor.config.json" 파일에서 "android" 항목 내에 "minVersion"과 "targetVersion" 속성 값을 추가하면 됩니다. 예를 들어, 다음과 같이 추가할 수 있습니다. "android": { "minVersion": "21", "targetVersion": "30" } iOS 대상 버전을 지정하려면, "capacitor.config.json" 파일에서 "ios" 항목 내에 "minVersion"과 "targetVersion" 속성 값을 추가하면 됩니다. 예를 들어, 다음과 같이 추가할 수 있습니다. "ios": { "minVersion": "10.0", "targetVersion": "14.5" } 이러한 방법으로 Capac.. 이전 1 2 3 4 5 6 7 다음
