캘린더 라이브러리를 쓰다가 문득 직접 만들어 보고 싶어서 vue3로 커스텀 캘린더를 만들었습니다. 뭔가 옛날스런 느낌으로 만들고 싶었기에 조악한 디자인... 을 갖고 있지만ㅋㅋㅋㅋㅋㅋ 소스코드 시작: {{ option }} {{ option }} {{ option }} ~ 끝: {{ option }} {{ option }} {{ option }} 생각보다 소스코드가 긴데 간단합니다. 기본적으로 Date() 객체를 사용하여 핸들링 했으며 윤년처리, 시작과 끝 날짜 에러 처리, 날짜 스트링 처리 등의 코드로 양만 많은 것이므로 쫄 것 없이 읽어보면 쉽게 이해됩니다.
JavaScript
저번 시간에 todo 페이지를 만들었으니 이번엔 todo 페이지를 꾸며봅시다. 첫 번째 게시글에서 vuetify를 설치했으니 사용해봐야겠죠? todos.vue에 아래와 같이 적어줍니다. 투두 리스트 임시 카드 1번 투두에요 1번 내용이에요 그럼 아래와 같은 화면을 볼 수 있습니다. 우리의 예쁜 투두리스트의 첫 카드가 만들어졌네요! v-container는 vuetify에서 div와 같이 자식 태그들을 담을 공간을 의미합니다. v-card는 vuetify의 카드 컨테이너입니다. 위와 같이 예쁜 카드를 자동으로 만들어줍니다. v-card-title, v-card-subtitlek, v-card-text는 카드 안의 내용을 채우는 태그입니다. 카드에 어울리게 텍스트가 꾸며져 있습니다. 아래와 같이 assets/..
루트 폴더에 data.js 파일을 아래와 같이 만들어줍니다. 그리고 pages 디렉토리를 만든 후 안에 index.vue 파일을 만들어줍니다. 참고로 vuetify에선 class에 ma-3과 같은 이름을 추가함으로써 마진과 패딩을 줄 수 있습니다. 참고: https://vuetifyjs.com/en/styles/spacing/ CSS Spacing helpers Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5. vuetifyjs.com 홈페이지와 투두 페이지를 나눠주기 위해서 NuxtLink를 사용해 라우팅을 해줍니다. 넉스트에서는 자체적으로 vue-router를 사용해서 ..
내용 지속적으로 추가 예정입니다! 자바스크립트 버전 2009: ES5 2015: ES6 2016: ES7 2015년부터 2015 → ES6과 같은 방식으로 1씩 올라가는 네이밍을 하기 시작했다. Console.log() 자바스크립트에는 console이라는 콘솔 출력을 위한 객체가 있다. 나중에 다루겠지만 변수를 디버그 하는데 있어서 가장 기본적인 요소이므로 시작에서 다루고 넘어간다. console.log(0) // console창에 0 출력 Strict 모드 사용 변수 선언자 없이 변수 선언을 하면 에러를 발생하게 해준다. // 맨 위에 'use strict'; 명시 'use strict'; var a = 1 // ok a = 1 // error 1. 기본문법 1.1 변수 특성/변수명 CONST VAR ..
개인 pc 웹서버를 만들일이 생겨서 openssl로 인증서를 적용해봤습니다. 아래 링크의 내용을 참고했습니다. 메타세콰이어 블로그: m.blog.naver.com/espeniel/221845133507 1. OpenSSL 설치 slproweb.com/products/Win32OpenSSL.html Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions Minimum system requirements: Windows XP or later 32MB RAM 200MHz CPU 30MB hard drive space Recommended system requirements: Windows XP or later 128MB RAM 500MHz ..
각 마우스 포인터의 액션에 따른 태그의 형태를 지정할 수 있습니다. 1. a:link{ a 태그의 기본 속성을 지정할 때 사용합니다. } 2. a:hover{ a 태그에 마우스 오버시 속성을 지정할 때 사용합니다. } 3. a:visited{ 방문한 경우의 속성을 지정합니다. } 4. a:active{ 누르는 순간을 지정합니다. } 5. a: focus{ 포커싱 되는 경우의 속성을 지정합니다. } 5번의 경우에는 input태그 등이 다음 입력으로 인한 focus를 얻을 시 하이라이트를 주는 등의 액션에 이용될 수 있습니다.(예: 설문지, 이용약관 등) 방문함 방문안함 출처: https://rongscodinghistory.tistory.com/18 [악덕고용주의 개발 일기]
