스킨 바꾸다 포스팅 까지 하게 되었다;;;;
사실 html은 진짜 중딩때 폰트 바꾸기, 배경색 바꾸기, 폰트사이즈 바꾸기, 이미지 넣기 등등
으로 아주 초보 수준밖에 모르는데
스킨 보다 보니 html이 보여서 잘 모르는 분들을 위해 간단하게 수정할수 있는 노하우를 알려주고자 한다
이것 또한 매우 기초적인 지식이고
어떤 분들에게는 도움이 안될수도 있다
하지만 꼭 내수준 정도의 html을 다를줄 아는 초보분이라면 많은 도움이 될 것같다
먼저, 지금 쓰고 있는 스킨이 너무 무거웠다
메뉴 몇개좀 없앤다고 해서 빨라지는지는 잘 모르겠지만
무겁고 몇개의 필요없는 카테고리는 지워도 될 것 같아서 조금 손을 보게 되었다
특히 메인 상단에 떠있는 큰 글씨의 마.크.쿼.리
싹다 지워버리기 위해 html / css 수정페이지로 들어갔다
들어가는 방법은 : 관리 -> HTML/CSS 편집 누르면 됨
그런데 저 마크쿼리가 들어간 이미지가 뭔지 못찾겠다 ㅠㅠㅠ 수많은 html속에 저 이미지만 쏙 찾아서
지울수 있는 방법!!!!
F12를 이용하는 법이다
다시 해당 페이지를 열고 키보드에서 F12를 누르면 오른쪽이나 아래 어떤 창이 생긴다
거기서
이렇게 생긴 화살표를 발견했으면 클릭 후에 코드를 알고 싶은 화면을 클릭하면 된다
즉 나는 저 그림만 쏙 지우고 싶었으므로 저 그림을 클릭한다
그럼 html코드가 어떻게 들어가 있는지 나오게 된다
그럼 클릭후!
주변 코드가 뭐가 들어가 있는지 본다~~~ 만약 저 사진 주위로 <head> 사진이 들어간 코드 </head> 이렇게 되어있다면
다시 HTML/CSS 편집 으로 돌아와 <head> 코드를 검색해본다
그럼 내가 원하는 코드가 어디에 들어가 있는지 쉽게 찾을수 있고 지울수도 있다
(제 설명이 이해가 가시나요??)
<!-- 삭제한 상단 메인사진 코드
================================================== -->
<div class="row col-nospace cover">
<div class="col-sm-12">
<div id="coverCarousel" class="cover_carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#coverCarousel" data-slide-to="0" class="active"></li><!-- 1st image indicator -->
<li data-target="#coverCarousel" data-slide-to="1"></li><!-- 2nd image indicator-->
</ol>
<div class="carousel-inner">
<div class="item active"><a href="#"><img class="img-responsive" src="./images/cover-black.png" alt="cover-black"></a></div><!-- first image -->
<div class="item"><a href="#"><img class="img-responsive" src="./images/cover-gray.png" alt="cover-gray"></a></div><!-- 2nd image -->
</div><!-- carousel-inner -->
</div><!-- #coverCarousel -->
</div>
</div>
사실 더 쉽게 찾는 방법이 있다
모든 코드는 <시작></끝> 이렇게 이루어져 있다
<head>이렇게 들어갔으면 </head>이렇게 끝나야 코드가 적용다는 이야기다
모든 코드가 이렇게 이루어져 있기 때문에 만약 제대로 안닫혔다 하면 코드가 빨간색으로 폰트색이 변한다
만약
<head><body></body></head></head> 이렇게 들어가 있다면
헤드는 한번 열려 있는데 두번 닫아줬으므로 화면에서
<head><body></body></head></head> 이런식으로 표시된다는 이야기다
이 개념만 익히면 내가 수정하고자 하는 코드가 어디서 시작해서 어디서 끝나는지를 알수 있기 때문에
쉽지만 반드시 익혀야 할 개념이다
실제 스킨에 적용된 코드로 예를 들어보겠다
<s_sidebar_element>
<!-- 방문자수 -->
<div class="widget">
<h3>Count</h3>
<ul class="widget-inline">
<li>Total : </li>
<li>Today : </li>
<li>Yesterday : </li>
</ul>
</div>
</s_sidebar_element>
위에 열리고 닫히는 html코드를 같은 색으로 표시하였다 확실히 한번 열렸으면 한번 닫히죠???
<!-- 방문자수 --> 이건 <!-- 여기에 글자를 쓰시오--> 이런식으로 작성하면
코드에는 남지만 실제로는 화면에 나타나지 않기 때문에 메모의 개념으로 쓰는거라
대충 <!-- 이것만 찾아봐도 어떤 구간의 코드인지 알수가 있다
그리고 코드는 <!-- 방문자수 --> 여기서 부터 시작이지만 아래위로 <s_sidebar_element> 라는 코드가 들어가 있는데
아마도 이건 오른족 사이드바에 들어가는 메뉴라 이런식으로 넣어준것 같다
또 위의 코드에서 보면 count라는 것은 폰트의 크기를 조정하는 <h3>이라는 코드 사이에 들어가 있으므로
화면에 직접 count라고 나타난다는 것을 알수 있다
그래서 이걸 자유롭게 수정 가능한데
예를들어 실제 메뉴 화면에 이렇게 나와있고
아래와 같이 코드가 들어가 있다면
검정글자인 Comments 가 수정 가능하다는 뜻
한글로 댓글로 바꾸고 나서 저장 -> 새로고침 하니
이렇게 변경되었다
한글을 사랑합시다 ♡
다른메뉴도 다 적용 가능하고
아예 삭제를 시키고 싶으면 해당 메뉴에 해당되는 코드를 전체 삭제후 적용하면 된다
가끔 초보는 코드를 잘못 만지는 수가 있으니 따로 저장을 하거나
마구 손봤다가 울지말고 메모를 해놨다가 조금씩 삭제 적용하는것도 좋은 방법이다
이제 내가 실제 메뉴에서 삭제한 두 메뉴만 메모한 후 마쳐야겠다
<s_sidebar_element><!-- Trackbacks -->
<div class="widget">
<h3>Trackbacks</h3>
<ul>
<s_rcttb_rep>
<li>
<a href="">.
<br> <time datetime=""></time>
</a>
</li>
</s_rcttb_rep>
</ul>
</div>
</s_sidebar_element>
아래 코드는 무슨 코드일까요~??
<s_sidebar_element>
<!-- Articles -->
<div class="widget">
<div class="widget-feed-inner">
<h3>Articles</h3>
<div class="js-widget-feed"></div>
</div>
</div>
</s_sidebar_element>
진짜 모르겠어서 검색해보니 "규약"이라는데 영~~~ 아닌듯해~~
그나저나 이런 내맘을 아는지 모르는지 속도는 전~~혀 빨라진것 같지 않음^^;;;;
'티스토리 블로그 팁' 카테고리의 다른 글
| 현재 사용중이 dev.golazo.com(Dev스킨) 스킨 다운로드 받기 (0) | 2017.08.07 |
|---|---|
| 티스토리 블로그 초대장 구하는 방법 / 직접 문을 두드려라 (0) | 2017.08.06 |
| 사람들이 티스토리 블로그를 만드는 이유 / 세상에 쉬운일 하나 없음을 느끼며 (0) | 2017.08.06 |
| 티스토리 사진 편집툴은 아무리생각해도.... (0) | 2017.08.02 |
| 티스토리 블로그 스킨 배경색 수정할때 쓰면 좋을 프로그램 (0) | 2017.07.16 |
| 티스토리 스킨찾아 삼만리.... 여러가지 유명한 스킨 사용 후기 (0) | 2017.07.12 |
| 하루 15개씩 포스팅 해라 - 네이버와 티스토리 블로그의 차이 (0) | 2017.06.30 |
| 애드센스 수익으로 월세를 벌어볼까?? (0) | 2017.06.26 |
