티스토리 상대방 코드 확인하는방법(+제목태그 꾸미는 방법)

티스토리 상대방 코드 확인하는방법(+제목태그 꾸미는 방법)

다른 사람 블로그를 밴치마킹을 하다보면
스킨이 마음에 든다거나,
광고배치할때 어떤 코드를 썼는지 궁금하다거나
어쨌든 상대방의 코드가 궁금할때가 있을거다.

그럴때 상대방의 코드를
확인하는 방법을 알아보자.

 

 

상대방 스킨이 궁금하다? 코드를 확인해보자

상대방 블로그를 보다가
뭔가 코드에대해 궁금증이 생긴다하면
궁금한 부분에 마우스를 갖다대고
마우스 우클릭후, 검사를 클릭하면
상대방의 코드를 확인할 수 있다.

예를 들어 현재 필자의 티스토리에서
<h3>제목태그를 쓰면 왼쪽과 아래에 초록색 둘레가 생기면서
제목에 CSS가 입히는걸(꾸며지는걸) 볼 수 있다.

이렇게 똑같이 따라하려면
어떤식으로 코드를 썼는지 확인하고
그대로 따라서 입력해주면
당신도 이렇게 할 수 있다.
방법을 바로 아래에서 확인하자.

 

1. 검사버튼 누르고 코드확인하기

궁금한 부분으로 마우스를 올려두고
마우스 우클릭 후, 검사버튼을 누른다.

---

내가 따라하고 싶은, 궁금한 부분에
마우스를 올려놓고
우클릭하고나서 검사를 누르면
위와 같은 코드가
수북히 쌓인 창이 나온다.

회색 네모로 칠해저있는 코드가
우리가 궁금해하는 코드이고
자세히보니, <h3으로 시작한다.
해당 부분이 <h3> 태그라는걸 알려준거고

오른쪽을보면
h3 태그를
어떻게 꾸몄는지 확인할 수 있다.
오른쪽에 있는 코드를 확대해보겠다.

h3 태그를 꾸며주는 방법들이 열거되어있다.
이걸 그대로 적용하고 싶으시다면
당신의 h3 태그에도 적용하면된다.

 

 

2. 코드 붙여넣기

코드를 확인했으니,
코드를 붙여넣기만하면 된다.

관리페이지>꾸미기>스킨편집>html편집
이 과정으로 들어가면

위와 같은 화면이 나오는데,
빨강 네모로 체크된
CSS부분을 클릭한다.

그럼 위와 같은 화면이 나오는데
CSS란 HTML코드를 꾸며주는 역할을 한다.
우린 아까 h3 태그를
꾸며주는 코드를 확인했으니,
h3 태그를 꾸며주는곳을 찾아서
그대로 변경해주면 된다.
Ctrl + F 기능을 써서 h3을 검색한다.

그럼 h3이란게 몇개 나올거다.
(,) 쉼표로 다른 h태그들과 연결된{}는
다른태그들에도 영향이가니까
h3만 있는 { } 사이에 우리가 봤던코드
전체를 붙여넣는다.

여기서 border-left color는
영어 뜻 그대로 왼쪽 가장자리 색이다.
색은 여러분이 원하는 색으로
rgb값을 넣으면된다.

rgb 마음에 드는 색은
구글링하면 많이 찾을 수 있다.
대표적인 사이트를 바로 아래에서
추천해드리겠다.

 

 

Color Hunt - Color Palettes for Designers and Artists

Color Hunt - Color Palettes for Designers and Artists

 

Color Hex Color Codes (color-hex.com)

Color Hex Color Codes

256 color 색상표 (n2n.pe.kr)

256 color 색상표

 

정리

이렇게 코드를 확인하는법,
간단하게 제목을 꾸미는법을 알아봤다.

HTML,CSS정도만 공부해주셔도
남의 코드를 보며 배울 수 있어서
HMTL,CSS는 공부해두는게
블로그, 이 밖의 사업을할때
굉장히 편하실거라 생각한다.
WEB1 - HTML & Internet - 생활코딩 (opentutorials.org)

WEB1 - HTML & Internet - 생활코딩

WEB2 - CSS - 생활코딩 (opentutorials.org)

WEB2 - CSS - 생활코딩

이 2개의 강의만 들으셔도
더이상의 지식은 필요없으실거다.

 

 

---

함께 보면 좋은글

2021.04.07 - [티스토리 꿀팁] - 블로그 글쓸때 사소한 꿀팁(줄바꿈)

2021.04.09 - [티스토리 꿀팁] - 티스토리 상대방 IP 차단하는 방법

2021.03.31 - [애드센스 꿀팁] - 애드센스 광고 중복코드 제거하기(페이지속도 개선)

---

이 글을 마음대로 사용하셔도 되지만,
반드시 출처(URL)은 남겨주시기 바랍니다.