라이브러리 코드와 이미지 적용하기!
※ 제가 설명(?), 공유 하는 내용은 오직 혼자서 팠기(?) 때문에 정확하지 않을 수 있습니다. 그냥 참고 ㅋㅋㅋㅋ
(분명 공부 하시는데는 도움이 조금이나마 될겁니다... 아마두.)
위 사진 처럼 뜹니다. (Ctrl+F);
자! 실전 입니다.
혹시 잘못 수정하거나, 잘라먹는 경우를 대비해 반드시 코드들은 백업(복사)해둡니다. (이런 불상사의 경우 진심 멘탈 나간다....)
코드들은 어디에 넣느냐에 따라 눈에보이는 위치가 달라집니다.
이 강좌(?)를 보기전에 자신의 페이지 스킨의 코드들을 미리 잘 이해하고 오시길..
1) 라이브러리 코드(?) <나중에 공식적 이름이 알아낼 경우 고치겠습니다.>
이건 사실 검색해도 다르게 나오거나 안나올겁니다. ㅎㅎ
왜냐하면 제가 만든 말이거든(있나?...)요. ㅎㅎ
이걸 뭐라 하는지 설명 해놓은곳도 찾기 쉽지 않더라구요.
(찾으면 공유좀 해주시와요 ㅜㅠ)
자! 코드 부분을 봅시다. 보시면 Html, CSS, 업로드 이렇게 각각 세가지 탭이 존재 할 겁니다. 저희는 Html과 업로드만 만질겁니다. CSS는 아직 어떻게 사용하는 지는 모르겠습니다.
제가 설명하는 라이브러리 코드는 뭐냐? 함은 바로 정의해놓은 페이지 이름(?) 같은 겁니다. 예를 들어 이런 식으로..
http://사용자 계정.tistory.com/admin/center/ ====> https://limetimeline.tistory.com/manage
다른 것도 있으면 알려줘요!
2) 검색기능(Search Function)
<s_search>
<div class="col-md-6 col-md-offset-3">
<div class="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search"
name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
<span class="input-group-btn">
<button class="btn btn-success submit" type="button" onclick="">GO</button>
</span>
</div>
</div>
</div>
</s_search>
저기서 알아야 할 코드는 단 두가지!(간단 간단)
3) 버튼 옵션.
이 버튼 옵션은 제가 가장 많이 사용하는 것 같아요.
자! 예를 들어 봅시다.(상황극!)
"블로그를 꾸미자! 스킨 좋은걸 받아볼까?"
사용자는 블로그 스킨 관리 페이지로 이동합니다.
"음! 이게 좋겠군!"하고, 그 스킨을 적용하게 됩니다.
그러면 당연히 소스코드들도 더 복잡해지고, 화려하게 되겠죠?
"오! 딱보니 보이는 공유 버튼이 검은색 바탕에 휜 글자!" 라며 감탄하게 되죠!ㅎㅎ
그런 후, 내맘대로 꾸미고 싶어서 부트스트랩을 받게되고, 적용시키니 그 공유 버튼이 안보이는 겁니다.
"어! 어디 갔지? " 클릭 하니까 또 작동은 합니다. 왜 이런걸까요?
앞에서 설명 했듯이, 기본적인(부트스트랩 적용 전) 상황에서의 버튼의 default값은 검은색인데, 부트스트랩 적용 후 default값이 휜색으로 변하게 되면서 휜바탕에 휜글자랑 겹치게 되는거죠!
이제 이 버튼의 색을 변경 해봅시다.!
자! 이런 공유 버튼이 이렇게 되 버렸습니다....
우선 Html스크립트 창에서 Ctrl+F조합을 이용해서 검색기능 시전!
버튼 이름이 share this post니깐 그대로 쳐 줍시다. (지금은 예이고, 본인 페이지의 변경할 버튼 글자를 입력 해줘야 합니다.)
보시면,
<div class="shareButton btn btn-default btn-sm">share this post</div>
이렇게 뜨는데 자! class부분을 봅시다.
shareButton은 공유버튼 기능입니다.
btn은 버튼
btn-default는 버튼색상
btn-sm은 버튼 크기(사이즈) 입니다.
뒤에 share this post는 버튼에 나타낼 글자 입니다.
자! 그럼 이제 버튼 색상 종류를 알아 봅시다.
(출처는 부트스트랩 페이지)
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
이런 색상들이 있습니다.(더 많을걸요?)
버튼 색상을 그냥 red, black이런식으로 만들지 참.. ㅋㅋㅋㅋ
정의 되어 있는 색상들입니다. 입맛대로 고쳐 쓰시면 됩니다.
빠질 수 없는게 크기도 있죠?
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
4) 이미지 적용하기!
이 것도 그냥 별거아닌데, 어려운게 사진이 어느 무슨 코드랑 엮여있는지 알기 어렵다는 겁니다.
쉬운 경우는 이미지옆에 알 수 있도록 글자가 있으면 Ctrl+F를 사용하여 찾아서 변경합니다.
그리고 또 한가지는 업로드에 가보시면 여러가지 이미지가 있는데, 블로그 내에서 내가 바꾸고 싶은 이미지를 골라 그대로 바꾸면 됩니다. (이름은 반드시 일치 해야 합니다. 이름이 다르면 이미지가 깨집니다. 이럴때는 코드에서 적용 이미지 명을 변경하거나, 업로드한 이미지 명을 변경해야합니다. 이미지 명을 변경하는것을 추천 합니다.)
여하튼, 그냥 예를 들어 위치로그 이미지를 변경한다. 하면은
<li><img class="categoryImg" src="./images/icon-checkin.png" alt=""> <a href="https://limetimeline.tistory.com/location">Local Log</a></li>
src 부분에 ./images/icon-checkin.png 이부분을 기억 했다가, 업로드로 가셔서 같은 이미지를 살펴봅니다. 변경하려 했던 모양이 같은지 확인후 변경 하고 싶은 이미지를 네이버나 구글에서 퍼오던지, 그리던지 해서 크기를 맞게 자르고, 이미지이름을 icon-checkin.png로 변경 합니다. 그후 업로드 하고, 새로고침 하게 되면은 이미지가 변경 됩니다.
<업로드 했는데 변경이 안되요..ㅠㅠ>
이런 상황에서는 침착하시고(괜히 딴거 건들면 망함), 그냥 인터넷 옵션 - 쿠키및캐시 지우기 하셔서 새로고침 합니다.
완전 쉽죠?
.
.
.
.
.
