[티스토리] 스킨 편집 시 겪었던 부분들

코딩 정보/티스토리

[티스토리] 스킨 편집 시 겪었던 부분들

꽁이꽁설꽁돌 2025. 1. 18. 20:20

728x90

티스토리 스킨을 만들면서 헤멨던 부분들, 알면 좋을 것 같은 부분들을 적고자 한다.

구현하지 못한 부분들

1. 구독자 수

이 부분은 티스토리 api가 제공해 주지 않는다. 다른 블로그 들어가면 있는데

어떻게 했는지 물어보고 싶다 (하신 분은 댓글로 남겨주세요)

2. 포스트 수

이 부분도 마찬가지다.. s_list안에 count라는 치환자가 있지만 그 링크에 들어갔을 때만 값을 가져오기 때문에

구현이 불가능했다.. 그래서 그냥 하드 코딩으로 200이상이라 넣었다 ㅋㅋ

메인 화면 구조

위와 같이 home의 메인을 만들고 싶었던 나는 f12를 통해 위치를 확인하여 넣어 주었다.

이렇게 넣으면 문제점이 생기는데 바로 모든 글안의 container 에 저 main이 들어간다는 것이다...

그래서 다음과 같은 방식으로 해결하였다.

 window.onload = function() {
    // 메인 화면 관련 CSS
    const currentPath = window.location.pathname;
    const contents = document.getElementById('container');
    
    // 정확한 경로 "/"
    if (currentPath === '/') {
      document.querySelector('.homeBackground').style.display = 'block';
      contents.style.paddingTop = '0';
      document.querySelector('.homeBanner').style.display = 'flex';
      const banner = document.querySelector('.homeBanner');
      
      }

다만 이런식으로 하면 여기서 개발을 할때 안보이는 문제가 생긴다.

그래서 나는 개발할때는 display를 block으로 해놓고 했다.

티스토리 메인 커버 추가하기

이곳에서 메인 커버를 추가해 준 뒤 내가 원하는데로 html을 수정해 주면 된다.

또한 커스텀도 가능하니 내가 원하는 메인을 만들기 용이하다.

이 부분을 만들때는 cover-thumnail3 를 수정해 주었다.

이 부분을 만들 때는 cover-event를 수정해 주었다.

이 부분을 만들때는 cover-thumnail1을 수정해 주었다.

이 부분을 만들 때는 cover-list를 수정해 주었다.

편집하면서 자주 마주치는 css 속성

table-cell의 특징과 동작 원리

1. 기본 특성

table-cell로 설정된 요소는 자동으로 테이블 셀 형태로 레이아웃됩니다.
부모 요소의 display 속성이 table 또는 table-row여야 제대로 작동합니다.
각 셀은 동일한 높이와 너비를 가지려고 노력하며, 이를 통해 균일한 테이블 형태를 유지합니다.

2. 레이아웃 흐름

table-cell 요소는 행 단위로 정렬됩니다. 즉, 같은 부모 table-row 안에 있는 셀끼리 한 줄에 배치됩니다.
셀의 크기는 내용, width, height 설정, 혹은 테이블의 레이아웃 정책에 따라 결정됩니다.

3. 적용 가능한 CSS 속성

테이블 셀 형태로 동작하므로, 아래 속성들이 주로 유효하게 작동합니다:
- vertical-align: 셀 안의 내용을 수직 정렬.
- text-align: 텍스트의 수평 정렬.
- padding: 셀 내부 여백.
- border: 테두리 추가.
- background: 배경 색상 및 이미지.

::before의 특징

가상 요소:
- 선택된 요소의 가상적인 첫 번째 자식 요소처럼 동작합니다.
- HTML에 존재하지 않지만, 렌더링 시 요소의 내용 앞에 삽입됩니다.
콘텐츠 삽입:
- 반드시 content 속성을 사용해야 동작합니다.
- content 속성에 텍스트, 유니코드, 이미지를 삽입할 수 있습니다.
스타일 가능:
- :before에 배경, 색상, 폰트, 크기 등 다양한 CSS 스타일을 적용할 수 있습니다.
독립적인 블록으로 동작 가능:
- display 속성을 활용해 인라인, 블록 등 다양한 레이아웃으로 동작할 수 있습니다.

아래와 같이 가상요소를 통해 어둡게 만드는데 많이 사용된다.

filter를 쓰면 자식요소의 밝기도 영향을 받기 때문이다.

.card {
  position: relative; /* 부모 요소를 기준으로 가상 요소를 배치 */
  width: 300px;
  height: 200px;
  background: url('https://via.placeholder.com/300x200') no-repeat center center;
  background-size: cover;
  overflow: hidden; /* 초과된 부분을 숨김 */
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 반투명 검정색 */
  z-index: 1; /* 텍스트보다 아래에 위치 */
}

.card h2 {
  position: relative; /* 부모의 ::before 위에 표시되도록 설정 */
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 200px; /* 카드 높이와 동일하게 맞춰 텍스트 가운데 정렬 */
  z-index: 2; /* 오버레이 위에 표시 */
}

loading spinner 만들기

이런식으로 만들어 주면 된다.

<script>
window.addEventListener('load', function () {
  const overlay = document.querySelector('.loading-overlay');

  // 로딩 완료 후 서서히 숨기기
  setTimeout(() => {
    overlay.classList.add('hidden');
  }, 50); // 1초 후에 효과 실행
});

</script>

네임카드 예쁘게 이미지 넣기

이런식으로 스크롤을 해도 이미지는 고정되는 네임 카드를 만들려면 다음과 같이 하면된다.

아래 가상 요소는 이미지를 잘 보이게 만들어주는 역할을 한다.

.tt_box_namecard{
  position: relative;
  width: 80%;
  margin-left: 10%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   background-image: url('./images/lastBanners.jpg'); /* 이미지 경로 */
  background-size: cover; /* 이미지 크기를 요소에 맞게 조정 */
  background-position: center; /* 이미지 위치를 중앙으로 설정 */
  background-repeat: no-repeat; /* 이미지 반복 방지 */
  background-attachment: fixed; /* 스크롤 시 이미지 고정 */
  
}
.tt_box_namecard::before{
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  background: rgba(0, 0, 0, 0.3);
  z-index: 1; /* 부모 요소 위에 표시 */
}
.tt_box_namecard > * {
  position: relative; /* 자식 요소를 오버레이 아래에 표시 */
  z-index: 2;
}

++ crtl f 필수

5000줄인데다가 html 파일 갔다가 css파일 돌아오면 화나게도 스크롤 해놓은 부분이 초기화 되어있다.

그래서 생각보다 더 오래 걸렸다.