티스토리 스킨 수정하기

티.꾸를 좀 해볼까 (티스토리 꾸미기)를 생각하다가 괜찮은 스킨을 발견했다.

넷플릭스 스킨!

https://thelabors.tistory.com/184

[티스토리 스킨 배포] Netflix

 

 

기존 스킨에서
1. 요소들 위에 마우스 올려놓으면 반응하도록 추가 
2. 썸네일 이미지 변경
3. 코드 부분 색상 반전
4. 스크린 크기에 따라 정렬 변경
5. 버튼 url 변경 등의 작업을 했다. 

썸네일 이미지 변경할 때, 글 자체에 이미지가 없으면 연관글 추천에 아무런 이미지 없이 검은 화면이었다.

디자인은 둘 째치고, 클릭이라도 되면 좋은데 이미지 없는 부분은 클릭도 안돼서 이미지를 추가해주기로 했다. 

 

 

1.

원하는 사진을 png로 준비해준다. 나는 나애 최애 드라마 '아일랜드'에서 가져왔다. 

시연이랑 재복이 ㅎ

배경 없는 편이 티스토리에는 나을 듯 싶어서 배경을 지웠다. 

 

2. HTML 구조 분석

지금 구조는 다음과 같다. 이미지가 없는 글을 연관글로 가져올때는 class = "text_type", 이미지가 있는 글은 thumb_type이다.

div.area-related
|-- ul.list-related
    |--	li.text_type
    |    │- a.link_related
    |         |- div.thumb-related
    |            │- div.related-title                  
    |
    |-- li.thumb_type
        │- a.link_related
             |- div.thumb-related
                │- div.related-img    
                    └─ img.img_related 
                      │- div.related-title

 거의 동일한 구조인데 related-img 부분만 생략된 것을 볼 수 있다. 

<div class="area-related"><ul class="list-related"><s_article_related_rep><li class=""><a href="" class="link_related"><div class="thumb-related"><s_article_related_rep_thumbnail><div class="related-img"><img src="" class="img_related" alt="No Image"></div></s_article_related_rep_thumbnail><div class="related-title"></div></div></a></li></s_article_related_rep></ul></div>
<script>

 

 이미지가 있는 경우엔, 썸넬 이미지를 티스토리에서 제공하는 <s_article_rep_thumbnail> 치환자로 받아오고 있었다.  div.related-img 와 <img>를 추가해줘서 thumb_type과 동일하게 만들어주어 기존 코드 변경을 최소화하고자 했다. 

 

3. js 코드

콘솔창에 `document.querySelector()`로 thumb_type 구조를 보면서 어떤 요소를 추가할 지 정리했다. 

 

li.text_type
│- a.link_related
     |- div.thumb-related
		│- div.related-img    <-- (새로운 요소)
   			└─ img.img_related (새로운 이미지)     
			  │- div.related-title  <-- (기존 요소)

 

 

이제 js 코드로 새로운 요소를 만들어 thumb-related 밑에 붙여준다. 

    document.addEventListener("DOMContentLoaded", function () {
    let textItems = document.querySelectorAll(".text_type"); // text_type만 선택

            textItems.forEach(item => {
                    let thumb_related = item.querySelector(".thumb-related");
                    // .related-img 요소
                    let relatedImgContainer = thumb_related.querySelector(".related-img");

                    if (!relatedImgContainer) {
                            // div.related-img 생성
                            relatedImgContainer = document.createElement("div");
                            relatedImgContainer.className = "related-img";

                            // img 태그 생성 및 기본 이미지 적용
                            let newImg = document.createElement("img");
                            newImg.src = "./images/ireland Background Removed.png";
                            newImg.className = "img_related";
                            newImg.alt = "Default Image";

                            // .related-img > img
                            relatedImgContainer.appendChild(newImg);
                            // .thumb_related 내부 첫번째 요소로 추가
                            thumb_related.prepend(relatedImgContainer);
                    }
            });
    });
</script>
</s_article_related>

 

이때 item, relatedImgContainer  등 요소에 어떤 값들이 들어가 있는지 헷갈렸다. 그래서 구조를 직접 그리면서 확인해보는 것이 필요하다는 것을 알았다. thumb_related의 Item은 parent인 a.link_related 이다. 

👉 부모 요소를 찾으려면 parentNode,

👉 바로 위 태그를 찾으려면 previousElementSibling 사용!

• 요소를 추가할 때 insertBefore()을 사용할 수 없었다. <div> title 을 기준으로 위로 넣으려 했는데 <div> title이 부모의 직접적인 자식이 아니어서 오류가 났다.  
• prepend()는 부모 요소의 첫 번째 자식으로 삽입

 

4. CSS 확인

화면을 늘리니 얼굴이 커지길래 이미지 비율을 조정해보려했다. 기존 코드는 object-fit: cover였다. cover, contain의 차이는 아래와 같다. 둘 다 이미지 비율은 유지하지만 더 커지냐 아니냐의 차이다. 

cover vs. contain

.related-img img {
	width: 100%;
	height: 100%;
	border-radius: 5px 5px 0px 0px;
	object-fit: contain;
	margin: auto;
	left: -100%;
	right: -100%;
	top: -100%;
	bottom: -100%;
}

 

요소가 겹쳐있거나, 상속받거나, 상대적인 위치(position) 등을 사용하는게 익숙하지가 않다. 

👌 width: 100%; height: 100%; → 부모 요소 크기에 맞게 자동 조절!

지피티 왈, left: -100%; right: -100%; top: -100%; bottom: -100%; → 문제가 있는 코드 ❌
 - position: absolute;가 없으면 left, right, top, bottom은 효과 없음

라길래 지워줬다. 추가로,

‼️ margin: auto;는 가운데 정렬할 때 사용돼요. 하지만 width: 100%; height: 100%;가 적용된 상태에서는 이 속성이 크게 영향을 미치지 않음. 라길래 margin과 width/height 이 대체관계인 줄 알고 margin 만 적용해봤다.

width: 100%; height: 100%; 대신 margin: auto; 이용

 

아 이뿌다(?)

 

반응형은 요소 배열과 크기 조정을 더 연습해봐야겠다.