Language/HTML (4) 썸네일형 리스트형 [HTML][CSS] Tistory - 글 제목 위 카테고리 글씨에 링크달기 글 제목 위 카테고리 글씨에 링크달기 Tistory에 작성한 글들을 보다가 보고있던 카테고리로 다시 돌아가려면 왼쪽 상단의 메뉴를 누르고 해당 카테고리를 클릭해야하는게 번거로웠고, 문득 작성한 글 제목 상단부분에 해당 글이 작성되어있는 카테고리를 안내해주는 글자를 클릭하면 해당 카테고리 페이지로 이동해주면 좋겠다는 생각이 들어서 가능하게끔 스킨편집에서 HTML과 CSS를 조금 수정하였습니다 위 그림에서 글 제목위에 있는 해당 카테고리 글씨를 누르면 이동이 가능하게끔 구현을 하겠습니다 먼저, 일반적인 해당 카테고리로 가는 방법은 아래와 같습니다 글을 보다가 이렇게 이동해야하는게 귀찮았습니다 그래서 아래처럼 간단하게 제목 상단의 카테고리 글씨를 클릭하면 이동하게 끔 구현한 모습입니다 [스킨편집] [html .. [HTML][CSS] Tistory - 맨위 맨아래 글쓰기 관리자 버튼 구현 맨위, 맨아래, 글쓰기, 관리자 버튼 구현하기 구현 모습 jQuery 세팅 [관리자] -> [스킨 편집] -> [html 편집] -> [html]의 사이에 코드 추가 $(window).scroll() : 스크롤 움직이면 호출되는 이벤트 $(this).scrollTop() > 100) : 현재 스크롤 위치가 > 100 보다 큰지 검사 $('#topBtn').fadeIn() : topBtn 버튼 보이기 $('#topBtn').fadeOut() : topBtn 버튼 숨기기 $(".btnTop").click() : btnTop 버튼이 클릭되면 호출되는 이벤트 (Callback) $('html, body').animate() : 설정 위치로 속도를 가지고 이동하는 함수 2개의 파라미터를 가짐 { scrollTop.. [HTML] 링크 색상 변경 및 밑줄 없애기 HTML 코드 추가 HTML의 태그 사이에 코드를 추가하면 됩니다 ↓↓ 아래 설정한 링크 예시 [ 설정한 링크 ] 코드 해석 style 소스의 type = text를 제어하는 css로 설정 a:link - 아직 클릭하지 않은 링크 a:visited - 한번 클릭했던 혹은 다녀갔던 링크 a:hover - 링크를 클릭하려고 마우스를 가져갔을 때 상태 decoration - 링크 밑줄 설정 none - 밑줄 없는 상태 underline - 밑줄 있는 상태 a:active - 링크부분에서 마우스를 누르고 있는 동안의 상태 색상은 red, green, black 형태도 가능하고 #006DD7 형태도 가능 [HTML] 클릭 시 페이지내 원하는 위치로 이동하기 글자에 링크를 걸어놔서 클릭 시 동일 페이지내에 원하는 위치로 이동하는 앵커(ankor) 설정방법 내용이 긴 글에서는 맨 상단에 인덱스(index)를 써놔서 해당 위치로 쉽게 이동할 수 있도록 기능을 구현하는게 좋다 구현방법은 간단하게 태그의 id 또는 name 값을 설정하면 가능 1. 태그에 name값을 사용하여 이동하기 맨아래 이동// 클릭할 텍스트 // 이동해서 보여질 위치 2. 태그에 id값을 사용하여 이동하기 맨아래 이동// 클릭할 텍스트 // 이동해서 보여질 위치 태그의 id 나 name은 같은 기능이므로 둘 중 아무거나 사용해도 상관이 없습니다 맨아래 이동하기 여기로 이동 이전 1 다음
