Info🔍/HTML&CSS
[Portfolio 스킨] 11. 포스팅 본문 태그 꾸미기
별이의 라이프ㆍ2024. 12. 7. 05:35
글꼴을 변경하면서 본문 밑에 보이는 태그 위치가 조금 어그러졌다.
신경쓰여서 동일하게 바꾸고 싶어서 이것저것 건들여봤다.
콤마가 지저분해보여서 콤마를 지우고 테두리를 씌우고 호버했을 때 밑줄을 없앴다.
앞에 #을 붙여서 더 태그처럼 보이게 할까도 고민해봤는데 이것 역시 지저분해보여서ㅠㅠ
스킨 수정 과정
,(콤마) 지우기
1. 편집화면으로 들어간다.
- 꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집
2. HTML 편집 화면으로 들어간다.
- HTML 편집
- <body>와 </body> 사이에 아래 코드를 입력한다.
<!-- 본문 태그 쉼표 제거 s -->
<script>
$(function() {
$('.tag_content').each(function () {
var comma = $(this).html(
);
$(this)
.html(
comma.replace(/,/g, '')
);
});
});
</script>
<!-- 본문 태그 쉼표 제거 e -->
적용 모습
콤마가 없어져 깔끔해진 모습이다.
하지만 띄어쓰기와 태그를 구별하기 힘들어서 구분하기 위한 무언가를 꾸며야 한다.
내가 알아본 방법에는 태그 앞에 #을 표시하는 것과 태그 클라우드처럼 테두리를 씌우는 방법이다.
태그 앞에 # 추가하기
1. CSS 편집 화면으로 들어간다.
- CSS 편집
- 적당한 위치에 아래 코드를 추가한다.
/* 본문 태그 앞에 # 추가하기 */
.area_tag .tag_content a:before {
content: '#';
padding-right: 2px;
}<참고 : 별깡솔님>
적용 모습
#을 넣어서 구분하기는 편해졌다.
근데 뭔가 지저분해보이는 느낌이다ㅠㅠ
태그에 테두리 추가하기
1. CSS 편집 화면으로 들어간다.
- CSS 편집
2. .area_tag .tag_content a { 위치를 아래 코드처럼 수정한다.
.area_tag .tag_content a {
color: #333;
text-decoration: none;
margin-left: 5px;
margin-bottom: 7px;
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 5px;
padding: 5px 10px;
display: inline-block;
}
태그 호버 시 밑줄 지우기
1. CSS 편집 화면으로 들어간다.
- CSS 편집
2. .area_tag .tag_content a:hover { 위치의 코드를 아래처럼 수정한다.
.area_tag .tag_content a:hover {
text-decoration: none;
border: solid 1px #FF90BC;
color: #FF90BC;
}
적용 모습
훨씬 깔끔해진 느낌이다.
제목이랑 태그 내용의 위치가 어긋난 것도 테두리를 만들어서 대강 맞쳐졌다.
코드 수정이 끝났다면 적용을 누른다.
기존 코드
.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;
}
'Info🔍 > HTML&CSS' 카테고리의 다른 글
| [Portfolio 스킨] 13. 검색창에서 보여지는 최근글, 아카이브 꾸미기 (0) | 2024.12.09 |
|---|---|
| [Portfolio 스킨] 12. 검색창에서 보여지는 태그 목록 꾸미기 (0) | 2024.12.08 |
| [Portfolio 스킨] 10. 태그 클라우드 꾸미기 (0) | 2024.12.06 |
| [Portfolio 스킨] 09. 스크롤바 꾸미기 (2) | 2024.12.05 |
| [Portfolio 스킨] 08. 제목 상단에 프로그레스바 만들기 (0) | 2024.12.04 |
