본문 바로가기
일상

오랜만에 블로그 스킨을 바꿨다

by 밍망뭉 2022. 1. 14.
728x90

티스토리에서 스킨을 새로 만든건 아주 옛날이지만 미루고 미루다가 드디어..!
기존에 쓰던 스킨이 질리기도했고 나도 블로그에 빌보드배너같은거 넣고싶어 라는 생각도 쪼금,, 째뜬 Poster스킨으로 결정

 

 

찔끔찔끔 마진 패딩 정도만 수정하다가 새글 알림 아이콘을 바꾸고 싶어졌다
여기서 방법은 크게 두가지일 것 같다 첫번째는 이미지 파일을 바꾸는 것, 두번째는 html을 수정하는 것
내 기준으로는 전자가 훠어어얼씬 귀찮았다 이미지를 내가 만드는건 상상도 못하겠구.. 사용가능한 이미지를 구하는 것도, 이미지 크기가 기존과 다른 경우에 css를 일일이 확인하면서 수정하는 것도 너무 귀찮을 것 같았음 그래서 그냥 스크립트를 추가하기로했다

 

 

<s_list>
    <div class="post-header">
        <span><h1></h1></span>
        <span style="padding-left: 5px; font-weight: bold;">()</h</span>
        <div class="list-type">
            <button type="button" class="thum">썸네일형</button>
            <button type="button" class="list">리스트형</button>
        </div>
    </div>
</s_list>

그 전에 걸리적거리는 </h 삭제..!

<s_list>
    <div class="post-header">
        <span><h1> ()</h1></span>
        <div class="list-type">
            <button type="button" class="thum">썸네일형</button>
            <button type="button" class="list">리스트형</button>
        </div>
    </div>
</s_list>

근데 개수 뿌리는 span태그에 style 걸려있는게 보기 싫어서 그냥 합쳐버렸다
카테고리명과 개수를 다른 스타일로 보여주고싶다면 분리하는게 맞지만 그럴일 없을 거 같아서.. html에 style속성이 많은게 싫다ㅠㅠ

 

 

<script>
	$("img[alt='N']").each(function(){
		$(this).replaceWith('✔︎');
	});
</script>

html 오류 다 수정하고 드디어! 새 글 아이콘 바꾸기
카테고리 리스트 부분은 img태그의 속성값을 추가할 수 없다 그래서 alt로 img 태그를 찾아야하는 점이 마음에 안들긴하다
스크립트에서 태그요소를 찾을때는 이름이나 아이디 속성으로 찾아야한다 클래스도 퍼블리싱에서 정하기 때문에 비추천.. css 바뀌면서 클래스명이 바뀌면 다 수정해줘야되서 열받음(경험담)
째뜬 기존 새글알림 이미지 태그를 찾아서 그 태그 자체를 단순 텍스트로 바꿔주면 끝 구여운 체크 이모지로 바꿨다ㅎㅎ

 

 

마음에 드는군ㅎ
역시 단순 html 수정은 재밌다 회사일로 이러면 얼마나 좋을까ㅎㅎ

728x90