FRONT-END110

• 

  (티스토리) 스크롤시 부드럽게 이동하기 이 방법은 최신 브라우저가 아니면 적용이 되지 않을 수 있고 브라우저 설정에 따라 액션이 달라질 수 있으므로 아직은 완전한 방법이 될 수 없습니다. 그래도 간단히 적용하고 싶으신 분들은 하셔도 괜찮습니다. 참고로 CCZ스킨은 이 방법을 이용하였습니다. 스크롤 시 부드럽게 이동 CSS 우선 방법은 아주 간단합니다. HTML편집기로 들어가서 CSS에디터를 선택하여 아래 코드를 넣어줍니다. /*부드러운 스크롤 효과*/ html { scroll-behavior: smooth; } 브라우저별 호환성 표 jQuery 티스토리 스킨은 대부분 jQuery를 사용하고 있기 때문에 바로 사용할 수 있습니다. 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > HTML 에디터 에 들어갑니다. 그리고 body태그 안쪽.. FRONT-END/CSS 2021. 4. 14.

• 

  (티스토리) 본문에 TOC 목차 넣기 Toc toc 란 toc는 table of contents를 의미하고, markdown으로 작성한 글의 header를 모아서 보여주는 용도로 사용됩니다. 제가 적용한 toc는 tocbot이고, 기본 스타일도 깔끔하지만 제 블로그 스킨에 맞게 CSS를 건드려 봤습니다. toc code 적용 방법 당연히 tistory skin을 html로 수정을 해야하기 때문에 약간의 html, javascript개발에 대한 지식이 필요합니다. 아래 각 부분을 위치에 맞게만 넣고, javascript 부분만 조금 수정을 하면 크게 문제 없이 적용 가능할 것 같습니다. 이 외에도 toc에 제목을 넣어주기 위해 tistory 기본 스킨 부분을 수정한 것도 있고, 브라우저 개발자 도구로 하나씩 찾아가면서 뜯어 고친 부분도 몇 있.. FRONT-END/CSS 2021. 4. 14.

• 

  (티스토리) 마우스 오버시 썸네일이 움직이는 애니메이션효과 이번에는 마우스를 이미지에 올리면 애니메이션 효과를 가지고 좌우로 움직이는 코드를 만들어 보겠습니다. 마우스 오버 시 애니메이션 효과 우선 제가 적용한 부분은 메인화면의 썸네일 부분입니다. TIP 사용자 스킨에 따라 썸네일의 class가 다르기 때문에 크롬에서 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다. 제 스킨의 경우는 thumbnail이네요. 여러분들도 정확한 위치를 찾으셨다면, 우선 애니메이션을 만들어주셔야 합니다. 적용 하기 CSS /*썸네일 애니메이션*/ @keyframes post-ani { 25% { transform: rotate(2deg) scale(1.01); } 50% { transform: rotate(0deg) scale(1); } 75% { tran.. FRONT-END/CSS 2021. 4. 14.

• 

  (티스토리) 사용자 테마에 따라 다크모드 적용하기 이번에는 사용자가 다크모드인지 라이트모드인지에 따라 티스토리 블로그의 스킨을 변경해보려고 합니다. 우선 제가 꾸민 화면부터 보여드릴께요 :) 라이트모드 다크모드 다크모드로 지정하면 라이트와는 다르게 색이 다르게 보이게 됩니다 :) 저는 맥에서 낮에는 라이트모드, 밤에는 다크모드로 자동으로 설정되게 해놨는데 블로그도 이방법을 사용하면 자동으로 스킨이 변경되는 방식입니다. 이것을 적용하려면 CSS 를 이해하고 계셔야 합니다. 사용 방법 /* 다크 모드 */ @media (prefers-color-scheme: dark) { #main { background-color: #555; } ... } 위 코드는 CSS에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해 다크모드 일때만 해당 코드를 실행하는 구조.. FRONT-END/CSS 2021. 4. 14.

• 

  (티스토리) 페이지 스크롤시 이미지 Fade In 효과주기 본문을 스크롤하면 이미지가 바로바로 나오게 되는데 문득 생각이 든 게 스크롤 위치에 따라 이미지가 스르륵 하고 나타나게 하고 싶다는 생각이 들었습니다. 그래서 이번에는 페이지 스크롤시 이미지 Fade In 하는 방법에 대해 알아보겠습니다. 일단 이 기능을 사용하려면 Javascript를 작성해줘야 합니다. Fade In 효과 페이지가 스크롤 되면 이미지가 스르륵 하고 나오는 효과를 사용하려면 아래와 같이 작성하면 됩니다. CSS .image { opacity:0; } 이미지의 opacity(투명도) 를 0으로 설정해줘야 합니다. Javascript $(document).ready(function() { $(window).scroll( function(){ $('image').each( function(i.. FRONT-END/CSS 2021. 4. 14.