개발 (48) 썸네일형 리스트형 [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.. [Capacitor] 하이브리드앱 만들기 Vue3 + Capacitor 조합으로 프로젝트를 하게 됐다. Vue3는 마스터는 아니지만 어느정도 작동방식은 알고 있으니 Capacitor에 대한 개괄적인 학습부터 진행해보려고 한다. capacitor.config.ts 파일 설정법도 공부해야한다. 터미널에 입력하여 vue 프로젝트를 생성한다. npm create vite@latest 웹 프로그램이 다 만들어지면 npm run build capacitor 라이브러리를 받는다. npm install @capacitor/core @capacitor/cli capacitor를 초기화한다. npx cap init android, ios 프로젝트를 만든다. npm i @capacitor/android @capacitor/ios npx cap add android.. [Vue3] Life-Cycle(라이프사이클) composition api를 사용하는 경우에는 setup hook에서 beforeCreate, created에 해당하는 과정이 한꺼번에 처리됩니다.. 이제까지 코드를 작성하면서 써온 setup() 메서드가 바로 setup hook입니다. 생명 주기 훅 등록하기 예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다: 인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUnmounted가 있습니다. onMounted를 호출하면, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결합니다. 이를 위해서는 컴포넌트 설정 중에 이러.. 이전 1 2 3 4 5 6 다음
