죠스토리

그렇게 어려운건 아닌데 제가 만들다가 너무 헤맸어서 이렇게 적어놓습니다.

홈 커버의 기본 썸네일을 만드는 것을 기준으로 합니다.
태그나 코드에 관한 이해가 떨어져 개념적으로 틀린 부분이 있을 수 있습니다.
정말 개초보 야매니까 좋게 봐주세요... 감사합니다. 

그리고 치환자가 게시글에 들어가면 없는것처럼 나오더라고요
참고해주세요

이미지가 없을 때 띄워주는 기본 썸네일 만들기에 관해서 글을 써보려고 합니다

위 이미지상의 [NO IMAGE]가 그것입니다

스킨을 직접 만들어 사용하면 당연하게도 이미지가 없을 때 'NO IMAGE', 즉 기본 썸네일을 띄워주지 않습니다.

때문에 썸네일형 커버에서 썸네일이 존재하지 않는 게시글은 있는데 없는 게시글로 처리됩니다.

그 말이 무엇이냐면

이렇게 커버에서 글 수를 6개 표시한다고 했을 때, 썸네일이 없는 게시글이 하나가 포함되면 썸네일이 5개밖에 표시되지 않아 못생겨지고 맙니다. 하나가 누락된 것처럼 보이게 됩니다.

큰일은 아니지만 못생겨지는 건 정말 큰일이죠

우선 도면을 볼까요...

토대를 만들자

<s_cover_item>
	<s_cover_item_thumbnail>
		<a href="" class="thum"><img src="//i1.daumcdn.net/thumb/C266x266/?fname="></a>
	</s_cover_item_thumbnail>
</s_cover_item>

건드려야 할 뭉텅이는 이 부분입니다. 글에 썸네일이 존재할 때, <s_cover_thumbnail>이 여러개 반복되며 썸네일 이미지<img>가 나타나게 됩니다.

대표 썸네일 이미지가 없으면 당연히 img 태그 속의 링크도 비어버리겠죠... <s_cover_thumbnail>은 존재하는데 <img>가 비어있어서 있는데 없는 상태가 됩니다. 따라서 앞서 말한 못생겨지는 문제가 생기고 맙니다.

img태그가 비어버려서 문제가 생기는 거니까... 각각의 이미지 밑에 종이 한 장을 덧대서 없어도 보이는 것처럼 만들어줍시다. 그러니까 기본템 같은 거요.

그럼 빵꾸가 나도 누락없이 잘 보이게 될 거예요

<s_cover_item>
	<a href=""><div class="thumbnail_background">
		<s_cover_item_thumbnail>
			<a href="" class="thum"><img src="//i1.daumcdn.net/thumb/C266x266/?fname="></a>
		</s_cover_item_thumbnail>
	</div></a>
</s_cover_item>

div태그로 <s_cover_item_thumbnail>을 한 번 감쌌습니다. 눌렀을 때 게시글로 잘 이동되어야 하니까 a태그로 꼼꼼히 잘 이어줍니다

당연하게도 이렇게만 하면 여전히 아무것도 안 보이기 때문에 css를 넣어줍시다

꾸며주자

.thumbnail_background {
  background-color: var(--lightblue);
  width: 266px;
  height: 266px;
  display: inline-block;
}

높이와 크기, 그리고 바탕색을 지정해줍니다

여기서 높이와 크기는 기존 썸네일 크기와 맞춰주어야 합니다.

img src속의 링크를 한번 봅시다...

<img src="//i1.daumcdn.net/thumb/C266x266/?fname=">

여기서 C266x266이라고 써진 부분이 보이나요?

C 뒤의 숫자가 이미지의 가로세로 크기를 정해주는 숫자라서 그거에 맞춰 정해주시면 됩니다.

C 말고도 R하고 뭐가 더 있던데 잘 모르겠어요. 아무튼 링크 속 영어 대문자 뒤의 숫자를 따라가면 돼요

그러면 썸네일이 없어도 이렇게 잘 보이게 됩니다.

그냥 있으니까 심심하네요

그러니까 [NO IMAGE] 문구를 넣어주어요

.thumbnail_background::before {
  content: "[ NO IMAGE ]";
}

가상요소 before를 사용해서 이미지 위에 NO IMAGE라는 문구를 띄워봅시다

대참사

큰일이 납니다

이녀석 블록 취급을 당하는 것 같습니다

취급이 너무 좋으니까 끌어내려버립시다

.thumbnail_background {
  background-color: var(--lightblue);
  width: 266px;
  height: 266px;
  display: inline-block;
  position: relative;
}

.thumbnail_background::before {
  content: "[ NO IMAGE ]";
  position: absolute;
  top: 122px;
  left: 74px;
}

.thumbnail_background에게 position: relative를 주어 before의 기준점이 누구인지 똑똑히 각인시켜줍니다

그리고 before에게 position: absolute를 주고 알맞게 위치를 조정해줍니다.

이로써 before는 .thumbnail_background 양반집의 노비가 되었습니다.

노비따위가 감히 영향력을 행사할 수 없는 법이죠

대참사는 막았습니다.

하지만 글씨가 기존 썸네일 위에 박혀있어 보기가 싫습니다.

다시 한 번 철퇴를 내려줘야겠습니다

img태그를 감싸고 있던 a태그에 thum이라는 클래스가 달려있던 것을 보셨나요?

녀석이 나설 때입니다

.thumbnail_background .thum {
  position: relative;
}

.thumbnail_background 속의 .thum에게 노비를 부릴 권한을 부여해줍시다

따라서 before는 두 집안의 공동 노비가 되었습니다

노비가 주인댁의 얼굴을 가리다니 그건 있을 수가 없는 일이지요

드디어 우리가 원하던 그림이 나왔습니다.

짝짝짝짝

잘 응용하면 아이콘이나 이미지 같은 걸 넣어서 어떻게 할 수 있지 않을까요

투명화된 사진을 썸네일로 하면 뒤의 NO IMAGE가 보인다는 단점이 있지만 어떻게 잘 해결해주시길 바랍니다

하하하하

코드

치환자가 업로드된 게시글 속에선 안보이더라고요 어떡하지 

a태그 속에는 [##_cover_item_url_## ]가 공통으로 들어가고

img태그 속에는 [##_cover_item_thumbnail_## ]가 들어갑니다

띄어쓰기는 제거하세요 

html

<s_cover_item>
	<a href=""><div class="thumbnail_background">
		<s_cover_item_thumbnail>
			<a href="" class="thum"><img src="//i1.daumcdn.net/thumb/C266x266/?fname="></a>
		</s_cover_item_thumbnail>
	</div></a>
</s_cover_item>

css

.thumbnail_background {
  background-color: var(--lightblue);
  width: 266px;
  height: 266px;
  display: inline-block;
  position: relative;
}

.thumbnail_background::before {
  content: "[ NO IMAGE ]";
  position: absolute;
  top: 122px;
  left: 74px;
}

.thumbnail_background .thum {
  position: relative;
}

3줄요약

-뒤에배경깔기

-css로꾸미기

-서열정리잘하기

끝

작년 11월부터 쫌쫌따리 만들던 것이 드디어 완성됐네요

DOS를 테마로 한 티스토리 스킨입니다.

백업 겸 배포합니다.

자유롭게 수정이 가능하나 재배포는 불가합니다.

모바일 버전을 지원하지 않습니다.

파란색 검은색 둘중에 하나를 골라보세요

업데이트 내역

적용법

스킨 변경>스킨 등록에 들어가서

압축을 해제한 폴더 내의 파일을 전부 업로드한 뒤 저장합니다.

이후 보관함에서 적용시키면 됩니다.

썸네일/리스트형 커버는 초기설정이 되어있지 않습니다. 사용하시려면 스킨 편집에서 홈 설정을 커버로 설정해주세요~

본문 예시

제목1

제목2

제목3

인용구 1

인용구 2

인용구 3

자바스크립트니 뭐니 1나도 몰라서 스킨이 그닥 예쁘진 않네요

혹시라도 오류나 문제 있다면 댓글 부탁드립니다 ^_^

꺄아아아

블로그가 다 만들어졌다

일기마냥 꼭 적어보고 싶었던 학기작 얘기나 좀 해볼까...

1학년 끝나고 겨울방학 전에 교수님이랑 상담을 했다

교수님왈: 겨울방학동안 기획을 하나 짜와서 검사를 받아봐라

그래서 이런 애들이 나와서 전철에 남은 자리 하나 가지고 치열하게 싸운다는 내용으로 기획을 잡았고 좋다고 ok 받음

이걸 겨울방학때부터 10월까지 진행하고 있었고 거진 마감 2달냅두고 엎었다

구인글을 올렸는데 최소인원이 안 모였기 때문이다

사실 그건 수많은 이유 중 하나고

무엇보다 내가 킹받아서 만들기가싫었다

구라안치고 진짜 만들기가 싫었다. 내가 이 캐릭터들이 좋고 스토리가 좋아서 하는게 아니라 진짜 싫은반찬 먹듯이 꾸역꾸역 한다는 느낌이 100이었다

그걸 쫌만 더 일찍 깨달았으면 좋았을걸...ㅋ ㅠㅠ

내가 감독인데 솔직히 너무 자아없이 만들었다

그래서 1학기 수업들으면서 메모해뒀던 1~2분짜리 기획을 꺼내와서 그걸 만들기로 했다

때는 1학기 기획수업

교수님이 챗지피티한테 도움받아서 스토리를 써보라고 하셨는데 얘가 너무 도움이 안됨

그리고 내가 얘를 구박하는거같아서 좀 불쌍했음... 아직 인간시대의 끝은 오지 않을 것 같았음

그래서 챗지피티를 갈구는 내용의 단편애니 기획을 짰다

챗 미니피라는 제목을 가지고 있다

영어로는 Chat MiniP

그리고 박명수 커피자판기도 모티브로 잡았다

화면속에선 똑똑하고 유능한데다가 귀엽기까지 한 초 슈퍼 만능 비서지만 사실은 굼뜨고 어리버리한 바보 ai라는 설정으로 캐릭터를 짰다

이거의 더 초기버전도 있는데 어디갔는지도 모르겠고 너무 징그럽게 생겨서 못올리겠다

좀 불쌍하고 멍청해보였으면 좋겠어서 디자인이랑 색을 저렇게 해놨는데 한 3초뒤면 토할거같은 컬러링이네...

많이 힘들었나... 모가지 늘어나는거랑 배때지 열어서 파일 먹고 학습하는 설정도 있는데 지금 생각하니까 징그럽다. 지금은 전부 폐기했다. 

아무래도 이게 시작이었으니까 그랬겠지

진짜 징그럽네 무슨 생각으로 이랬지?

아무튼 불쌍한데/바보같고/로봇이고/귀여움 이 넷을 잘 어울리게 해결하는게 너무 힘들었다

무엇보다 교수님이 'ai인데 ai안같다'는 피드백을 주셔서 이걸 해결하는 것도 어려웠다

하지만 이전의 실패로 2%정도의 줏대? 가 생기기 시작한 나는 이 ai를 그냥 바보로 만들어버렸다

10월 9일쯤에 엎고 새로 시작했는데

중간에 알러지이슈로 입원한거 빼면 생각한대로 잘 진행됐다

마감일까지 3~4일 여유도 생겨서 편집도 넉넉하게 잡고 함 야호

이게되네

누가 짜오고 해오라고 시켜서 한 게 아니라 내가 하고싶으니까 했던거라 힘들어도 재밌었다

디벨롭 기간이 쫌만더 길었다면 더 만족스러웠을텐데... 하는 생각도 드는데

애초에 가성비 노리고 시작했던 기획이라 더 바라지도 않는다 완성했으니까 된거지...

배경음악으로 보사노바 음악을 쓰려고 했는데 마침 조빙의 The Red Blouse라는 곡이 군대 기상체조 음악이라길래 보는 사람이 킹받았으면 좋겠어서 그걸 썼다는 비하인드가 있다

그걸 생각없이 당당하게 영상에 박아넣어서 저작권땜에 학교에 배급신청을 못했다는 비하인드도 있다

어차피 편집 다시해야되는데 여기에라도 올려봐야겠다...

또 여담이 있는데 동영상 배경 투명화 하는 방법도 모르고 시퀀스 내보내는 법도 몰라서 냅다 애니메이팅 완성된거 배경에 초록색 크로마키 박아갔다가 교수님이 크로마키는 왜쓴거냐고 물어보셔서 부끄러웠음 ///

너무 tmi 남발이라 여기까지 해야지...

도와주신분들 너무너무 고마웠습니다

나는 이제 자유의 몸이다

휴학을 할거야 

우르라끼끼끼

이건 볼드체

이건 이탤릭체

이건 볼드+이탤릭

이건 밑줄

이건 색깔변경

H1 가나다라마바사

H2 가나다라마바사

H3 가나다라마바사

본문1

어쩌구

인용구1

인용구2

인용구3

인용구구

햄버거 먹고싶다...

맛있겠다

땨땨땨땨땨땨