[Portfolio 스킨] 12. 티스토리 검색창 태그 디자인 변경 방법: 호버 시 테두리 제거, 태그 영역 조절

 

😡 검색창에 나타난 태그, 이게 머임?

 

여기저기 둘러보다가 헤더의 검색버튼을 검색창이 크게 뜨는 걸 발견했다.

근데 여기 태그를 호버링하니까 박스테두리가 삐뚤게 씌여지면서 보인다.

이게 뭐야!!!!

 

 

충격, 대충격ㅠㅠ

마우스를 올릴 때 박스 테두리만 나오지 않아도 깔끔해보일 것 같다.

 

 

🔧 포트폴리오 스킨 수정하기

✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다.

 

✔ 포트폴리오 스킨 검색 화면에서 나오는 태그는 큰창일때와 작은창일 때 모양을 각각 다르게 설정할 수 있다.

큰창일때와 작은 창일때

아마도 포트폴리오 스킨이 반응형이라 나뉘는 모양이다.

이 영역의 태그 이름은 area_popup .tag_zone로 지정돼 있는 것 같다.

 

 

📌 호버 시 박스 지우기

📝 코드 설명

👉 CSS 코드

border: 1px solid #FF90BC → 호버할 때 박스 테두리를 1px 두께의 #FF90BC색 실선으로 설정.

border 값을 삭제하면 테두리를 없앨 수 있다.

 

 

💻 적용 코드

👉 CSS의 적당한 위치에 아래 코드를 입력한다.

.theme_pink .thema_apply .box_tag a:hover {
  color: #FF90BC;
}

 

 

 

👀 적용 모습

 

 

 

📌 회색 테두리 지우기 & 태그 영역 크기 조절

📝 코드 설명

👉 CSS 코드

display: inline-block → 요소가 블록처럼 크기 지정, 다른 요소와 나란히 배치

width: 50% → ① .tag_zone 영역을 .area_popup 영역의 50%로 설정 padding-right: 50px → ② .tag_zone 영역 옆에 50px만큼 공간 지정 min-height: 150px → ③ 내용(태그)이 적더라도 .tag_zone의 최소 높이는 150px box-sizing: border-box → 요소의 크기를 계산할 때 padding과 border 값 포함. vertical-align: top → ④ 세로로 정렬될 때, 다른 요소들(여기선 최근글)의 위쪽에 맞춰서 정렬}

 

💻 적용 코드

👉 CSS의 적당한 위치에 아래 코드를 입력한다.

.area_popup .tag_zone {
  display: inline-block;
  width: 50%;
  padding-right: 50px;
  min-height: 150px;
  box-sizing: border-box;
  vertical-align: top;
}

.area_popup .tag_zone a {
  display: inline-block;
  margin: 0px 10px 15px 0px;
  padding: 5px 10px 10px 0;
  font-size: 16px;
  color: #333;
  text-decoration: none;
}

.area_popup .tag_zone a:hover {
  color: #FF90BC;
}

 

 

👀 적용 모습

 

728x90

 

 

📍 참고(랜덤 선택자 대신 자바스크립트를 선택하는 이유)

이 부분의 태그는 랜덤으로 출력돼 있다.

HTML을 보면 box_tag 안에 <a> 태그가 <s_random_tags>로 감싸여있기 때문이다.

<!-- 태그 -->
<div class="tag_zone">
	<h3 class="title_sidebar">태그</h3>
		<div class="box_tag">
			<s_random_tags><a href="" class=""> </a>
			</s_random_tags>
		</div>

 

 

티스토리의 스킨 가이드를 확인해보면 랜덤 태그를 제공해주고 있다.

하지만 본문이나 태그 클라우드의 tag_zone <a>는 <s_tag_rep>를 사용하기 때문에 랜덤 출력이 안된다.

태그	기능
<s_tag_rep>	사용자가 입력한 모든 태그 표시
<s_random_tags>	랜덤으로 선택된 일부 태그 표시

 

 

 

💾 기존 코드

.theme_pink .thema_apply .box_tag a:hover {
  border: 1px solid #FF90BC;
  color: #FF90BC;
}


.area_popup .tag_zone {
  display: inline-block;
  width: 50%;
  padding-right: 50px;
  min-height: 150px;
  box-sizing: border-box;
  vertical-align: top;
}

.tag_zone a {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: solid 1px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  color: #333;
  text-decoration: none;
}

.tag_zone a:hover {
  border: solid 1px #4167d9;
  color: #4167d9;
}


@media screen and (max-width: 1023px) {
  .area_popup .tag_zone a {
    border: none;
    padding: 5px 10px 5px 0;
    font-size: 16px;
  }

  .area_popup .tag_zone a:hover {
    border: none;
  }

  .area_popup .tag_zone, .area_popup .tag_board {
    width: 100%;
  }
}