[스킨] GRAVITY SKIN 8 | 웹진형 만들기

 

1. 웹진형을 만든 계기

 

도전이다. 도전 아니고서는 솔직히 말하면 스킨도 한 번 만들어보고 싶은데, 어림도 없을 거 같다. 아무래도 기본 지식이 있어야 할 것 같은데 그런 지식은 없고……. 그래서 웹진형^[각주:1]을 만들어보기로 했다.

 

2. 웹진형 만들 때 중요한 거?

 

아무래도 없는 리스트 목록을 바꾸어서 만들려면 해당 스킨과 잘 어울리게 만드는 것이 중요하다. 물론 내가 그렇게 만들었다는 것은 아니다. 그래서 비교적 기존에 있는 스킨에 리스트를 참고하여 만드는 편이다.

 

해당 티스토리에 웹진형을 한 번 적용시켜보았는데 꽤 괜찮게 만들어진 것 같다. 내 개인적으로 쓰기에는 불편함이 없을 정도? 예쁘게 만들어보고 싶지만, 아무래도 그게 쉽지는 않다. 이미지를 반응형처럼 만들고 싶었는데, 그걸 잘 모르니까^_^ 어쩔 수 없는……. 또르륵.

 

3. PC에서 보는 웹진형

 

음, 일일이 폰트 값이랑 다 조정했다. 반응형이 아니라, 지정을 해놓고 “넌 이래야 해!”라고 지정해놓은 느낌이다.

 

REVIEW는 내 카테고리명인데 사실은 저 아래에 태그를 넣고 싶었다. 그런데 태그를 불러오는 방법을 모르겠다. 티스토리 치환자를 찾아서 간구해보려고 했는데 잘 모르겠다. 나중에 써먹을 수 있다면 그런 태그를 써서 활용해보고 싶은 마음?

 

하지만 그렇게는 하지 못해서 나중에 도전을 해보고 싶다. 원래 구조는

 

이미지	카테고리 / 날짜 제목 본문 요약 글쓴이

 

이렇게 하려고 했는데, 그림 크기랑 맞추고 싶은 마음에 저렇게 수정했다. 글쓴이를 과감하게 빼버렸다.

 

4. 태블릿에서 보는 웹진형

 

 

솔직히 말하면 내가 태블릿은 가지고 있지 않아서 해당 캡처본은 티스토리 수정할 때 보이는 걸로 대체한다. 아닐 수도 있으니 이 점은 참고하시길 바란다.

 

폰트 크기랑 이미지 크기도 약간씩 조정했다. 일단은 저 이미지 크기에 맞춰서 저 요약글이 들어가는데 중점을 맞췄다.

 

5. 모바일에서 본 웹진형

 

 

 

카테고리명이랑 날짜 절대 못 잃어. 이런 심정으로 만들어본 웹진형이다. 사실 요약형을 아래와 같은 구조로 넣어보면 어떨까 생각했지만, 귀차니즘이 생겨서 그렇게는 하지 않기로 했다.

 

이미지	카테고리 / 날짜 글제목
글 요약

 

이렇게 만들려면 어떤 식으로 해야 하나? 이런 구조를 본 적이 없는 거 같은데, 가능할 거 같긴 하다. 문제는 내가 구현할 수 없다는 정도뿐이지. 음, 아무튼 만들어 본 데에 의의를 두려고 한다. 이 정도면 나름 깔끔하게 선방한 거 같은 느낌?

 

솔직히 말하면 난 정말 투머치로 많은 거 집어넣는 걸 좋아해서 이것저것 넣는 걸 좋아하는데 능력이 없으니까 넣고 싶은 걸 다 빼버리기 시작했다. 나중에 능력만 생겨봐... 내가 넣고 싶은 기능 다 넣어버릴 테다.

 

<!-- ----------------------------- 웹진형 ---------------------------- -->
                                    <a href="/entry/%EC%8A%A4%ED%82%A8-GRAVITY-SKIN-8-%EC%9B%B9%EC%A7%84%ED%98%95-%EB%A7%8C%EB%93%A4%EA%B8%B0">
                  <div class="webzine">
                        <div class="webzine-thumb"><img src="" /></div>
                      <div class="webzine__info">
                      <div class="webzine__1">
                      <div class="webzine__icon"><i class="fa-solid fa-folder"></i></div><div class="webzine__category">REVIEW/SKIN</div>
                      <div class="webzine__date">20221223</div>
                      </div>
                      <div class="webzine__2">
                      <div class="webzine__title">[스킨] GRAVITY SKIN 8 | 웹진형 만들기</div>
                      </div>
                      <div class="webzine__3">
                      <div class="webzine__summary">1. 웹진형을 만든 계기 도전이다. 도전 아니고서는 솔직히 말하면 스킨도 한 번 만들어보고 싶은데, 어림도 없을 거 같다. 아무래도 기본 지식이 있어야 할 것 같은데 그런 지식은 없고……. 그래서 웹진형을 만들어보기로 했다. 2. 웹진형 만들 때 중요한 거? 아무래도 없는 리스트 목록을 바꾸어서 만들려면 해당 스킨과 잘 어울리게 만드는 것이 중요하다. 물론 내가 그렇게 만들었다는 것은 아니다. 그래서 비교적 기존에 있는 스킨에 리스트를 참고하여 만드는 편이다. 해당 티스토리에 웹진형을 한 번 적용시켜보았는데 꽤 괜찮게 만들어진 것 같다. 내 개인적으로 쓰기에는 불편함이 없을 정도? 예쁘게 만들어보고 싶지만, 아무래도 그게 쉽지는 않다. 이미지를 반응형처럼 만들고 싶었는데, 그걸 잘 모르니까^_^ 어쩔 수..</div>
                      <div class="webzine__author">@FEVERPITCH</div>
                      </div>
                      </div>
                  </div>
                  </a>

#type-webzine .list, #type-webzine .gallery, #type-webzine .memo, #type-webzine .card, #type-webzine .webzine2{display: none;}

#type-webzine li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#type-webzine .webzine {
  padding: 2%;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--round);
  background-color: var(--color-wrap);
  transition: all var(--transition-duration);
}

#type-webzine .list:hover {
  border-color: var(--color-primary);
}

#type-webzine .webzine__icon {
  color: var(--color-primary);
  border-right: 1px dashed var(--color-border);
  margin-right: 5px;
}

#type-webzine .webzine__title {
  font-weight: 700;
  font-size: 18px;
}
#type-webzine .webzine__category {
  font-weight: 600;
}

#type-webzine .webzine__date {
  margin-left: auto;
  padding-right: 16px;
  font-size: var(--font-size-small);
}
#type-webzine .webzine-thumb {
  object-fit: cover;
  max-width: 150px;
  overflow: hidden;
  transition: all var(--transition-duration);
}

#type-webzine .webzine-thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  overflow: hidden;
  transition: all var(--transition-duration);
}

#type-webzine .webzine__info{
  display: flex;
  flex-direction: column;
  width: 100%;
}
#type-webzine .webzine__1{
  display: flex;
  flex-direction: row;
  border-bottom: solid #eee 1px;
  margin: 5px;
}
#type-webzine .webzine__2{
  border-bottom: dotted #eee 1px;
  margin:5px;
}
#type-webzine .webzine__3{
  margin:5px;
}
#type-webzine .webzine__summary{
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 2.0;
  font-size: 16px;
}
#type-webzine .webzine__author{
font-size: 12px;  
display: none;
}

@media only screen and (max-width: 786px) {
#type-webzine .webzine-thumb{
    max-width: 150px;
  }
  #type-webzine .webzine__title{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 18px;
  }
  #type-webzine .webzine__summary{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  }
}

@media only screen and (max-width: 500px) {
  #type-webzine .webzine__title{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  }
  #type-webzine .webzine__summary, #type-webzine .webzine__author{
  display: none;
  }
  #type-webzine .webzine-thumb{
    max-width: 100px;
  }
  #type-webzine .webzine__2{
  border-bottom: dotted #eee 0px;
  margin:0px;
}
}

 

스킨과 관련된 글을 보고 싶다면 여기를 클릭!

GRAVITY SKIN과 관련된 글만 보고 싶다면 여기를 클릭!

 

 

방금 읽은 이 글이 도움이 되었다면 공감, 댓글을 남겨주세요. :)

 

1. 출판하지 아니하고 인터넷상으로만 만들어 보급하는 잡지. [본문으로]