😢 티스토리 태그, 왜 내 마음에 안 들지?
기존에 만들어준 태그 디자인이 갑자기 안이뻐보인다.
태그에 border 처리를 했었는데 지저분해 보이는 거다.
그래서 테두리를 지웠더니 잊고 있던 문제가 다시 보였다.
TAG 글자랑 위치가 어긋나 있는 거다.
그리고 태그가 너무 다닥다닥 붙어있으니까 태그 간 구분이 힘들다.
이게 문제가 뭐냐면 티스토리는 태그에 공백이 허용이 되니까 아래처럼 태그가 길어지면 구분하기 어렵다.
그리고 태그가 자동으로 abc, 가나다 순으로 정렬이 되더라.
그동안 내가 원하는 순서대로 태그가 보이게 신경 써서 입력해 왔는데 뻘짓이었다....😢
내 마음대로 순서를 정하지 못할 거면 랜덤으로 섞어버릴 테다ㅋㅋㅋ
✨ 태그 스타일 개선하기: 해결해야 할 3가지 문제
첫 번째, 태그를 랜덤 정렬하기
두 번째, TAG 글자 정렬 수정하기
세 번째, 태그 간격 조정하기
💡 추가 정보
태그 앞에 #을 추가하거나 테두리를 적용하고 싶다면, 아래 링크에서 방법을 확인할 수 있다.
🔗 [Info🔍/HTML&CSS] - [Portfolio 스킨] 11. 티스토리 본문 태그 꾸미기: 콤마(,) 지우기, # 추가
🔧 포트폴리오 스킨 수정하기
✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 또는 HTML 화면으로 들어가면 된다.
✔ 포트폴리오 스킨의 본문 태그는 css의 .area_tag .tag_content 부분이다.
📌 태그 랜덤 정렬하기
JavaScript를 사용해 .tag_content 안의 태그들을 랜덤으로 정렬하게 만든다.
HTML의 </body> 위에 코드를 입력하면 된다.
💡 참고 : 왜 JavaScript를 사용해 랜덤으로 섞어야 하는지 궁금하다면 아래 링크의 포스팅에서 이유를 확인할 수 있다.
[Info🔍/HTML&CSS] - [Portfolio 스킨] 12. 티스토리 검색창 태그 디자인 변경 방법 : 호버 시 테두리 제거, 태그 영역 조절
📝 코드 설명
👉 JavaScript
(1) 웹페이지가 완전히 로드된 후에 JavaScript 실행
window.onload = function () {태그가 아직 생성되지 않았을 때 실행되면 오류가 날 수 있기 때문에 window.onload를 사용한다.
(2) 태그 컨테이너 선택
let tagContainer = document.querySelector(".area_tag .tag_content"); // ①
if (!tagContainer) return; // ②① 태그들을 감싸고 있는 .tag_content 요소를 찾아서 선택한다.
✔ document.querySelector() → HTML에서 특정 요소를 선택하는 함수
② 만약 querySelector()로 찾은 요소가 없으면 코드 실행을 멈춘다.
(3) 태그 배열로 변환 및 랜덤 섞기
let tags = Array.from(tagContainer.children); // ①
for (let i = tags.length - 1; i > 0; i--) { // ②
let j = Math.floor(Math.random() * (i + 1)); / /③
[tags[i], tags[j]] = [tags[j], tags[i]]; // ④
}① 태그 리스트(<a> 태그들)를 배열(Array)로 변환한다.
✔ tagContainer.children → .tag_content 안에 있는 모든 <a> 태그들을 가져옴.
② 알고리즘을 사용해서 태그 순서를 랜덤으로 섞는다.
✔ tags.length → 1부터 0까지 반복 ③ Math.random()을 이용해 0부터 i 사이의 랜덤한 숫자를 생성한다.
④ 배열 tags에서 두 태그의 위치를 바꾼다. (랜덤 섞기)
(4) 기존 태그 제거 후 랜덤 순서 태그 배치
tagContainer.innerHTML = ""; // ①
tags.forEach(tag => tagContainer.appendChild(tag)); // ②① .tag_content 안에 있는 기존 태그들을 모두 지운다.
② 섞인 태그들을 다시 .tag_content에 추가한다.
💻 적용 코드
👉 HTML의</body> 위에 아래 코드를 입력한다.
<Script>
window.onload = function () {
let tagContainer = document.querySelector(".area_tag .tag_content");
if (!tagContainer) return;
let tags = Array.from(tagContainer.children);
for (let i = tags.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[tags[i], tags[j]] = [tags[j], tags[i]];
}
tagContainer.innerHTML = "";
tags.forEach(tag => tagContainer.appendChild(tag));
};
</Script>
👀 적용 모습
새로고침 할 때마다 태그 순서가 바뀌는 걸 확인할 수 있다.
📌 TAG 글자 정렬 바꾸기
📝 코드 설명
👉 CSS 코드
display: flex → TAG 글자와 태그 목록을 가로 정렬
flex-direction: column → 세로 방향으로 정렬
align-items: center → 가운데 정렬
display: block → 제목이 한 줄 전체를 차지하면서
.tag_content 위로 올라감
margin-bottom: 20px → 제목과 태그들 사이의 간격 추가
text-align: center → 가운데 정렬
💻 적용 코드
👉 CSS의 적당한 위치에 아래 코드를 입력한다.
.area_tag {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0 30px 0;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
}
.area_tag .title_tag {
display: block;
margin-bottom: 20px;
font-size: 16px;
font-weight: 900;
color: #333;
text-align: center;
}
👀 적용 모습
TAG 글자가 가운데 정렬되어 있는 걸 확인할 수 있다.
📍 참고
태그 내용도 가운데 정렬하려면 아래 코드를 추가해 주면 된다.
.area_tag .tag_content {
text-align: center;
}
.area_tag .tag_content a {
display: inline-block;
}
📌 태그 간에 간격 주기
📝 코드 설명
👉 CSS 코드
margin: 5px → 태그 앞뒤 공간에 5px 간격 추가, 태그가 여러 줄일 때 위아래 공간에 5px 간격 추가.
💻 적용 코드
👉 CSS의 적당한 위치에 아래 코드를 입력한다.
.area_tag .tag_content a {
margin: 5px;
}
👀 적용 모습
💾 기존 코드
.area_tag {
padding: 40px 0;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
}
.area_tag .title_tag {
float: left;
margin: 0;
padding: 0 40px 0 0;
font-size: 16px;
font-weight: 900;
color: #333;
text-align: center;
padding-top: 6px;
}
.area_tag .tag_content {
overflow: hidden;
}
.area_tag .tag_content a {
color: #333;
text-decoration: none;
margin-left: 5px;
line-height: normal;
}
.area_tag .tag_content a:hover {
text-decoration: underline;
}
.area_tag .tag_content a:first-child {
margin-left: 0
}
