구글 블로그 Amalia 템플릿의 blockquote 태그에 대한 CSS 중복 문제 수정

HTML 'blockquote' 태그, 다른 글을 인용할 때 쓰는 코드

HTML blockquote 태그 사용법과 인용문을 올바르게 표기해야 하는 이유를 자세히 알려드립니다. SEO, 접근성, 그리고 중복 콘텐츠 문제를 해결하는 blockquote 태그의 장점을 확인하세요.

이전에 <blockquote> 태그에 대한 글을 썼다.

그리고 글을 작성한 김에 blockquote 태그의 스타일을 수정하려다 이상한 문제를 발견했다.

그 문제란 [F12] 키를 눌러 개발자 도구를 확인했더니, 위의 이미지에 캡처한 것처럼 blockquote 태그에 대한 CSS 스타일이 중복이 되어있는 것이었다.

일단 나는 구글 블로그 템플릿 중에서 Amalia 템플릿의 무료 버전을 사용하고 있다.

아마 다른 템플릿들도 가끔 가다가 이런 문제가 있을 수도 있다.

중복된 코드는 찾아서 삭제를 하고 어떻게든 리팩토링 해야 하는 것이 개발자의 숙명.

중복된 곳을 삭제하고 수정해 보자.

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 blockquote를 검색한다.

일단 이미지에 표시한 부분을 삭제하자.

이런 저런 태그들의 기본 스타일을 잡아주는 CSS 코드인데, 여기에 굳이 blockquote가 있을 필요가 없다.

내 기준으로 (내 블로그의 글들을 보고 모든 템플릿 편집을 다 따라했다면) 3192번째 줄부터 있는 blockquote 태그 관련 CSS 코드들을 전부 삭제한다.

이 구간의 CSS 코드에는 색상 변수를 사용할 수 없기 때문에 이 부분을 없애는 것이 더 낫다.

색상 변수에 대한 내용은 아래에 링크한 포스트에서 설명한 적이 있었다.

구글 블로그 템플릿의 색상을 변경해 보자.

내 블로그를 원하는 색상으로 커스터마이징하고 싶다면 이 글을 보세요. 초보자를 위한 쉬운 컬러 변경부터, HTML 편집을 통해 CSS 변수를 활용하는 고급 방법까지 모두 담았습니다.

아까 삭제했던 부분에서 필요한 코드들을 이쪽으로 옮겼다.

 blockquote{
    background-color:#f7f8f9;
    font-style:italic;
    color:#888; /* 추가 */
    padding:10px 15px; /* 수정 */
    margin:8px 0;/* 수정 */
    border-left:5px solid $(2nd.color); /* 수정 */
}
 blockquote:before,blockquote:after{
    display:inline-block;
    font-family:'Font Awesome 5 Free';
    font-style:normal;
    font-weight:900;
    color:#888; /* 수정 */
    line-height:1
}
 blockquote:before{
    content:'\f10d';
    margin:0 10px 0 0
}
 blockquote:after{
    content:'\f10e';
    margin:0 0 0 10px
}

그래서 최종적으로 완성된 코드는 이렇다.

색상 변수는 본인이 원하는 색으로 바꾸도록 하자.

blockquote의 왼쪽에 있는 선의 색상도 변경됐고, 개발자 도구를 통해 CSS가 중복되는 문제가 해결된 것도 확인했다.

표시해 놓은 곳 아래에 또 blockquote에 대한 CSS 코드가 있어서 중복된 것처럼 보일 수도 있다.

이전에도 언젠가 설명한 적이 있었는데, user agent stylesheet라고 쓰여있는 곳의 CSS 코드는 내 템플릿에 저장된 CSS 코드가 아니라 브라우저가 자동으로 걸어놓은 CSS 코드이니 blockquote 태그의 CSS 중복 문제는 해결된 거다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.