블로그스팟에서 CSS 수정 하는 방법에 대해 알아 보겠습니다. 티스토리 처럼 CSS를 모두 확인하면서 수정하진 못하지만 수정할 CSS를 추가해서 일부 수정을 할 수 있습니다.
이 기능을 통해 H태그에 약간 효과를 줄 수 있으며 인용구 박스를 만들어 줄 수 있습니다.
이 두가지를 모두 CSS를 추가 해서 만들어 보겠습니다.
(아래 내용을 천천히 읽으면서 해보시면 어렵지 않게 쉽게 할 수 있습니다.)
CSS 추가 기능 위치
블로그스팟 관리자 페이지에 접속을 해 줍니다. 아래 사진을 확인 하면서 CSS를 추가 할 수 있는 설정이 있는 곳으로 이동하겠습니다.
①테마 클릭 ➜ ②맞춤설정 글자 클릭 (▼를 클릭하면 안됩니다)
고급에 있는 ⓐ부분을 클릭 하세요.
고급 탭이 펼쳐 지고 “페이지 텍스트”를 클릭 합니다.
항목들이 나오는데 맨 아래로 내려서 “CSS 추가”를 선택해 줍니다.
“맞춤 CSS 추가” 부분에 추가할 CSS를 입력해 주면 됩니다.
이렇게 블로그스팟에서 CSS를 추가 할 수 있는 설정이 있는 곳 까지 확인해 보았습니다.
이제부터는 H 태그와 인용구에 대한 CSS를 추가해서 적용하는 방법에 대해 알아 보겠습니다.
H 태그에 CSS 적용하기
블로그스팟의 테마를 적용하고 글을 작성하면서 H 태를 적용하게 되는데 두꺼워지고 글자만 커지는 느낌이라 조금 심심한 느낌이 듭니다. H 태그에 CSS를 추가하게 되면 아래 처럼 바뀌게 됩니다.
글수정에서는 적용 안되지만 미리보기나
글을 게시하면 CSS가 적용되서 표시 됩니다.
H 태그에 적용되는 CSS 코드는 아래와 같습니다.
코드를 다운로드 받고 이제 블로그스팟 “맞춤 CSS추가” 에 붙여 넣기 해 줍니다.
H태그에 대한 CSS 코드 추가가 끝났으면 오른쪽 아래에 있는 디스크 모양을 클릭해 저장을 해줍니다
이제 H 태그에 CSS 설정은 끝났습니다. 글 편집 화면에서 H 태그를 사용해 보고 미리보기 에서 확인하면 CSS가 적용되서 표시가 됩니다.
인용구에 CSS 적용하기
블로그 글을 작성하면서 인용구를 많이 사용하게 되는데 블로그스팟에서 기본적으로 적용되는 인용구는 정말 별로 입니다. 인용구에 CSS를 적용해서 깔끔하게 사용할 수 있게 했습니다.
티스토리를 사용하다가 블로그스팟이 처음이신 분들은 인용구 적용을 어떻게 적용하는지 모르기 때문에 인용구 적용하는 방법에 대해 먼저 알아 보겠습니다.
①인용구를 적용할 글을 마우스로 드래그 해서 블록을 잡아 줍니다 ➜ ②인용구 적용 버튼을 눌러 줍니다. 이렇게 하면 인용구 적용이 됩니다.
아래는 CSS를 적용하기전 기본 인용구 스타일과 CSS를 적용한 인용구 스타일 입니다.
CSS미적용 기본 인용구(위), CSS적용 인용구(아래)
아래 인용구 코드를 다운받아 H 태그 CSS 추가한 코드 아래 추가 해서 저장해 주면 적용이 됩니다.
이렇게 블로그스팟에 CSS 추가하는 방법과 H 태그와 인용구에 대한 CSS를 추가해서 적용하는 방법에 대해 알아 보았습니다.
이 내용을 응용하여 다른 수정하고 싶은 CSS를 추가면 원하는 결과물을 만들어 낼 수 있을 거라 생각합니다.
CSS 코드가 꼬이거나 했을 경우는 블로그 테마를 다시 적용해서 진행하면 됩니다.
함께 보면 도움이 되는 글
📌[블로그스팟] 도메인 연결 방법 – 가비아, 호스팅케이알