초보자도 할 수 있는 초간단 티스토리 CSS 수정하는 방법 (티스토리 블로그 색상 변경, 티스토리 CSS 편집)
by 아지니어 (아빠 + 엔지니어)2022. 2. 15.
초보자도 할 수 있는 초간단 티스토리 CSS 수정하는 법 (티스토리 CSS 편집)! 우리가 뭐 대단한 거 바라는 거 아니잖아요. 그저 색상 하고 글자 폰트 이런 거 내 맘대로 바꾸고 싶은 건데 어떻게 안될까요?
안녕하세요.
이번 포스팅에서는 티스토리 블로그를 운영하시는 분들 중 티스토리 포스팅 내의 색상 변경이나 폰트 등을 변경하실 수 있는 초간단 티스토리 CSS 수정 방법 (티스토리 CSS 편집 방법)에 대해 설명드리고자 합니다.
천천히 따라 해 보시면 저와 같이 CSS (Cascating Sytle Sheet)에 대해 문외한이신 분들도 충분히 쉽게 티스토리 포스팅 내의 색상이나 폰트 등을 변경하실 수 있으실 듯합니다 (티스토리 CSS 수정, 티스토리 CSS 편집).
CSS는 Cascating Sytle Sheet의 줄임말로 말 그대로 웹 화면에서 보이는 스타일을 조절하는 데 사용되는 언어를 의미하는 듯합니다.
아래의 예제에서는 블로그 포스팅 상단의 색상을 변경해 보도록 하겠습니다.
1. 티스토리 CSS 수정, 티스토리 CSS 편집: 색상을 변경하고자 하는 포스팅을 웹 화면상에 띄우신 후 변경하고자 하는 화면에 마우스를 가지고 가셔서 오른쪽을 클릭하여 메뉴에서 '검사'항목을 선택하시거나 또는 키보드 상의 F12 버튼을 누릅니다.
저는 개인적으로 키보드 상에서 F12 단축키를 사용하시는 것을 선호합니다.
초보자도 할 수 있는 초간단 티스토리 CSS 수정하는 방법 (티스토리 블로그 색상 변경, 티스토리 CSS 편집) (출처: 티스토리)
2. 티스토리 CSS 수정, 티스토리 CSS 편집: 키보드 상의 F12 단축키를 선택하시면, 아래 그림의 오른쪽과 같이 웹 화면을 구성하는 html 코드들을 보여주며 이 화면에서 오른쪽 맨 윗부분의 화살표를 클릭하신 후, 변경하고자 하는 부분에 마우스를 가지고 갑니다.
아래 예제에서는 포스팅 맨 윗부분의 색상 (녹색)을 변경하고자 마우스를 아래와 같이 포스팅 제목을 포함하는 블록에 마우스를 가져다 놓았으며 만약 글 제목의 색상을 변경하고 싶으시다면 그 윗부분인 "아지니어의 쉼터"라고 쓰여진 부분에 마우스를 가져다 놓아야 합니다.
그러면 해당 블록의 아랫부분과 같이 이 블록을 코드 상에서 지칭하는 이름이 표기가 되어지는데 예제에서는 ".post-cover::before"임을 확인할 수 있습니다.
초보자도 할 수 있는 초간단 티스토리 CSS 수정하는 방법 (티스토리 블로그 색상 변경, 티스토리 CSS 편집) (출처: 티스토리)
3. 티스토리 CSS 수정, 티스토리 CSS 편집: 2번 단계에서 마우스로 변경하고자 하는 블럭을 선택하시면, 해당 화면의 아랫부분이나 오른쪽에 해당 블록에 관련된 CSS 코드가 자동으로 선택되어져 사용자에게 보여집니다.
2)번 단계에서 확인한 해당 블록을 지칭하는 코드 상의 이름을 아래 그림에서도 확인하실 수 있으며, 여기서 색상을 변경하고 싶으시다면 "background-color: #f37979"를 선택하신 후 숫자를 변경하시면 원하시는 부분의 색상을 변경하실 수 있습니다.
느끼셨겠지만 background-color 뒷부분에 표기된 숫자는 다양한 색상과 숫자를 서로 매칭 시켜 놓은 것으로, 프로그램을 기반으로 움직이는 모든 디지털 제품은 '색상'이라는 우리의 언어를 이해하지 못하기에 이를 기계가 이해할 수 있도록 모두 숫자로 0과 1을 사용하여 변환해 놓은 것입니다.
예제에서는 해당 블록의 기존 색상을 녹색에서 분홍색 계열로 변경한 것이며, 현재 보여지는 변경 화면은 웹 브라우저를 유지하고 있는 순간에만 유효하며 이를 영구적으로 변경하기 위해서는 티스토리 블로그 내에 CSS 코드를 수정하여야 합니다.
초보자도 할 수 있는 초간단 티스토리 CSS 수정하는 방법 (티스토리 블로그 색상 변경, 티스토리 CSS 편집) (출처: 티스토리)
4. 티스토리 CSS 수정, 티스토리 CSS 편집: 해당 블럭의 변경하고자 하는 색상을 고르신 후, 'background-color: #f37979' 의 뒷부분에 위치한 숫자를 기록하거나 복사합니다.
초보자도 할 수 있는 초간단 티스토리 CSS 수정하는 방법 (티스토리 블로그 색상 변경, 티스토리 CSS 편집) (출처: 티스토리)
댓글