2018/2/19 짤막한 티스토리 스킨 제작 일지

1. a태그 수정

Google 처음엔 두 영역의 너비를 일치시키며 링크도 표시하려고 이런저런 시도를 했는데, 글자 간격이나 크기를 조절하면 너무 이상해 보여서 링크를 자르는 방식으로 진행 중이었는데, 묘한 오빠님께서 아무래도 링크가 다 보이면 좋겠다는 말씀에, 수정하게 됐다.

min-width 값으로 링크가 더 짧은 경우도 이상해보이진 않도록 해뒀다.

아무래도 두 마리 토끼를 다 잡는 건 욕심이었나 보다.

2. 팝업 버튼에 유튜브 삽입

✕

Twice - Heart Shaker MV

✕

Twice - Knock Knock MV

.dialog .youtubevid {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.dialog .youtubevid iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

iframe을 감싼 div 등에 위 css를 추가해주면 비디오를 감싸는 반응형 박스가 완성된다.

3. 본문에 스크롤바 추가

스크롤 바를 제거하고 제대로 확인을 안 해서 color scripter의 너비가 본문의 너비보다 넓은 경우를 생각하지 못했다.

가끔 예전 글들 보는 것도 모바일로 하다 보니 더더욱 문제를 모르고 있다가 최근에 깨닫게 되어, 본문 / 메뉴 / 팝업창 에만 스크롤 바를 제거하는 방식으로 CSS를 수정했다.

4. 본문 태그 박스 수정

태그 탭의 디자인과 통일했다.

5. 배너 및 헤더

각 메뉴가 나오는 방향으로 화살표를 추가했고, 본문에도 80vh의 높이를 갖는 배너를 추가했다.