티스토리 꾸미기 | 프로필 카드 꾸미기 및 삭제 방법

 

티스토리 '프로필 카드' 꾸미기 및 삭제 방법.

티스토리 '프로필 카드'는 티스토리 블로그에서 사용자의 정보와 프로필을 간략하게 보여주는 작은 카드 형식의 UI를 말합니다.

 

이 카드는 블로그의 하단에 표시되며, 주로 사용자의 프로필 사진, 사용자명, 소개 문구 등을 보여줍니다.

이를 통해 방문자들은 블로거에 대한 간단한 정보를 쉽게 파악할 수 있습니다.

최근 '프로필 카드' 기능이 기존에 모바일 환경에서만 보이던 것을 업데이트를 통해 PC 환경에서도 보이도록 설정되었습니다.

 

업데이트된 '프로필 카드'가 내가 사용하고 있는 스킨과 어울린다면 크게 상관없지만 그러지 않으신 분들은 조금 꾸며보거나, 보이지 않도록 수정하는 것이 좋겠습니다.

 

'프로필 카드' 꾸미기 미리보기.

기존의 밋밋한 '프로필 카드'를 아래처럼 스타일을 입혀주거나, 숨기기로 삭제할 수 있습니다.

1. 기존의 밋밋한 '프로필 카드'.

2. '프로필 카드' 스타일 업.

3. '프로필 카드' 삭제.(숨기기)

728x90

 

'프로필 카드' 스타일.

'프로필 카드'의 스타일 업이나 숨기기는 CSS만 추가하면 되는 간단한 작업이니 크게 어려울 게 없습니다.

 

먼저 CSS 탭으로 이동합니다.

1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

---

 

2. 아래처럼 CSS 코드를 복사 후 CSS탭 맨 아래에 붙여 넣어주고 '저장'을 눌러 마무리합니다.

※ 테두리의 모양이나 색상, 굵기 등 은 수정이 가능하나 배경색은 제 실력으로는 변경이 불가능하네요.

---

 

3. '프로필 카드' 스타일 업 CSS 코드 복사하기

CSS 코드 1 (간단수정)

/* 프로필 카드 꾸미기 */
div[data-tistory-react-app="Namecard"] {
    display: block;
}
.tt_box_namecard{
    border-radius: 20px 20px 20px 20px; /* 테두리 모양 */
    border: 1px solid #ddd ; /* 테두리 굵기 */
    margin: 0px 5px; /* 외부 여백 상하, 좌우 */
}
/* 프로필 카드 꾸미기 끝 */

 

CSS 코드 2 (상세수정)

/* 프로필 카드 꾸미기 */
div[data-tistory-react-app="Namecard"] {
	display: block;
}

.tt_box_namecard{
	display: flex;
	justify-content: space-between;
	position: relative;
	border-radius: 0px 10px 0px 10px; /* 테두리 모양 */
	border: 1px solid #e5e5e5; /* 테두리 굵기 */
	margin: 10px 1px 20px 1px; /* 외부 여백: 상, 우, 하, 좌 */
	background-color: #fff; /* 프로필 카드 배경 색상 */
	min-height: 180px; /* 프로필 카드 세로 크기 */
}

/* 블로그 제목 */
.tt_box_namecard .tt_tit_cont {
	font-size: 20px; /* 글 크기 */
	font-weight: bold; /* 글 굵기 */
	color: #4272d7; /* 제목 색상 */
}

/* 블로그 설명 */
.tt_box_namecard .tt_desc {
	font-size: 16px; /* 글 크기 */
	color: #999; /* 설명 텍스트 색상 */
}

/*프로필 로고 */
.tt_thumb_g {
	border-radius: 0%; /* 프로필 이미지를 둥글게 */
}
/* 프로필 카드 꾸미기 끝 */

728x90

 

'프로필 카드' 삭제.

1. 아래처럼 CSS 코드를 복사 후 CSS탭 맨 아래에 붙여 넣어주고 '저장'을 눌러 마무리합니다.

• '프로필 카드' 스타일 업 코드를 넣으셨다면 코드 삭제 후 넣어주세요.
• 아래 코드를 이용하면 '프로필 카드'를 삭제하는 게 아니고 숨기기를 하는 겁니다.
• 추가한 CSS 코드를 삭제하면 기존 '프로필 카드'는 원복 됩니다.

---

 

3. '프로필 카드' 삭제하기 CSS 코드 복사하기

/* 프로필 카드 삭제 */
div[data-tistory-react-app="Namecard"] {
    display: none;
}
/* 프로필 카드 삭제 끝 */

---

 

마무리

이렇게 간단하게 '프로필 카드' 꾸미기 및 삭제하기에 대해 알아봤습니다. 이번 코드는 CSS만 추가하면 되는 코드이기 때문에, 북클럽 스킨이 아닌 다른 스킨에도 적용할 수 있습니다.

 

'프로필 카드' 꾸미기 및 삭제하기를 통해 나만의 개성 있는 블로그를 만드는데 도움이 되길 바랍니다.

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"