Blog HISTORY : Drama post design 블로그 히스토리
이 블로그에 사용중인 드라마 부분의 포스트 변경한 모습을 담았습니다.
드라마 포스트 변경 기록 Drama
처음 한 모양이 마음에 들었지만, 너무 페이지가 길어져서 변경하게 되었습니다. 그 후 6번을 변경하여 지금의 모습으로 변하였지만, 변경하면 할수록 손은 더 많이 가는군요. 그래도 손이 더 가지만 점점 더 나아지는 보습이 보이니 그것으로 만족은 하고 있습니다.
jQuery을 사용 - #6
장점
- 포스트만 보여서 가로, 세로 사이즈 조정리 쉽게 하였습니다.
- jQuery의 배열 데이터를 이용 예전에는 CSS로만 했던 것이 데이터 추가로 쉽게 추가할 수 있습니다.
var movie = [
// '제목','부제목','이미지주소','개봉','시간','등급','장르','나라', 평점, 'URL', 종류(0:영화, 1:드라마), 추천 , 시청률
// ----------------------
['이태원 클라쓰', // '제목'
'Itaewon Class', // '부제목'
'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile5.uf.tistory.com%2Fimage%2F9932A0415FA3A54B0B113E',
'2020', // 년도 (영화시 '개봉날자 2019.03.20')
'JTBC 16부작', // '편성' (영화시 '개봉')
'15세이상관람가',
'드라마,로맨스',
'한국', // '국가'
7.95, // (점수) 퍼센트
'http://tv.jtbc.joins.com/itaewonclass', // 맥스무비, 네이버 영화 & 공식 URL
1, // 종류 (0:영화, 1:드라마)
0, // 추천 (0, 1:추천)
16.5], // (시간)number - 시청률 (영화시 시간)
];
- 마우스 드래그 시 상세 부분이 나오는 방식이라 한눈에 들어오는 부분입니다.
- 범용으로 사용 가능 (현재 영화, 드라마 사용함)
단점
- 모바일 부분에서 포스트 이미지가 따로 보이는 부분이라 포스트 사이즈 변경을 한 후 이미지 업데이트해야 합니다.
- 드라마 내용 부분에서 줄거리를 넣지 못하는 것이 흠.
- 포스트 사이즈 넘게 글을 쓸 수 없는 것이 아쉬움.
Sieve jQuery Plugin을 사용 - #5
장점
- 단어를 검색할수 있게 하고 그검색의 부분만 보여지게 하는 jQuery를 사용하였습니다.
- Sieve jQuery Plugin v0.3.0
- 한 화면에 3개를 넣었더니 작게 보여져서 2개를 넣었어 좀더 쉽게 볼수 있게 하였습니다.
- 다이나믹 그리드를 설치해서 해 보았지만
top,left CSS문으로 되니 검색 부분과 더보기 부분이 있으면 이상하게 보여저서 이것으로 했습니다.
부트스트랩,Uikit을 사용 - #4
장점
- 작은 기기에는 작은기기에 맞게 수정된 태그와 큰화면에 태그를 달리하여 좀더 나은 화면 구성
- 포스트 아이템과 아이템과의 사이에 선을 추가되고 행간 구분이 없이 추가할 수 있도록 만들었습니다.
부트스트랩을 사용 - #3
부트스스랩을 이용하였지만, 높이가 달라 이상했던 점이 있습니다. 별모양의 부분을 퍼센트바 부분으로 변경하여 조금 이상하였습니다.
장점
- 작은 기기에서 보이는 경우 포스터이미지랑 밖의 선 처리가 자동으로 되어 반응형 블로그에 맞음.
- 밖의 선 색으로 추천 드라마 구분 가능
단점
- 3개 이상 입력할 때 다소 이상하게 배열될 수 있는 문제 발생이 되어 3개 배열하면 라인 변경을 입력해야 한다.
티스토리 기능 사용 - #2
장점
- 티스토리 형식이라서 간편하고 CSS를 따로 사용하지 않아서 티스토리 편집기 사용할 때 용의 합니다.
- 화면 한줄에 4개까지 가능하면 사이즈 맞추기에도 용의 했습니다.
단점
- 다음 줄로 넘기기가 힘들며 자주 코드가 꼬여 항상 테스트 화면을 봐야 했습니다.
- 반응형이 아닌 고정형으로 보이기 때문에 몇 개를 종합하여 사용해야 했습니다.
티스토리 TV 기능을 사용 - #1
장점
- 티스토리 편집기에 있는 TV기능을 사용하여 간편하고 티스토리 편집기에서 화면이 제대로 보이니 사용할 때 용의 합니다.
- 세로로 이용하여 많은 부분을 넣고 변경, 추가가 가능합니다.
단점
- 10개가 넘어가니 세로 화면이 너무 길어져서 스크롤을 많이 내려가야 합니다.
