Project History/- Tstory Blog5 [Tstory Blog] Web Font 변경, cover-list 클래스 css 설정 KT AIVLE School 의 기자단을 하기 전 멈췄던 블로그를 정리했다. 현재는 취향이 변해서, 블로그를 다시 시작함에 앞서 카테고리를 정리하고, css를 건드려보았다. .cover-list ul li:hover { transition: all 0.15s; transform: translateY(-6px); box-shadow: 0 2px 6px rgba(0,0,0,0.2); } transition은 부드럽게 적용이 안되어서 0.15s 를 적용 transform: translateY(-6px); 로 호버시 위로 상승 box-shadow: 0 2px 6px rgba(0,0,0,0.2); 로 상승한 list 요소 뒤에 그림자 생성 홈에서 게시물을 선택하는 재미를 주기 위해 수정했다. /* Web Font.. 2023. 2. 11. 블로그 a 태그 hover 효과 적용 (transition 적용) 상단 카테고리의 hover 효과는 부드러워져서 좋았으나,게시글과 사이드바의 카테고리도 통일성을 줘야 한다는 판단이 들었다. transition을 주고, 뿐만 아니라 카테고리는 x축으로 움직이는 효과도 넣을 것이다. 기존 코드 a, a:link {text-decoration:none; color:#555;} a:visited {text-decoration:none;} /* hover 효과 - 밑줄 생성, 및 색상 변경 */ a:hover, a:focus { text-decoration:underline; color: #FEB802; } a:active {text-decoration:none;} /* ------------------------- a 태그 끝 ------------------------- *.. 2022. 5. 28. 쉽게 블로그 다크 모드 적용하기 - 다른 블로그들의 경우 background-color 가 black인 경우가 있다. 보통 시각장애인을 위해서 검은 배경과 흰 글자는 가독성을 높이기 때문에 많이 이용되는 것 같다. 그리고 흰 배경은 블루스크린으로 인해 눈이 피로해지는 경우가 있다. 소스코드 아래의 두가지 코드들 중 하나를 넣으면 적용이 됩니다. HTML CSS :root { color-scheme: dark; } 후기 네이버 웨일의 경우 다크모드를 독립적으로 적용했다가 풀고 하는 기능이 있는데, 네이버 웨일의 기능의 경우엔 텍스트의 색상이 반전되면서도 위계가 뒤집히지는 않았는데 소스코드를 적용했을 땐 font color의 위계가 뒤집혀서 연한 글자가 진해지고 진한 글자가 연해지는 현상이 보였다. 해결하고픈 마음이 생겨서 가볍게 찾아본 .. 2022. 5. 26. 티스토리 블로그 코드 수정하기 - 2. 카테고리 transition 적용하기 처음 블로그를 열었을 때 다양한 플러그인과 광고 티스토리만의 어떤 서버 연결 등 처리가 느려서 그런지 css의 적용이 느렸다. 그리고 hover 효과를 주었었는데 깜박깜박 거리는게 사용자 경험이 좋지 않다고 판단이 되어서 transition을 부드럽게 주려고 마음먹었다. #gnb ul li a { position: relative; display: block; text-decoration: none; padding: 22px 4px 24px; color: #777; font-weight: bold; } #gnb ul li a:hover, #gnb ul li.current a { color: #FEB802; // 색 바꿈 } #gnb ul li.current a:after, #gnb ul li a:hove.. 2022. 5. 24. 티스토리 블로그 코드 수정하기 - 1. 현재까지 한 것들 현재까지 티스토리 블로그를 만지작 하면서 코드들을 파악하고 수정해 나갈 것이다. 개인 블로그를 이쁘게 꾸미는 것에 취미가 있으니 계속 글을 쓰면서 블로그를 이쁘게 바꾸면 되지 않을까 싶다! 나중에는 직접 디자인한 블로그를 만들어서 다른 용도로 운영을 해보지 않을까 싶다. 일단 코드들을 수정 전에 했던 작업들은 광고 설정, html 태그 삽입 구글서치콘솔 네이버웹마스터 카테고리 추가 및 정리 푸터 수정 저작권 설정 a태그의 hover 컬러 적용 robots.txt 파일 넣기 플러그인 적용 메뉴바 입력 etc... 2022. 5. 24. 이전 1 다음
