Tistory/꾸미기3 블로그 카테고리, 글 제목 변경 저번에 이어서 카테고리의 공지사항 분리 및 글 보기의 타이틀을 바꿔주려고 한다. 본문에 테두리를 만들어 넣어줬는데 글 보기를 눌러보니 아래와 같았다. 이게 좋아서 북클럽 스킨을 적용했던 거였는데 테두리를 만들고 나니 혼자 위에 있는게 너무 어색해서 제목 부분도 테두리 안에 넣어주기로 했다. 기존코드는 제목 부분이 absolute로 상단 메뉴바 밑에 top: -1로 고정되고, 본문 내부에 height만큼 패딩을 주는 식으로 되어 있었다. 따라서 패딩을 지우고, top값을 적절히 수정해 테두리와 적당히 떨어뜨려 줬다. 그럼 대략 이런식이 될 텐데 이것도 사진을 잘 고르면 예쁘겠지만 매번 사진을 선별할 수는 없으니 카테고리 부분이 본문 옆에 있길 바랬다. 따라서 카테고리 부분까지 수정해주었다 (HTML부분에서.. 2023. 5. 26. 블로그 카테고리, 본문 경계선 변경 https://developer-talk.tistory.com/ 위의 블로그를 보고 정말 예쁘다고 생각해서 스킨을 이것저것 건드려봤다.(기본 북클럽 스킨) 우선 내가 원하는 곳(본문, 카테고리를 포함한 body영역)에 border 처리를 해주고 겹치는, 쓸모 없는 border를 전부 주석처리해주었다. 벌써 느낌이 사는 것 같다, 하지만 카테고리가 좀 못생겨보인다. 카테고리를 위의 블로그와 같은 느낌으로 바꿔보자. 개발자 도구로 살펴보니 기본 스킨은 #aside 안에 2개의 div(카테고리와 잡다한 것)로 작성되어 있었다. 일단 border부터 넣어주고 제목도 좀 꾸며주자 위에서 경계선을 없애면서 본문과 카테고리 사이에 공간이 좀 남아서 border도 넣어줄 겸 폭을 좀 넓혀주었고 넣고 보니 카테고리 내부.. 2023. 5. 16. 메인 로고 Mouseover시에 색상 애니메이션 주는 법 다른 블로그에서 메인로고에 마우스 오버시 무지개 색상으로 애니메이션을 준 것을 보았다. hover 기능은 확실하고 애니메이션 기능인 것 같아 마우스오버, 애니메이션, 무지개 등의 키워드로 찾아본 결과 a:hover { animation-duration: 3s; animation-name: rainbow; animation-iteration-count: infinite; } @keyframes rainbow { 0% { color: #ff2a2a; } 15% { color: #ff7a2a; } 30% { color: #ffc52a; } 45% { color: #43ff2a; } 60% { color: #2a89ff; } 75% { color: #202082; } 90% { color: #6b2aff; } .. 2023. 5. 12. 이전 1 다음
