현재 노트: KR-010.00 b IT블로그 blockquote 개발자도구로 찾아내서 수정하기
상위 분류: KR-010.00 Debugging
#Debugging #CSS

목적

웹 블로그의 마크다운 >로 표현되는 내용이 너무 밋밋해서 잘 보이지 않기에 마크다운을 수정하는 것보다 웹 상에서 보이는 방식을 수정하여 전달하기로함

수정전

수정 후

요소 탐색

해당 요소 개발자도구로 탐색
해당 요소에 영향을 미치는 2개의 스타일 코드를 먼저 확인하였습니다. 1개가 아닌 2개인지라 각 각의 클래스가 어떤 정보인지를 먼저 확인합니다.
첫번째 블록은 옵시디언템플릿 값임을확인하며 옵시디언이라는 툴에서테마별로 바뀌는 자동값임을 확인합니다
두번째 값은 블로그를 수정하면서 많이 본 플러그인에서 제공하는 스타일 파일임을 확인합니다.

_theme.d844bd66.css
.markdown-rendered blockquote {
    padding-left: 1.6em;
    overflow: hidden;
    border-left: none;
    margin: 1em 0px;
    font-style: italic;
}

obsidian-base.scss
.markdown-rendered blockquote {
    color: var(--blockquote-color);
    font-style: var(--blockquote-font-style);
    background-color: var(--blockquote-background-color);
    border-left: var(--blockquote-border-thickness) solid var(--blockquote-border-color);
    padding: 0 0 0 var(--size-4-6);
    margin-inline-start: 0;
    margin-inline-end: 0;
}

``

구성 변경 테스트

우선 순위가 어떤것이 반영되는지 몰라서 두 개중에 잘 알고, 수정하기 쉬운 obsidian-base.scss를 수정하기로 결정하고 혹시 모를 영향을 위해 개발자도구상에서는 _theme.d844bd66.css가 영향을 줄 수 있는 부분은 제거합니다.

• border-left
  위의 border-left-none 으로 표시 자체가 안되는 점 확인. 밑의 blockquote로만 제어하기
  border-left-style:solid , border-left-width:15px추가
  동작 확인 완료

• border-right
  위와 동일하기 style과 width주고 추가 확인

• background-color
  챗gpt써가며 색 추천받기. 결론적으로 아이보리색이 제일 맘에 들음

실제 블로그에 동작하는 코드 변경

개발자도구를 통해 어떤 코드를 어떻게 변경시 작동이되며, 스타일등을 테스트 해보았기에 실제 웹이 배포되는 레포지토리의 custom-style.scss에서 important키워드 사용하며 해당 내용 명시하여 앞으로 모든 글에도 동일한 스타일이 적용되게합니다.

웹 서비스에서 3개의 css마크다운템플릿과, 위와같은 옵시디언 자체 템플릿 css를 사용하는경우도 있어서 부득이하게 important사용합니다.

.markdown-rendered blockquote{
    border-left-style: solid !important;
    background-color: #f5f2e8 !important;
    border-left-width: 15px !important;
    border-left-color: #4fc2e5 !important;
    border-right-color: #3bb0d6 !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
}

css 스타일 참조 https://inpa.tistory.com/entry/CSS-💍-인용문blockquote-디자인-🖌️-모음