HTML(26)
-
[Portfolio 스킨] 27. 홈 화면의 안 쓰는 커버 커스텀 1탄: 갤러리 HTML 구조 분석부터 시작!
📌 커버 커스텀 도전기 : 갤러리 HTML 구조 분석!홈 화면에 안 쓰는 커버를 커스텀해서 활용하고 싶어졌다.내가 포트폴리오 스킨을 사용하는 가장 큰 이유가 슬라이더 커버 때문이다.반면 와이드 패널은 내 블로그 스타일과 맞지 않아서 전혀 쓸 일이 없어 보인다. 와이드 패널은 배너처럼 가로로 길쭉한 형태로 사진이나 작업물을 자주 올리는 블로그에는 잘 어울릴 듯하다.하지만 내 블로그에서는 활용도가 떨어진다.갤러리 커버는 모바일 화면에서 작게 보여서 손이 잘 안 간다.결국 현재 섬네일 리스트와 리스트형 커버만 사용 중인데 너무 단조로워 보여서 다른 커버를 커스텀해보려고 한다. 문제는...코딩을 배운 적이 없다는 것! 😥어디서부터 손을 대야 할지 감이 안 와서 일단 갤러리 HTML 구조부터 분석해 보기로 ..
2025.02.28 -
[Portfolio 스킨] 23. 자동 목차로 블로그 가독성 200% 업! (1탄: HTML/JavaScript 편)
🤔 내용의 흐름을 파악하기 쉽게 자동 목차를 만들자.원래는 목차를 사용하지 않다가 이 블로그를 가장 많이 사용하는 내가 너무 불편한 거다.디자인은 둉이님이 올려주신 코드를 기반으로 내가 필요한 부분을 수정해서 만들었다.기본적인 설명도 둉이님 블로그에 자세히 올라와 있다. ✨ 자동 목차 커스텀 목표 3가지첫 번째, 본문 목차의 디폴트는 펼쳐진 상태이고 접으면 목차 내용 영역이 완전히 숨겨질 것.두 번째, 현재 본문에 보이는 소제목이 오른쪽 목차에 표시되고 목차가 길면 목록 가운데를 유지할 것.세 번째, 오른쪽 본문 목차 버튼은 오른쪽 목차와 별도로 생성해서 위치를 고정해 둘 것. 💡 자동 목차가 있으면 좋은 점✔ 한눈에 보기 편하다. 긴 글을 읽을 때 어디에 무슨 내용이 있는지 쉽게 파악할 수 있다.✔..
2025.02.20 -
[Portfolio 스킨] 22. 티스토리 태그 클라우드 디자인 변경 방법: 랜덤 정렬, 간격 조정, 정렬 수정
😢 단조롭고 못생긴 티스토리 태그 클라우드, 어떻게 이쁘게 만들지?태그가 박스에 쌓여있으니 뭔가 답답해보이고 심심하다.기존에 수정할 땐 그래도 이뻐보였던 것 같은데 질린건가ㅠㅠ색도 바꿔보고 크기도 바꿔보고 이것저것 시도해 봤는데 마음에 안 든다.무엇보다 태그 목록만 왼쪽 정렬인 게 진짜 진짜 별로다!!! ✨ 태그 클라우드 스타일 개선하기: 해결해야 할 3가지 문제첫 번째, 태그 사용 빈도별 크기 & 색상 지정하기두 번째, 태그 목록 가운데 정렬하기세 번째, 태그 랜덤 정렬하기 💡 추가 정보 : 테두리 모양이나 빈도별 태그 컬러를 수정하고 싶다면, 아래 링크에서 방법을 확인할 수 있다.🔗 [Info🔍/HTML&CSS] - [Portfolio 스킨] 10. 태그 클라우드 꾸미기 🔧 포트폴리오 스..
2025.02.18 -
[Portfolio 스킨] 21. 티스토리 새 글 발행 표시 N 아이콘 변경 방법: 카테고리, 모바일 글 목록 New 표시
😢 새 글을 발행할 때마다 보이는 New 아이콘, 너무 안 이뻐 쨍한 주황색의 네모난 뉴 표시가 파스텔톤으로 가득한 내 블로그랑 안 어울린다ㅠ 못 바꾸는 건 줄 알았는데 혹시나 싶어서 검색해 보니 여러 블로그에서 아이콘을 바꿔 사용 중이더라.문제는 카테고리를 바꾼 곳은 많았는데 글 목록의 새 글 아이콘을 바꾼 블로그를 못 찼았다.왜 그럴까 생각해 봤는데 카테고리의 새 글 아이콘은 이름이 지정돼 있는데 글 목록의 새 글 아이콘은 이름이 없었다.아니면 다른 스킨은 글 목록에 새 글 아이콘이 안 떠서 건들지 않았을 수도 있다.그치만 내가 사용하는 포트폴리오 스킨에는 뜨니까ㅠㅠ통일성을 위해선 둘 다 바꾸던다 둘다 그대로 두던가 해야 하는데, 저 주황색이 아무리 봐도 안 이쁘다..특히 글 목록의 아이콘은 정사각..
2025.02.15 -
블로그 꾸미며 배운 HTML/CSS 기록장 📖
🚀 블로그 스킨 수정하면서 배운 HTML/CSS 공유합니다! CSS가 뭔지도 몰랐던 코딩 알못이었는데 블로그 스킨을 어느정도 수정할 정도가 됐다.😅정식으로 공부한 건 아니고 인터넷을 검색하면서 배운 거라 여전히 검색 없이는 불가능하지만... 그동안 블로그를 꾸미면서 알게된 HTML 태그, CSS 속성 등 각종 이론을 한 곳에 모아봤다.앞으로도 계속해서 추가할 예정이다. 혹시 추가가 필요하거나 잘못된 부분이 있다면 편하게 댓글로 알려주세요! 😊 ✅ HTML📌 ID 선택자HTML에서 요소를 특정하는 방법에는 크게 ID와 클래스 두 가지가 있다고 한다.id="main" → 하나의 요소만 가질 수 있다. 즉 고유한 값!class="box_header" → 여러 개의 요소에서 쓸 수 있다. 즉, 공통 스..
2025.02.14 -
[Portfolio 스킨] 19. 티스토리 본문 태그 디자인 변경 방법: 랜덤 정렬, 간격 조정, 정렬 수정
😢 티스토리 태그, 왜 내 마음에 안 들지? 기존에 만들어준 태그 디자인이 갑자기 안이뻐보인다.태그에 border 처리를 했었는데 지저분해 보이는 거다.그래서 테두리를 지웠더니 잊고 있던 문제가 다시 보였다.TAG 글자랑 위치가 어긋나 있는 거다. 그리고 태그가 너무 다닥다닥 붙어있으니까 태그 간 구분이 힘들다.이게 문제가 뭐냐면 티스토리는 태그에 공백이 허용이 되니까 아래처럼 태그가 길어지면 구분하기 어렵다. 그리고 태그가 자동으로 abc, 가나다 순으로 정렬이 되더라.그동안 내가 원하는 순서대로 태그가 보이게 신경 써서 입력해 왔는데 뻘짓이었다....😢내 마음대로 순서를 정하지 못할 거면 랜덤으로 섞어버릴 테다ㅋㅋㅋ ✨ 태그 스타일 개선하기: 해결해야 할 3가지 문제첫 번째, 태그를 랜덤 정렬하기..
2025.02.09