티스토리 스킨 원하는 부분 수정하기

• 크롬 개발자 도구에서 요소 확인하고 수정해보기
• 미디어쿼리로 피시와 모바일 디자인 다르게 적용하기
• 코드 적용의 우선순위 알기

 

스킨에서 원하는 부분만 바꾸고 싶다면 어떻게 해야 될까요? 

크롬으로 해당 스킨을 적용하고 내 티스토리에 들어간 뒤 설정에서 도구 더보기 - 개발자 도구를 클릭합니다.

 

 

 

아마 자동으로 Elements 탭이 켜져있을 겁니다.

그러면 여기서 빨간 박스로 표시한 인스펙트 버튼을 클릭합니다.

 

 

저는 제목을 클릭했는데, 클릭하면 옆에서 자동으로 어느 부분인지 보여줍니다.

여러 태그로 감싸여진 경우 접기 버튼을 펼쳐서 원하는 부분이 보일 때까지 들어가줍니다.

여기서는, title_view 가 제목에 해당하는 태그네요.

 

우측에 Styles 창을 보면 기존에 적용되어있는 CSS 스타일을 볼 수 있습니다.

밑에서부터 차근차근 덮어쓰기 되어, 제일 위에 있는 코드가 적용이 됩니다.

 

밑에서 폰트 사이즈를 36px 로 설정했지만,

현재 .article_content .info_post .link_title 코드에서 폰트 사이즈를 20px 으로 다시 설정해주어서

밑줄이 생기면서 지워졌습니다.

하지만 폰트 사이즈만 설정해줬기에 하단의 컬러 #111 과 font-weight 600 은 그대로 남아있습니다.

 

 

 

스킨 편집란에 가서 검색해보면, 폰트 사이즈를 20으로 설정한 코드가 남아있죠.

우리는 이제 이 부분을 원하는 대로 수정하여 디자인을 바꿀 수 있습니다.

 

 

 

그리고 이렇게 가끔 @media screen and ~ 라는 코드를 볼 수 있는데요.

이 코드를 대괄호로 감싸서 사용하면 화면 너비에 따라 다르게 보여줄 수 있습니다.

 

max-width: 820px : ~820px 까지 코드 적용

min-width: 821px : 821px 부터 코드 적용

 

 

이 부분을 이용해서 피시나 모바일 디자인을 다르게 만들어 보세요.

 

만약 코드를 넣었는데도 제대로 적용이 안된다면, 코드의 우선순위가 달라서 그럴 수 있습니다.

CSS 가 적용되는 우선순위를 검색해서 찾아보시고 그에 맞게 조정해보세요.

(티스토리 자체에서 설정 중인 CSS 가 있다면 어쩔 수 없이 코드에 !important 를 해야 하는 경우도 있습니다.)

 

혹시 모르니 작업하실 때에는 꼭 초기버전 백업을 해두시고 진행하시는 걸 추천 드립니다.