Info🔍 (16) 썸네일형 리스트형 [Portfolio 스킨] 19. 티스토리 본문 태그 디자인 변경 방법: 랜덤 정렬, 간격 조정, 정렬 수정 😢 티스토리 태그, 왜 내 마음에 안 들지?기존에 만들어준 태그 디자인이 갑자기 안이뻐보인다.태그에 border 처리를 했었는데 지저분해 보이는 거다.그래서 테두리를 지웠더니 잊고 있던 문제가 다시 보였다.TAG 글자랑 위치가 어긋나 있는 거다.그리고 태그가 너무 다닥다닥 붙어있으니까 태그 간 구분이 힘들다.이게 문제가 뭐냐면 티스토리는 태그에 공백이 허용이 되니까 아래처럼 태그가 길어지면 구분하기 어렵다.그리고 태그가 자동으로 abc, 가나다 순으로 정렬이 되더라.그동안 내가 원하는 순서대로 태그가 보이게 신경 써서 입력해 왔는데 뻘짓이었다....😢내 마음대로 순서를 정하지 못할 거면 랜덤으로 섞어버릴 테다ㅋㅋㅋ ✨ 태그 스타일 개선하기: 해결해야 할 3가지 문제첫 번째, 태그를 랜덤 정렬하기두 .. [Portfolio 스킨] 15. 복사 버튼까지! 맥 스타일 코드 블록 만들기 (1탄 : HTML/JavaScript 편) 🚀 코드 블럭을 예쁘고 눈에 띄게 바꾸자!블꾸 과정을 올리다 보니까 코드 블록이 굉장히 밋밋하다.기본 코드 블록은 회색에 초록 글시라 가독성이 떨어지고 인용이랑 헷갈리기 쉽다.그래서 좀 더 예쁘고 눈에 띄는 디자인을 적용하기로 했다. 가장 간단하게 코드블록을 바꾸는 방법은 플로그인 설정이다.코드 문법 강조 플러그인만 써도 눈에 띄게 이뻐진다. 플러그인만 적용한 코드 블록 하지만 다른 블로그들을 보다보니까 특이한 스타일의 코드 블록을 적용하고 있는 게 보였다.애플 유저가 아니라서 몰랐는데 맥 형식이라더라.아무튼 이쁘니까 적용해보고 싶었는데 둉이님이 블로그에 자세한 설명과 코드를 알려주셔서 따라 해봤다. 🌟 맥 스타일 코드 블록의 장점1. 깔끔한 UI로 가독성이 좋아진다.2. 복사 버튼이 있어서 코드 복.. [Portfolio 스킨] 12. 티스토리 검색창 태그 디자인 변경 방법: 호버 시 테두리 제거, 태그 영역 조절 😡 검색창에 나타난 태그, 이게 머임?여기저기 둘러보다가 헤더의 검색버튼을 검색창이 크게 뜨는 걸 발견했다.근데 여기 태그를 호버링하니까 박스테두리가 삐뚤게 씌여지면서 보인다.이게 뭐야!!!! 충격, 대충격ㅠㅠ마우스를 올릴 때 박스 테두리만 나오지 않아도 깔끔해보일 것 같다. 🔧 포트폴리오 스킨 수정하기✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다. ✔ 포트폴리오 스킨 검색 화면에서 나오는 태그는 큰창일때와 작은창일 때 모양을 각각 다르게 설정할 수 있다.아마도 포트폴리오 스킨이 반응형이라 나뉘는 모양이다.이 영역의 태그 이름은 area_popup .tag_zone로 지정돼 있는 것 같다. 📌 호버 시 박스 .. [Portfolio 스킨] 11. 티스토리 본문 태그 꾸미기: 콤마(,) 지우기, # 추가, 밑줄 제거, 호버 효과 설정 😢 본문 태그 깔끔하게 만들기글꼴을 변경하면서 본문 밑에 보이는 태그 위치가 조금 어그러졌다.신경쓰여서 동일하게 바꾸고 싶어서 이것저것 건들여봤다.콤마가 지저분해보여서 콤마를 지우고 테두리를 씌우고 호버했을 때 밑줄을 없앴다.앞에 #을 붙여서 더 태그처럼 보이게 할까도 고민해봤는데 이것 역시 마음에 안든다. 2월 14일 추가 내용분명히 이 글을 작성할 때만 해도 본문 태그에 콤마가 기본으로 있었는데..콤마를 지우는 자바스크립트를 지워도 콤마가 나타나지 않는다. 가능성은 3가지.스킨 자체가 업데이트되어서 수정이 됐거나,내가 html이랑 css를 수정하는 과정에서 콤마를 지우는 무언가를 만졌거나,일시적인 오류로 내 블로그에서만 안보이거나.😂 혹시 제 블로그 본문 태그에 콤마가 보인다면 댓글로 알려주세요... [Portfolio 스킨] 10. 태그 클라우드 디자인 수정 방법: 테두리 변경, 호버 효과 설정, 태그 색상 지정 😢 못생긴 티스토리 태크 클라우드포트폴리오 스킨은 레터 스킨과는 다르게 태그 클라우드의 태그가 이미 박스로 쌓여있다.그래서 내가 안건들여도 되는 줄 알았는데 왠걸?호버했을 때 색이 왜 뜬금없이 파란색인걸까?핑크 테마인데...그래서 색을 바꾸고 박스 테두리도 조금 둥글게 바꿨다. ✨ 태그 클라우드 스타일 개선하기: 해결해야 할 2가지 문제첫번째, 태그 테두리를 둥글게 수정하기두번째, 태그 호버 시 색상 수정하기 🔧 포트폴리오 스킨 수정하기 ✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다.✔ 포트폴리오 스킨의 태그 클라우드는 css의 .tag_zone 부분이다. 📌 태그 테두리 & 호버 효과📝 코드 설명bord.. [Portfolio 스킨] 08. 블로그 꾸미기 필수템? 상단 프로그레스 바 추가하기 🤔 남들 하는 건 다 따라 해보고 싶어다들 어떻게 블로그를 꾸몄는지 궁금해서 진짜 여러 곳을 방문해 봤다.공통적으로 많았던 게 toc(자동목차)와 상단 프로그레스 바였다.상단 프로그레스 바는 스크롤을 얼마나 내렸는지 표시해 주는 역할을 한다.스크롤 바가 얼마나 내려갔는지를 통해서도 확인할 수 있지만 프로그레스 바가 있으면 더 직관적으로 보이는 것 같다.물론 디자인면에서도 이쁘더라.이게 나의 최종 목적ㅋㅋ ✨ 상단 프로그레스 바 만들기: 목표는 단 2가지첫 번째, 스크롤을 내린 만큼 프로그레스바 이동하기두 번째, 컬러풀한 색 선택 🔧 포트폴리오 스킨 수정하기 ✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 또는 HTML 화면으로 들어가면 된.. [Portfolio 스킨] 06. 블로그 글꼴 변경으로 분위기 업 (feat. 눈누 웹폰트) 😢 블로그 분위기를 바꾸기 위해 글꼴을 바꿔보자고딕은 가독성이 좋지만... 내 취향의 글씨가 아니다.어차피 정보 공유 블로그로 만들 생각이 아니니까 가독성이 조금 나쁘다고 문제될 건 없을 것 같다.무엇보다 내 눈에 보이는 글씨가 이뻐야 포스팅할 맛이 나지 않을까? 원하는 글꼴은 레터 스킨 때 이미 찾아놨다.가장 많이 사용하는 사이트는 눈누(https://noonnu.cc/index)다.귀여운 글꼴이 많아서 하나로 통일은 못하고ㅎㅎㅎ여기저기 다른 느낌으로 적용하기로 했다.뭐 무슨 최적화?몰라, 그런거ㅋㅋㅋㅋ ✨ 글꼴 선택 시 주의해야 할 2가지첫 번째, 저작권 확인하기두 번째, 깨지지 않는 폰트 찾기 💡 참고글꼴이 마음에 들어도 적용해보면 깨지는 현상이 나타는 폰트가 꽤 있다.특히 큰 글씨는 문제없는데.. [Portfolio 스킨] 05. 티스토리 스킨에 스크롤 이동 버튼 구현 방법: 위로 가기, 아래로 가기 😢 스크롤 내리는 거 너무 귀찮아.글을 읽을 때 제일 귀찮은 게 스크롤하는 것.특히 맨 위로 올리거나 내릴 때!!위로 가기 버튼이랑 아래로 가기 버튼이 있으면 좋겠다는 생각을 한다.나만 귀찮은게 아닌지 여러 블로그에서 해결을 위해 이런저런 기능들을 만들었더라.나는 제이스토리님의 포스팅에서 본 스크롤 위치에 따라서 버튼의 모양이 바뀌는 방법에서 아이디어를 얻었다. ✨ 페이지 위로 가기 / 아래로 가기 버튼 만들기: 구현할 3가지 목표첫 번째, 버튼에 사용하는 이미지는 1개두 번째, 처음에는 버튼이 안 보이고 스크롤이 움직이기 시작할 때 버튼이 나타나기세 번째, 스크롤을 아래로 내리면 아래로 가기 버튼, 스크롤을 위로 올리면 위로 가기 버튼으로 자동 변환되기 🔧 포트폴리오 스킨 수정하기 ✔ 티스토리 스킨.. 이전 1 2 다음
