웹반응형 스킨 'skeleton' 본문상단에 구글번역기 넣는 방법

지난 시간에 이어서 티스토리 웹반응형 스킨 'skeleton'을 나름대로 편집한 부분에 대해서 설명하고자 합니다.

 

사실 아직까지도 웹반응형 스킨은 완벽하지 않고 브라우의 종류에 따라서 호환이 안되는 부분이 있는데 이 부분은 마크쿼리님이 이번달(1월)안으로 업데이트를 하실 계획이라고 하네요^^

 

 

아무튼 웹반응형 스킨을 처음 접하고 html구조가 기존 일반 스킨들과 조금 달라서 어느 부분을 수정해야 할지 헷갈리는 분들이 많습니다..저도 여전히 그렇구요 ㅎㅎ

 

그래도 경험상 제가 편집했던 부분을 모르는 분들을 위해서 조금이나마 도움이 되고자 쓰는 중이랍니다.

 

이 블로그에 방문하신 분들은 아실테지만 '구글번역기'가 본문 상단 제목이 있는 부분 오른쪽에 위치하고 있습니다. 아직..질문하신 분은 없지만..나름 깔끔해보이죠?

 

바로 위 캡쳐화면속에 나오는 저 부분입니다.

 

마크쿼리님이 만드신 웹반응형 스킨 skeleton은 기본적으로저 부분에 폰트의 크기와 종류를 드롭다운 버튼으로 선택할 수 있게 되어있더군요.

 

물론 저 버튼도 삭제와 편집이 가능합니다.. 그 바로 옆에 있는 것이 '구글번역기'구요^^ 구글번역기 중에서 가장 심플한 녀석을 골랐는데..크기가 그 옆에 있는 폰트 버튼과 거의 비슷합니다.

 

단순히 구글번역기 코드를 복사해서 폰트 버튼이 있는 코드 바로 옆에 붙여주면 되겠지라고 생각하기 쉬운데..이게 그렇게 단순하지는 않아요~

 

처음에 html에서 폰트버튼의 위치를 정확히 알기위해서 구글 크롬의 '요소검사'기능을 활용했었답니다..이 기능 정말 강추죠~

 

찾아보면 'entry-header'라는 부분에 위치하고 있더군요..본문 제목과 글쓴 날짜...폰트크기 조절 버튼이 같은 곳에 있어요~ 친절하게도 구글 크롬의 요소검사 기능이 색깔로 표시까지 해줘서 찾기가 정말 수월하죠.

 

'entry-header'의 내부로 들어가보면 <div class="col-sm-12">이 보입니다.

 

웹반응형 스킨 'skeleton' 본문상단에 구글번역기 넣는 방법

 

 

다시 <div class="col-sm-12">의 루트로 계속 들어가면 글쓴 날짜와 관련된 소스인 time class가 보이는데..그 바로 다음에 보이는 <div class="col-sm-3">이 바로 편집을 해줘야 하는 부분입니다^^

 

이 소스 안에는 원래 폰트 크기조절 버튼 관련 소스만 들어있는데 여기에 구글번역기를 넣어줘야 하는 것이죠. 이 정도만 이해하셨다면 어느 정도 감이 잡힌 셈입니다^^

 

티스토리 블로그 관리자메뉴에서 이 부분을 찾으려면 skin.html에서 CTRL+ F 단축키로 'entry : header'를 찾아줍니다. entry-header라고 검색할 경우 여러개가 나오기때문에 찾기가 조금 헷갈릴 수도 있거든요~

 

'entry : header'는 딱 하나뿐입니다. 검색이 되었다면..<div class="col-sm-12"> 아래쪽에 있는 time class와 <div class="col-sm-3">가 쉽게 눈에 보이게 되죠.

 

여기서 중요한 포인트는 <div class="col-sm-3">이라는 부분 내부에 폰트 버튼과 구글번역기가 함께 들어가려면 table소스로 감싸줘야 한다는 점입니다.

 

만약 그러지 않으면  폰트버튼과 구글번역기가 따로 따로 엉뚱한 곳에 가거나 아래쪽에 위치하게 되겠죠^^ 이런 부분은 table,tr,td의 구조를 알면 조금 이해하기도 쉽고 적용하기도 그렇게 어렵지 않습니다~

 

<table>은 말그대로 하나의 큰 테이블이고..그 내부에 <tr>과 <td>라는 소스가 들어가는 구조인데요.. <tr>는 가로(행)을 표시하는 소스..<td>는 세로(열)로 칸을 표시하는 소스라고 할 수 있습니다.

 

그래서 폰트 버튼과 구글번역기를 나란히 가로로 넣어주려면 <tr>이라는 하나의 소스안에 <td>라는 소스가 두개 들어가야 해요~

 

위에 캡쳐한 화면을 보시면 이해하기가 수월합니다..즉..<table><tr><td>폰트버튼 소스</td><td>구글번역기</td></tr></table> 라는 구조죠.

 

그런데 만약에 이렇게 했음에도 위치가 엉망이 된다면...전체를 감싸고 있는 <div class="col-sm-3">의 폭이 작아서 생긴 문제니까 폭을 조금씩 수정해주시면 됩니다.

 

폭수정은 위 캡쳐화면 상단부분에 있는 소스처럼 style="width:2"...왼쪽,가운데,오른쪽 위치수정은 float:right 부분을 손봐주면 되겠죠.^^

 

비슷하게 해보실 분들은 참고하세요~~

 

✅티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용

✅웹반응형 블로그 스킨 skeleton '카테고리' 오류 해결

웹반응형 블로그 스킨 skeleton '카테고리' 오류 해결

✅웹반응형 스킨 'skeleton' 상단메뉴 버튼(드롭다운) 만들기

웹반응형 스킨 'skeleton' 상단메뉴 버튼(드롭다운) 만들기

✅웹반응형 스킨 skeleton 'footer'정보 수정하기

웹반응형 스킨 skeleton 'footer'정보 수정하기