악분의 블로그

안녕하세요. 이 글은 코딩과 관련된 주제를 유투브 쇼츠로 찍는 과정을 설명합니다. 1. 준비물 미리 캔버스 회원가입 obs studio 설치 davinci resolve 설치 2. 영상 녹화 2.1 프레임 생성 유투브 쇼츠 크게 맞는 프레임을 생성합니다. 프레임은 쇼츠에서 보이는 화면 크기입니다. 프레임 크기는 1080 x 1920입니다. 저는 미리캔버스에서 프레임을 만들었습니다. 만든 프레임을 다운로드하여 이미지(png)파일로 저장합니다. 2.2 녹화할 IDE를 프레임 위에 놓기 프레임 이미지 파일을 엽니다. 그리고 녹화할 IDE를 엽니다. IDE 위치를 이미지 위에 이동시키고 크기를 프레임 크기에 맞게 수정합니다. IDE크기를 프레임에 맞게 수정하면, 아래 그림처럼 이미지 파일에 IDE가 쏙 들어갑니..

안녕하세요. 이 글은 Raycast와 vscode project Manager extension와 연결하는 방법을 설명합니다. 전제조건vscode에 project manager extension가 설치되어 있어야 합니다. 연동 방법Raycast에서 vscode project manager extension을 설치합니다. store을 입력하고 엔터를 누릅니다. visual studio code - Project Manager을 선택하고 엔터를 누릅니다. 엔터를 입력하여 extension을 설치합니다. 사용 방법Raycast에서 "Search Project Manager"을 선택하면 vscode project manager extension에 등록된 목록이 보입니다.

Rascast란? Raycast는 맥OS spotlight기능을 커스터마이징한 어플리케이션입니다. 설치방법 공식 홈페이지에서 dmg파일을 다운로드 받아 실행하면 됩니다. 설정방법 command + space를 누르면 Raycast가 실행되도록 설정해야 합니다. 먼저 spotlight 단축키를 제거합니다. [설정] -> [keyboard shortcuts] 메뉴로 이동합니다. command + Space 단축키를 선택해제 합니다. Raycast어플리케이션을 실행합니다. Raycast단축키를 command + space로 설정합니다. 저는 튜토리얼 단계에서 단축키를 설정했습니다.

굵은 글씨 스타일 변경 전/후 비교 저는 오디세이 스킨에서 글씨를 굵게하면 잘 안보였습니다. 그래서 아래그림처럼 형관펜 효과로 수정했습니다. 변경방법 1. css에서 "b, strong"을 분리시킵니다. strong태그는 글 제목에 사용되고 b태그는 폰트굵기스타일에 사용됩니다. 2. "b"태그에 background를 추가합니다. b { font-weight: border; background: linear-gradient(to top, #FFE400 30%, transparent 30%); } 참고자료 [1] mintchaca 블로그: https://mintchaca.tistory.com/22 이하여백

글 제목과 본문 글 사이 간격 오디세이 스킨은 글 제목과 본문 글 사이 간격이 매우 깁니다. 저는 이 부분이 거슬려서.. 간격을 줄였습니다. 간격조정 방법 "tt-body-page .main"에서 padding-top 값을 수정하면 됩니다. 저는 350px로 설정했습니다. // pc버전 #tt-body-page .main { padding-top: 350px; } // 모바일버전 @media screen and (max-width: 1060px) { #tt-body-page .main { padding-top: 350px; } }

관련 글이란? 같은 글에 속한 카테고리 글을 보여주는 기능입니다. 오디세이 스킨을 사용하면 글 제일 아래에 있습니다. 저는 이 기능이 필요 없어 숨기기로 했습니다. 삭제방법 "article-related"에서 display:none을 추가합니다. .article-related { margin-bottom: 42px; display: none; }

다른글이란? 오디세이 스킨은 페이지 제일 마지막에 "다른 글"을 보여줍니다. 아마도 같은 카테고리 글을 보여주는 기능인 것 같습니다. 저는 관련글 기능을 플러그인으로 사용하고 있어 숨기기로 했습니다. 삭제방법 ".article-page"에서 display:none을 추가합니다. .article-page { margin-bottom: 46px; border-bottom: 1px solid #e8e8e8; // 아래 줄 추가 display: none; } 참고자료 [1] imheroim 블로그: https://imheroim.tistory.com/59 이하 여백

목차란? 목차는 "제목"스타일로 작성한 글을 모아놓은 기능입니다. 목차 생성 방법 오디세이 스킨은 목차기능을 제공하고 있지 않습니다. 그래서 스킨편집창에서 css와 javascript 코드를 직접 추가해야 합니다. TOC 라이브러리 추가 추가 목차 라이브러리(TOC) 설정을 head태그 아래에 추가합니다. TOC코드 추가 태그 바로 위에 TOC코드를 추가합니다. TOC코드는 "제목"스타일을 조회하여 목차를 만들어줍니다. 오디세이스킨은 ".article-view" class 안에 "제목"스타일이 존재합니다. TOC를 표시하는 코드 추가 TOC를 화면에 보여주는 코드를 추가합니다. ".area-main"아래에 추가합니다. CSS추가 디자인을 꾸며주는 CSS를 추가합니다. .toc-absolute { posi..