😢 본문 태그 깔끔하게 만들기
글꼴을 변경하면서 본문 밑에 보이는 태그 위치가 조금 어그러졌다.
신경쓰여서 동일하게 바꾸고 싶어서 이것저것 건들여봤다.
콤마가 지저분해보여서 콤마를 지우고 테두리를 씌우고 호버했을 때 밑줄을 없앴다.
앞에 #을 붙여서 더 태그처럼 보이게 할까도 고민해봤는데 이것 역시 마음에 안든다.
2월 14일 추가 내용
분명히 이 글을 작성할 때만 해도 본문 태그에 콤마가 기본으로 있었는데..
콤마를 지우는 자바스크립트를 지워도 콤마가 나타나지 않는다.
가능성은 3가지.
스킨 자체가 업데이트되어서 수정이 됐거나,
내가 html이랑 css를 수정하는 과정에서 콤마를 지우는 무언가를 만졌거나,
일시적인 오류로 내 블로그에서만 안보이거나.😂
혹시 제 블로그 본문 태그에 콤마가 보인다면 댓글로 알려주세요.💛
✨ 태그 스타일 개선하기: 해결해야 할 3가지 문제
첫 번째, 태그 영역의 콤마(,) 지우기
두 번째, 태그 앞에 # 추가하기
세 번째, 태그별 테두리 추가 & 호버 시 효과 설정하기
🔧 포트폴리오 스킨 수정하기
스킨 수정 과정
✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 또는 HTML 화면으로 들어가면 된다.
✔ 코드 수정이 끝났다면 적용을 누른다.
📌 콤마(,) 지우기
JavaScript를 사용해 콤마를 지울 수 있다.
</body> 위에 코드를 입력하면 된다.
📝 코드 설명
👉 JavaScript
(1) 문서 준비가 완료되었을 때 실행되는 jQuery의 기본 함수
$(function() {
페이지가 완전히 로드된 후에 내부의 코드를 실행해 DOM 요소를 조작하거나 이벤트를 처리한다.
(2) HTML 요소 선택 및 각 요소에 대한 함수 실행
$('.tag_content').each(function () {
✔ $('.tag_content') → <div class="tag_content">인 모든 HTML 요소 선택
✔ .each(function() { → 선택한 요소들 각각에 대해 반복 작업 수행
태그 불러온 후 변수에 저장
var comma = $(this).html(
✔ $(this) → 현재 반복 중인 .tag_content 요소
✔ .html() → .tag_content 요소 안에 있는 텍스트나 HTML 태그 불러오기
쉼표 제거
comma.replace(/,/g, '')
/,/g → 모든 쉼표(,) 검색
'' → 빈 문자열로 교체
수정된 값 반영
$(this).html(comma.replace(/,/g, ''));
comma 변수에 저장된 쉼표가 제거된 후의 값을 다시 현재 .tag_content 요소에 적용한다.
💻 적용 코드
👉 HTML의 </body> 위에 아래 코드를 입력한다.
<script>
$(function() {
$('.tag_content').each(function () {
var comma = $(this).html(
);
$(this)
.html(
comma.replace(/,/g, '')
);
});
});
</script>
👀 적용 모습
콤마가 없어져 깔끔해진 모습이다.
📌 태그 앞에 # 붙이기
콤마가 없어지니까 띄어쓰기와 태그를 구별하기 힘들어서 구분하기 위한 무언가를 꾸며야 한다.
내가 알아본 방법에는 태그 앞에 #을 표시하는 것과 태그 클라우드처럼 테두리를 씌우는 방법이다.
✔ 포트폴리오 스킨의 본문 태그는 css의 .area_tag .tag_content 부분이다.
📝 코드 설명
👉 CSS
content: "#" → 각 태그 앞에 자동으로 # 표시
margin-right: 3px → #과 태그 텍스트 사이 간격 조절
color: inherit; → #이 태그와 같은 색상을 가지도록 설정
💻 적용 코드
👉 CSS의 적당한 위치에 아래 코드를 입력한다.
.area_tag .tag_content a::before {
content: '#';
padding-right: 3px;
color: inherit;
}
<참고 : 별깡솔님>
👀 적용 모습
#을 넣어서 구분하기는 편해졌다.
📌 태그 스타일 추가 & 호버 시 효과
📝 코드 설명
👉 CSS
.area_tag .tag_content a { → .tag_content의 각 요소
.area_tag .tag_content a:hover { → .tag_content의 각 요소에 마우스를 올렸을 때
text-decoration: none → 텍스트 효과 없음(밑줄이 표시되지 않음)
border: 1px solid rgba(0, 0, 0, 0.25); → 1px 두께의 실선으로 테두리 생성. 색상은 검은색에 투명도 25%.
border-radius: 5px → 테두리 모서리를 둥글게
💻 적용 코드
👉 CSS의 적당한 위치 아래 코드를 입력한다.
.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;
}
.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;
}