본문 바로가기

전체 글463

yt-dlp로 유튜브 동영상 다운로드 하는 방법 안녕하세요. 혀코입니다. 오랜만에 유튜브 동영상을 다운로드 하려고 했는데, youtube-dl 명령어가 작동하지 않더군요. 그래서 대안을 알아보던 중 yt-dlp라는 프로그램을 알게 되어 성공적으로 유튜브 동영상을 다운로드 받을 수 있었습니다. 그래서 이번 시간에는 yt-dlp의 설치 방법과 간단한 사용법, 그리고 자막을 다운로드 받는 방법에 대해서 알아보겠습니다. yt-dlp 설치하는 방법 우선 yt-dlp는 youtube-dl에 몇가지 기능을 더해 만들어진 소프트웨어입니다. 파이썬을 설치하시면 pip 명령어를 사용할 수 있습니다. Terminal에서 pip 명령어를 사용해서 yt-dlp 패키지를 설치합니다. $ pip install yt-dlp yt-dlp 사용해서 유튜브 동영상 다운로드 받는 방법 .. 2024. 4. 23.
패스트캠퍼스 온라인 ChatGPT와 함께 월 100만원 수익 블로그 만들기 완강 후기 여러분, 안녕하세요. 혀코입니다. 작년까지만 해도 블로그의 연간 수익은 겨우 10만원 정도 밖에 안되었습니다. 수익이 너무 적어서 수익을 더 올릴 수 없을까 고민하고 있던 중에, 패스트캠퍼스에서 'ChatGPT와 함께 월 100만원 수익 블로그 만들기' 강좌를 발견하게 되어 수강신청을 하게되었습니다. 강좌 내용은 ChatGPT를 활용해서 블로그 수익을 극대화하는 방법을 알려주는 과정이었습니다. 강의 소개 강의 제목에서 알 수 있듯 인공지능 ChatGPT를 활용해서 월 100만원 수익 블로그를 만들 수 있는 노하우에 대한 강의를 담고 있습니다. 강의에는 ChatGPT 활용을 도와주는 Kit인 블로그 인기 주제 TOP10 요리, 뷰티, 제테크, 애견, 맛집, IT, 여행, 데이트, 육아, 패션에 대한 프롬프.. 2023. 12. 13.
[코드트리 챌린지] 1주차 학습 진단 결과 안녕하세요. 혀코입니다. 1주차 학습 진단 결과 입니다. 총 5문제 중에 3문제 풀었습니다. 2번째 문제에서 1차 배열을 좀 헷갈려해서 느리게 코딩한게 좀 아쉬웠습니다. 배열을 더 공부해봐야겠네요. 그래도 점수는 0주차 253점에 비해서 140점 정도 올랐네요. 그리고 0주차 학습내용 진행 상황으로 연산자 부분을 진행하고 있다. https://www.codetree.ai/missions/4/problems/square-width-after-length-change?&utm_source=clipboard&utm_medium=text list1 = list(map(int, input().split(' '))) # 가로와 세로의 값을 받는다 width = list1[0] # 입력 받은 가로값 저장 height.. 2023. 9. 8.
[코드트리 챌린지] 0주차 학습 진단 결과 안녕하세요. 혀코입니다. 오늘은 코드트리 블로그 챌린지에 앞서 실력을 평가해 봤습니다. 총 4문제 중에 3문제 풀었습니다. 숫자 입력받는 것을 헷갈려서 시간 초과로 두번째 문제를 놓친게 아쉬었습니다. 두개의 숫자를 입력 받을 때는 다음 코드를 사용해서 입력 받아야 하는 것을 알았습니다. numbers = list(map(int, input().split(' '))) 다음은 학습 진단 결과입니다. 다음에는 더 높은 점수를 받을 수 있도록 더 공부해야겠네요. 2023. 9. 1.
인증용 테스트 글 코드트리 아이디: smilehugo 2023. 9. 1.
JavaScript 날짜 시간 출력하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript로 날짜와 시간을 출력하기 위한 Date Class의 사용법에 대해서 알아보겠습니다. 현재 시간 정보를 얻기 위해서는 다음 코드를 사용해서 클래스를 이용해서 인스턴스를 생성합니다. const date = new Date() console.log 를 사용해서 변수 date를 출력하면 다음과 같이 출력됩니다. console.log(date) // Wed Aug 16 2023 11:28:43 GMT+0900 (한국 표준시) 다음은 년도, 월, 일, 요일, 시간, 분, 초, 밀리초를 구하는 방법입니다. date.getFullYear() // 년도를 출력한다. // 2023 date.getMonth() // 월을 출력한다. // 7 // getMonth().. 2023. 8. 16.
온라인 프로그래밍 코딩 강의 웹사이트 추천 베스트 17!! 안녕하세요. 혀코입니다. 프로그래밍을 시작하면 정말 끝이 없죠. 매일 같이 새롭게 개발되는 프로그래밍 언어들과 버전 업데이트 하면서 새롭게 추가되는 기술들을 익혀야 살아남을 수 있을 것만 같은 느낌... 그래서 이번 시간에는 꾸준히 공부하시라고 온라인 프로그래밍 강의 웹사이트 추천 베스트 17을 소개해 드리도록 하겠습니다. 순위의 순서는 제가 지극히 개인적으로 추천하는 순위이니 참고 부탁 드립니다. 1. FreeCodeCamp 퀴즈 형식으로 프로그래밍 언어를 익히는 방식으로 강의를 제공하는 것이 특징이며 무료입니다. 한국어 지원이 안되는 것이 단점. 유튜브로 퀄리티 높은 무료 강의를 제공하며, 블로그로도 최신기술 뉴스를 공유하며 뉴스레터에 가입하면 일주일에 한번씩 뉴스레터를 통해 공부할 만한 내용을 추천.. 2023. 8. 14.
[Python] 변수값이 숫자로 변환가능한지 확인하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 변수값이 숫자로 변환 가능한지 여부를 확인하는 방법에 대해서 알아보겠습니다. 변수값이 숫자로 변환 가능한지 여부는 isdigit() 메서드를 사용하면 쉽게 확인이 가능합니다. strings = "456" print(strings.isdigit()) # True 이 방법을 활용해서 문자와 숫자가 혼합된 문자열에서 숫자의 값만 더한 값을 구해 보자면 다음과 같이 구할 수 있습니다. strings = "cd2eft8aze23" answer = 0 for str1 in strings: if str1.isdigit() == True: answer += int(str1) print(answer) # 15 주어진 문자열을 for loop `for str1 in strings` .. 2023. 7. 18.
Python에서 list 복사하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Python에서 list를 복사하는 방법에 대해서 알아보겠습니다. Python에서 list를 복사할 때 주의 사항이 있습니다. 만약 aList 와 bList 가 있을 때 aList = bList 가 같다고 하고 bList를 변경하면 aList도 동일하게 변경되는 것을 확인할 수 있습니다. aList = [] bList = [1,2,3] aList = bList for i in range(len(bList)): bList[i] += 1 print(f'aList = {aList}') # [2,3,4] print(f'bList = {bList}') # [2,3,4] 이러한 이슈를 방지하기 위해서 Python에서 list를 복사할 때 [:]를 사용해서 어느 한 List가 .. 2023. 7. 14.
Python 라이브러리 없이 기약분수 구하는 방법 이번 시간에는 Python 라이브러리를 사용하지 않고 기약분수를 구하는 방법에 대해서 알아보겠습니다. 10/8 의 분수가 있다고 가정합니다. 분자는 10, 분모는 8 이라 해당 분수는 기약 분수가 아닙니다. 기약분수로 나타내려면 분자와 분모의 최대공약수를 분자와 분모에 나눠줘서 표현해 줘야 합니다. 최대공약수를 구하기 위해서는 유클리드 호제법을 사용합니다. 예를 들어 분자를 분모로 나눈 나머지 값이 0이면 해당 분모는 최대공약수가 됩니다. 만약 나머지 값이 0이 아니면 분모를 나머지 값으로 다시 나눠줍니다. 이렇게 반복해서 나머지 값이 0이 나올 때의 나눈 값이 최대 공약수가 됩니다. 만약 나머지 값이 이전의 나머지 값과 같다면 최대공약수가 존재하지 않습니다. 10을 8로 나누면 2가 남습니다. 0이 아.. 2023. 7. 5.
유용한 웹사이트 링크 모음 #1 SVG Filters SVG Filter를 테스트해 볼 수 있는 웹사이트 https://yoksel.github.io/svg-filters Motionscribe 텍스트 위주의 짧은 프로모션 동영상을 제작할 수 있는 MacOS 앱 https://motionscribe.com DeepL 인공지능 번역기 https://www.deepl.com/ Tokenizer 문자수와 토큰개수를 계산해 볼 수 있다. OpenAI Platform 프롬프트 지니: ChatGPT 자동 번역기 Prompt를 한글로 적으면 영어로 번역해서 요청하고 영어로 답변을 받아서 한글로 번역해서 보여주는 서비스 프롬프트 지니: ChatGPT 자동 번역기 Perplexity AI 메타에서 상업 이용도 가능하도록 공개한 언어 모델 Llama 2.. 2023. 6. 16.
2023년 FIFA U-20 월드컵 경기 결과 조별리그 경기 결과 GROUP A 승점 승 무 패 골득실차 아르헨티나 9 3 0 0 9 우즈베키스탄 4 1 1 1 1 뉴질랜드 4 1 1 1 -4 과테말라 0 0 0 3 -6 과테말라 0 vs 1 뉴질랜드 아르헨티나 2 vs 1 우즈베키스탄 우즈베키스탄 2 vs 2 뉴질랜드 아르헨티나 3 vs 0 과테말라 뉴질랜드 0 vs 5 아르헨티나 우즈베키스탄 2 vs 0 과테말라 GROUP B 승점 승 무 패 골득실차 미국 9 3 0 0 6 에콰도르 6 2 0 1 11 슬로바키아 3 1 0 2 1 피지 0 0 0 3 -16 미국 1 vs 0 에콰도르 피지 0 vs 4 슬로바키아 미국 3 vs 0 피지 에콰도르 2 vs 1 슬로바키아 에콰도르 9 vs 0 피지 슬로바키아 0 vs 2 미국 GROUP C 승점 승 무.. 2023. 6. 13.
Canvas 태그 사용시 고해상도 모니터 대응하는 방법 canvas를 사용할 때에는 사용자의 모니터가 평범한 모니터인지 고해상도 모니터인지 고려해야 합니다. 평범한 모니터의 1px이 1px로 구성되어 있다면 고해상도 모니터의 경우 평범한 모니터에서 1px이 차지하는 면적이 4px로 구성되어 있습니다. 그래서 고해상도 모니터에서 보다 더 선명한 화면을 볼 수 있습니다. 그래서 고해상도 모니터에서 더욱 선명한 화면을 볼 수 있도록 대응을 해줘야 합니다. 다음 코드를 사용하면 사용자 컴퓨터의 화면해상도의 값을 구할 수 있습니다. const dpr = window.devicePixelRatio 고해상도 모니터를 사용한다면, window.devicePixelRatio 값이 2가 되고, 평범한 모니터를 사용한다면 window.devicePixelRatio 값이 1이 됩.. 2023. 6. 12.
카카오톡 윈도우 단축키 정보 [일반기능] 새로운 채팅 Ctrl + N 친구 추가 Ctrl + A 잠금모드 Ctrl + L 로그아웃 Alt + N 종료 Alt + X 서랍 열기 Ctrl + J 메인창 열기 Ctrl + Shift + M 톡캘린더 열기 Ctrl + D 모든 창 닫기 Ctrl + Shift + W [채팅방] 채팅방 닫기 ESC 메시지 전송 Enter 줄바꿈 Ctrl + Enter, Shift + Enter 초대하기 Ctrl + I 대화내용 내보내기 Ctrl + S 열린 채팅방 이동 Ctrl + Page Up/Down 파일보내기 Ctrl + T 알림 끄기/켜기 Ctrl + Shift + B 채팅방 서랍 파일 열기 Ctrl + K [이모티콘] 이모티콘 창 열기 Ctrl + E 이모티콘 창 닫기 ESC 이모티콘 상하좌우 이동 .. 2023. 6. 10.
2023년 6월 9일 지난 한주동안 있었던 일들 6월 3일 맨시티 맨유 꺾고 잉글랜드 FA컵 우승 6월 5일 FIFA U-20 월드컵 8강에서 대한민국이 나이지리아를 1대 0으로 꺾고 2회 연속 4강 진출 6월 6일 현충일 애플 WWDC2023에서 Apple Vision Pro 발표 6월 7일 대한민국 유엔 안전보장이사회 비상임이사국 선출 6월 8일 수내역 엘레베이터 역주행 사고 6월 9일 FIFA U-20 월드컵 4강에서 대한민국이 이탈리아에 1: 2로 져서 결승행 좌절 2023. 6. 9.
Canvas 위에 네모 그리는 방법 HTML의 canvas 태그를 사용해서 웹사이트에 네모를 그리는 방법에 대해서 알아보겠습니다. Index.html 파일을 다음과 같이 작성합니다. body 태그 안에 canvas 태그를 넣어주고 수정할 CSS 파일과 JS 파일을 head 태그 안에 작성해 줍니다. style.css 파일을 다음과 같이 작성해서 canvas에 배경색을 넣어줍니다. 너비와 높이 따로 지정을 하지 않아도 표시가 됩니다. 기본값은 가로 150 그리고 세모 100입니다. nemo.js 파일을 다음과 같이 작성해서 네모를 그려줍니다. const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') ctx.fillRect(10, 10, 50, 50).. 2023. 6. 9.
2023년 FIFA U-20 F조 대한민국 대 온두라스 경기결과 아르헨티나 멘도사의 말비나스 스타디움에서 2023년 국제축구연명(FIFA) 20세 이하(U-20) 월드컵 F조 2차전 경기결과 입니다. 한국 대 온두라스 2-2 무승부로 한국은 조 2위, 온두라스는 3위를 기록했습니다. 전반 20분 온두라스 다비드 오초아 패널티킥 골 후반 6분 온두라스 이삭 카스티요 골 후반 13분 대한민국 김용학 골 후반 17분 대한민국 박승호 골 한편, 감비아 대 프랑스 2-1 감비아 승 감비아는 2연승으로 조 1위, 프랑스는 4위 최하위를 기록했습니다. 전반 13분 프랑스 자책골 후반 12분 감비아 페널티킥 실패 후반 16분 프랑스 월송 오도베 골 후반 23분 감비아 마민 산양 골 참고로 1차전 경기결과는 다음과 같았습니다. 감비아 대 온두라스 2-1 한국 대 프랑스 2-1 한국 .. 2023. 5. 26.
[TypeScript] 업데이트 자동 감지 및 컴파일 하는 방법 안녕하세요. 이번 시간에는 TypeScript 파일이 업데이트 되면 자동으로 업데이트를 감지해서 JavaScript 파일로 컴파일 할 수 있도록 하는 방법에 대해서 알아보겠습니다. TypeScript 파일의 업데이트를 자동 감지해서 JavaScript 파일로 컴파일 하려면 다음 명령어를 사용합니다. $ tsc app.ts -w 위 명령어는 하나의 파일 app.ts에서만 동작하게 됩니다. 만약 여러개의 typescript 파일이 있다면 다음 명령어를 사용해서 해당 프로젝트 전체의 typescript 파일들을 자동 컴파일 해줍니다. $ tsc --init 이 명령어를 사용하면 tsconfig.json 파일이 생성됩니다. 따로 설정할 필요는 없으며 다음으로 모든 typescript 파일들을 자동 감지해서 ja.. 2023. 1. 2.
[TypeScript] 함수의 리턴 타입 지정하는 방법 안녕하세요. 이번 시간에는 함수의 리턴 타입을 지정하는 방법에 대해서 알아보겠습니다. 두 수를 합한 값을 리턴하는 함수를 보겠습니다. function add(num1: number, num2: number) { return num1 + num2; } 이 함수에 리턴 타입을 지정하는 방법은 다음과 같습니다. function add(num1: number, n2: number): number { return num1 + num2; } 함수가 리턴 값을 갖지 않을 때는 void를 지정할 수 있습니다. function result(num1: number, num2: number): void { console.log(num1 + ', ' + num2) } 또는 변수를 지정하면서 함수를 선언할 때는 다음과 같이 리.. 2023. 1. 2.
[MacOS] MacOS 유용한 단축키 총정리 안녕하세요. 혀코입니다. 이번 시간에는 MacOS의 유용한 단축키 총정리하는 시간을 갖겠습니다. Spotlight 기능 켜기 Command + Space 프로그램 종료 Command + Q 프로그램 강제 종료 Command + Option + Q 화면 잠금 Command + Control + Q 화면 전체 스크린샷 찍기 Command + Shift + 3 화면에서 선택한 부분 스크린샷 찍기 Command + Shift + 4 스크린 샷 및 화면 녹화 옵션 선택하기 Command + Shift + 5 모든 창 숨기기 Command + H Command + Alt + Click Background 창 미니마이즈 Command + M 다른 프로그램으로 변경 Command + Tab Command + ~ Fin.. 2022. 12. 31.
[JavaScript] HTML 페이지에 JavaScript 를 사용하는 방법 안녕하세요. 오늘은 HTML 페이지에 JavaScript를 사용하는 방법에 대해서 알아보겠습니다. HTML페이지에 JavaScript를 사용하는 방법은 크게 두가지가 있습니다. 인라인 스크립트로 사용하는 방법이 있고, 외부 스크립트를 임포트해서 사용하는 방법이 있습니다. 인라인 스크립트를 사용하는 방법 다음과 같이 HTML 템플릿이 있습니다. Welcome to Hyukho's Blog JavaScript를 사용하기 위해서는 외부 스크립트를 사용하는 방법 외부의 JavaScript로 만들어진 파일을 가져와서 사용하는 방법은 아래와 같이 사용하면 됩니다. Welcome to Hyukho Blog Welcome to Hyukho Blog 외부 스크립트와 인라인 스크립트를 함께 사용하는 방법은 외부 스크립트를.. 2022. 12. 29.
[TypeScript] type을 변수로 지정하여 사용하는 방법 안녕하세요. 이번 시간에는 Type을 변수로 선언해서 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 변수를 선언할 때 var, let, const를 사용했듯이 TypeScript에서 변수를 선언할 때 type을 사용하면, 해당 변수의 type을 여러번 재사용 할 수 있습니다. 예를 들어 변수의 타입이 number 또는 string 일때, 이 변수의 타입을 다음과 같이 선언할 수 있습니다. type DataType = number | string const user1: DataType = 30 const car1: DataType = 'Hyundai' 위와같이 DataType이라는 Type 변수를 선언해서 사용해서 다른 변수의 타입을 더욱 간결하게 지정할 수 있습니다. 이렇게 Type을 변.. 2022. 12. 29.
[TypeScript] TypeScript의 Type 종류 안녕하세요. 이번 시간에는 TypeScript의 Type 종류에 대해서 알아보겠습니다. TypeScript에는 다음의 Type 들이 있습니다. number string boolean object array tuple enum any union literal unkown never number 모든 정수, 실수를 포함한 모든 숫자의 타입입니다. 사용하는 방법은 num1: number 형식으로 사용합니다. string 작은따옴표(''), 큰따옴표(""), 백틱(``)을 포함한 모든 문자열의 타입입니다. 사용하는 방법은 str1: string 형식으로 사용합니다. boolean True와 False를 나타내는 타입입니다. 사용하는 방법은 isChecked: boolean 형식으로 사용합니다. object {k.. 2022. 12. 29.
[TypeScript] TypeScript를 JavaScript로 컴파일 하는 방법 안녕하세요. TypeScript는 Microsoft에서 개발한 언어로 JavaScript를 포함하는 언어이지만 브라우저에서 작동하지 않기에 JavaScript로 컴파일해줘야 합니다. 그래서 이번 시간에는 TypeScript를 JavaScript로 컴파일 하는 방법에 대해서 알아보겠습니다. 우선 다음 명령어를 사용해서 TypeScript를 전역으로 설치합니다. $ npm install -g typescript 프로젝트 폴더에 index.html 파일을 만들고 app.js를 불러올 수 있도록 코드를 작성합니다. 그리고 app.ts 파일을 생성합니다. 여기서 만든 app.ts 파일을 컴파일해서 app.js 파일로 만들어서 사용할 겁니다. console.log("Hello World") 글 처음에 언급했듯이, .. 2022. 12. 28.
[Vue] Vue의 Key Modifier란? 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Key Modifier에 대해서 알아보겠습니다. javascript로 이벤트의 키값을 받을 때 사용하는 것을 Vue의 Key Modifier 문법을 통해서 쉽게 제어할 수 있습니다. Vue의 event binding 으로 keydown 이벤트를 실행해서 handler 라는 함수를 실행시켜 enter키가 눌러졌는지 확인하는 코드를 작성해 보겠습니다. 이것을 key modifier .enter를 사용해서 다시 작성하면 다음과 같습니다. enter 키 뿐만 아니라 다른 키들도 사용 가능합니다. 다음은 f 키를 눌렀을때 'key F is pressed!' 라고 출력해 보겠습니다. 텍스트 입력 폼 안에 알파벳 아무 키를 입력하다가 F가 입력되면 콘솔창에 'Key F.. 2022. 9. 9.
[Vue] Vue의 Event Modifier 란? 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Event Modifier에 대해서 알아보겠습니다. Event Modifier는 click 이벤트를 받을 때 흔하게 사용하는 JavaScript를 Vue의 문법을 통해서 쉽게 제어할 수 있도록 하는 기능입니다. Event Modifier에는 다음과 같은 종류가 있습니다. .stop .prevent .self .capture .once .passive 태그에 .prevent event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지 않게 됩니다. 태그에 .once event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지만 연결된 함수가 단 한번 실행되고 다시는 실행되지 않습니다. 태그에 ... 2022. 9. 8.
[Vue] Vue에서 event를 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 event를 다루는 방법에 대해서 알아보겠습니다. 클릭해서 숫자가 1씩 증가하는 프로그램을 만들어 보겠습니다. {{ count }} 이때, v-on 은 이벤트 바인딩할 때 사용하는 것으로 약어로 다음과 같이 @click으로 대체해서 사용할 수 있습니다. {{ count }} 다음으로 버튼을 클릭했을 때 버튼의 text를 출력해 보도록 하겠습니다. Hello World 이벤트 객체 e를 받아서 해당 버튼 태그의 textContent 즉 텍스트를 출력할 수 있습니다. 또한, click 이벤트를 받아서 함수를 실행할때 parameter 값을 지정해서 넘겨줄 수 있습니다. {{ count }} +1 +2 그리고 클릭 이벤트를 받아서 parameter 값과 eve.. 2022. 9. 7.
[NPM] shortid package 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 shortid npm package를 사용하는 방법에 대해서 알아보겠습니다. 설치하는 방법 npm install -D shortid Vue.js에서 다음과 같이 사용합니다. Company {{ name }} 태그에서 shortid package를 가져와서 shortid로 사용합니다. id 값으로 shortid.generate() 지정하면 랜덤한 id가 생성됩니다. 이렇게 shortid npm package를 사용하는 방법에 대해서 알아봤습니다. 해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 9. 6.
[Vue] v-if와 v-show의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 v-if와 v-show의 차이점에 대해서 알아보겠습니다. 먼저 v-if에 대해서 보겠습니다. Counter with v-if and v-else show paragraph1 paragraph2 Chrome DevTool을 열어서 확인해 보면, v-if 로 지정된 것은 주석처리가 되어있어 렌더링 되지 않습니다. 다음으로 v-show에 대해서 보겠습니다. Counter with v-if and v-else show paragraph1 paragraph2 v-if를 v-show로 변경하고 버튼을 클릭해도 paragraph1과 paragraph2를 출력하지 않습니다. 그 이유는 v-show가 태그에서 동작하지 않기 때문입니다. 다시 태그를 로 바꿔줍니다. Counter w.. 2022. 9. 3.
[Vue] Vue에서 인라인 style 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 인라인 style 다루는 방법에 대해서 알아보겠습니다. Style Attribute {{ message }} 인라인 style을 사용할 때는 key, value 쌍으로 이뤄진 객체를 사용합니다. 이때, key 값으로 camelCase를 주로 사용하며, kebab-case를 사용할 때는 'font-size'와 같이 따움표를 사용합니다. 그리고 value 부분은 기본적으로 따움표를 사용합니다. 그리고 class attribute를 다룰때 처럼, script에서 객체 데이터를 만들어 style에 객체명만 지정해서 사용할 수 있습니다. Style Attribute {{ message }} 그리고, methods를 사용해서 styleObject의 값을 변경하면 스.. 2022. 9. 2.

티스토리툴바