진짜 진짜 마지막 꾸미기.. ㅠ_ㅠ
더이상은.. NAVER
너무중독이다.. ㅠ_ㅠ
사실 오늘은 너무많은 font-family 사용이되어있어 그 것을 줄여주고
하단 썸네일 hover 효과에 문제가 있어서 수정을 하는 작업을 진행하다가
갑자기 예쁜 프리로더를 추가하고 싶어
설치를 하였는데... 막상 달아보니 너무 난잡했다.
또 페이지 로드가 빨라서 그런지
사각형이 다돌기도 전에 잠깐 나왔다 사라져서.. 처음 방문한 사람이 보면 이게 뭐지(?) 라고 생각할 정도라서..
결국에는 sub info에 텍스트로 된 로딩 문구를 추가했다
커서형태(로딩중...l)로 만들려다보니 생각보다 귀찮았는데
그냥 하단바(로딩중 _ )로 추가하니 깔끔하게 완료가 되었다.
See the Pen 사이트 로딩 코드 by JCM (@cocosoft) on CodePen.
사실 마우스 오버 hover 효과를 주기 위해서 오늘 작업을 하려고 했는데..
괜히 시간을 뺏겨버렸다.
마우스 오버가 되면서 투명도가 조절 되어버리면서 텍스트 문구가 보이지 않는 문제가 발생했다.
셀렉터가 다르기 때문에 CSS로는 해당 요소만 속성을 줄 수 있고 다른 요소는 제어가 안된다고 생각해서!!!!!
jQeury를 사용해서 적용하기로 했다.
예전 맨위로 가기 버튼 만들때 사용을 적어놓은 것을 사용했다.
$(document).ready(function(){
$('.frame_related').hover(
function(){
$('.txt_related').css("background-color", rgba( 255, 255, 255, 1 )).css("color", "#000");
}
);
});
깔끔하게 적용 완료+_+
그런데 문제 발생했다... 클릭한 것만 바껴야하는데 모든 요소들이 다바뀌네.. -ㅠ-;;
결국 분해해서 다시 조절을 해야겠다.. 티스토리 ㅠ_ㅠ 그냥 한방에 해버리지 다 복잡하게 분해해놓아서
물론 구조파악하는데 좋긴하다..
그래서 이번에는
1)타이블과 배경 투명도 조절을 하나로 합쳐버리고
2)제목은 2줄까지만 나오고 그이상은 히든시켜버리는 작업을 진행했다.
했는데... 한참을 고생하다가 발견한 CSS 코드 ㅡㅡ;;
.list_related .link_related:hover .txt_related{}
아나...이런식으로 하니 CSS3에서hover로 다른 클래스 제어 까지도 가능하네;;;
결국 몇시간을 끙끙대면서 고생했던 문제는 손쉽게 해결함..
코드 계속 바꾼다고 눈아파 죽겠네 ㅠ_ㅠ..
결국엔 위코드로 손쉽게 해결
마지막 핵꿀팁..
캐시_무시하고 페이지 로드하기
외부 JS파일과 CSS 파일을 수정하면 캐시를 삭제를 해줘야지 정상적으로 바뀌는 것을 확인 할 수 있습니다Ctrl + ⇧Shift + Delete키를 눌러서
삭제를 하고 보는데.. 이 방법을 해도 바로바로 변하지 않는게 보입니다.
아마 티스토리 서버의 캐시 때문인 것으로 보이는데
그럴경우에는 두가지 해결방법이 있습니다.
캐시_무시하고 새로고침
새로고침을 할때 캐쉬를 무시하고 하는 방법입니다.
윈도우의 경우 Ctrl + F5 누르면 됩니다. 익플,크롬,파이어폭스
맥OS의 경우 ⌘ Cmd + Shift + F5 누르면 됩니다. 크롬, 파이어폭스
사파리 브라우저는 Shift + 상단 메뉴의 '새로 고침' 누르면 됩니다.
서버의 캐시 무시하고 불러오기
action=purge를 사용하면 됩니다.
