옵시디언 노트의 CSS 설정 및 사용자 지정

CSS는 개인화된 스타일 구성을 허용해 옵시디언에서 노트의 시각적 매력을 높여줍니다.

### 더 나은 노트 필기 및 정리를 위한 옵시디언의 CSS 커스터마이징
* 🎨 CSS(Cascading Style Sheet)를 사용해 옵시디언에서 **노트의 모양을 변경**할 수 있어 중요한 정보를 더 쉽게 강조할 수 있습니다.
* 🌗 옵시디언에서는 **설정 > 테마 > CSS 스니펫**으로 이동하여 제공된 CSS 파일을 편집하여 CSS를 사용자 지정할 수 있습니다.
* 🔠 CSS를 사용하여 굵게, ***이탤릭체***, 헤더 등 텍스트 요소에 다양한 스타일을 적용할 수 있어 구성과 가독성을 높일 수 있습니다.
* 📦 CSS를 사용해 노트 안의 특정 콘텐츠를 시각적으로 구분하고 **강조 표시**할 수 있는 블록 스타일의 텍스트를 만들 수도 있습니다.
* 🎚 색상, 애니메이션, 지속 시간 등의 CSS 속성을 조정하여 **다양한 텍스트 요소에 고유한 시각 효과**를 만들 수 있습니다.
* 📈 헤더의 경우 헤더 레벨마다 다른 색상을 설정하여 **그라데이션 효과**를 만들 수 있으므로 섹션을 쉽게 구분할 수 있습니다.
* 제공된 CSS 파일에는 **'경고', '참고', '팁' 등 일반적인 블록 문구에 대한 스타일**이 포함되어 있지만 필요에 맞게 사용자 지정할 수 있습니다.
* 🔗 발표자는 **미리 만들어진 CSS 파일을 다운로드하여 사용**할 것을 제안하지만, 사용자가 **CSS를 탐색하고 수정**하여 자신만의 고유한 스타일을 만들도록 권장합니다.

Hello everyone, this is a productive producer. There have been many questions about CSS in the comments, so I decided to make a video right away. I will briefly explain how you can easily implement it. CSS stands for Cascading Style Sheets, and it is a way to change colors and styles. Once you learn this, you will be able to use personalized styles in browsers like Chrome or Firefox later on. Now, let me show you how to set up CSS in Obsidian. Go to Settings and scroll down to Themes. There you will find CSS Snippets. Click on Open Folder, and you will see the CSS files. When you first open this, there won’t be any files; it will show the default format with no CSS applied. The CSS snippets are what I have added in the settings, and I have set them up differently for both dark and light themes.

I have set it up. So, if you remove all of these and look at the notes now, it has changed to a very simple white font. It looks a bit dull, so it would be good to use CSS to emphasize certain parts or to create paragraphs when needed. After setting this up, the bolded text appears in orange, making it stand out, and the italicized text has turned sky blue. It also allows for analog marking. Right now, the styles are not applied to the header, so the CSS is not active yet. Let me change this and activate the header part. Now it changes like this, and you can also set the headers differently for each section. Earlier, when nothing was set, it appeared in white. By configuring the CSS appropriately, you can adjust the pairs and the rhythm as well. If you open a CSS file, you can see how to implement italic bold.

This is about whether to apply it or not. The color is applied with this code; it is probably orange. The italic color was set earlier as well; this is likely sky blue. You can find the production code by searching on Google. You can choose a color that you like and insert it here. The CSS file is in text format, so you can change the necessary parts as needed. Also, the bold text was flickering earlier; you can set the frequency here. So far, I have shown you how to apply bold and italic styles. There is also Coral Wipe Dark, which is not complicated either. The text color goes here, and the frequency of it being wiped and repeated is set here. I am currently only using these two settings. You can set it up simply with titles and calls like this. If you have questions about this, you can check out ChatGPT or other sources.

If you have any questions, feel free to ask. I'm back with Obsidian. So, if you set up the callout with the dark style, it will be applied to the block style text. Let me open this up. The block style text allows you to apply styles to such phrases, so you need to be careful as you can put messages in a box. When I previously recorded the Obsidian lecture, I had placed research materials here, but there was an issue where this part didn't show up in the preview, which is why I'm back to this format. You can refer to this block style text. The English words include warning, error, note, tip, dangerous, important, example, summary, hint, and question. These are all that I've found, but there may be more. I discovered these through internet searches. You can also use different phrases if you prefer.

Then, basically, it will come out as productive producers. If you do it like this, it will come out like a basic note. You can write it down here. If you want to emphasize it visually a bit, you can mark it like this to see it. So, you can set and use block-style phrases like this. And the block-style phrases have CSS applied to the wiper-out, right? If you set that cycle, you can configure the time for it to move back and forth. I will upload a file for you. Then, you can go to the settings here, select the theme, and at the very bottom, when you open the folder, it will be empty. In that empty space, unzip the compressed file I provided. If you want to use it as it is, you can activate it here. And if you want to change it further, you can change the color codes. CSS is simple. I also downloaded the file and adjusted the colors.

I only changed the blinking interval. And if you look here, the header has a gradient effect, right? Let me show you this as well. You just need to set two colors. If you go to the text editor in the header section, you can see that there are headers numbered 1 through 6, right? There are six levels. You can see that the color codes here are slightly different. Headers 1, 2, and 3 have a bit more effect, so they are longer. So I only made modifications to this part. This color combination creates a gradient effect, which also gives a nice fade. If you shorten the interval here, the blinking interval will become shorter. What you need to do is simply change the colors and the timing. Later, when the header goes down, there will only be colors, right? Just the colors.

If you want to do level 4, you can just copy and paste the content from level 3. And you know that headers close like this, right? Header 1 can contain everything, Header 2 can contain the rest of the levels, and Header 3 can contain this way. If you look at the block text here, the header is like this, so you can open and close it, just keep that in mind. Right now, this is header level 3, and this is also header level 3. If a header level 2 goes above header level 3, then everything under level 2 will close like this. So header 1 remains, and everything else goes below. Do you understand? This is how you can manage toggles in Obsidian. There’s nothing special about CSS for you all.

If you want to study more, there are many related materials available on the internet and YouTube that you can utilize. I will then look for other content to share with you. Until now, I have been a productive producer. Thank you.

옵시디언 CSS 스니핏 꾸미기 | 나만의 스타일로 변신

생산적생산자

CSS는 웹 브라우저에서 색상과 스타일을 변경하는 데 사용됩니다.

옵시디언에서는 설정의 테마 섹션으로 이동해 CSS 스니펫 폴더를 열면 CSS를 설정할 수 있습니다.

어두운 테마와 밝은 테마에 서로 다른 스타일을 적용해 노트를 개인화하고, 굵은 텍스트와 이탤릭체로 특정 부분을 강조하고, 헤더 스타일을 조정해 보다 깔끔하게 보이도록 할 수 있습니다.

텍스트의 색상 코드는 주황색이고 이탤릭체는 하늘색으로 설정되어 있을 가능성이 높습니다.

CSS 파일은 텍스트 형식으로 되어 있어 쉽게 변경할 수 있으며, 굵은 텍스트는 지정된 주기로 깜박이도록 설정할 수 있습니다.

블록 스타일의 텍스트를 사용하여 스타일과 메시지 배치를 적용할 수 있으며, 다양한 콜아웃 옵션에 다양한 영어 단어를 사용할 수 있습니다.

CSS를 사용하여 블록 스타일 문구에 대한 지우기 효과와 같은 시각적 효과를 만들 수 있습니다.

효과의 지속 시간을 제어할 수 있으며 압축 파일을 추출하여 테마 설정을 수정할 수 있습니다.

헤더 요소는 다양한 색상 코드로 사용자 정의하여 그라데이션 효과와 깜박임 간격을 만들 수 있습니다.

옵시디언에서 헤더 및 토글 관리하기

헤더는 중첩할 수 있으며, 헤더 레벨 1은 모든 것을 포함하고, 헤더 레벨 2는 나머지를 포함하며, 헤더 레벨 3은 자체적으로 유지합니다.

헤더를 적절하게 닫고 여는 것은 콘텐츠 구성을 관리하는 데 필수적입니다.

이 주제에 대해 자세히 알아볼 수 있는 온라인 리소스가 많이 있습니다.