[Tstory Blog] Web Font 변경, cover-list 클래스 css 설정

KT AIVLE School 의 기자단을 하기 전 멈췄던 블로그를 정리했다.

현재는 취향이 변해서, 블로그를 다시 시작함에 앞서 카테고리를 정리하고, css를 건드려보았다.

---

.cover-list ul li:hover {
	transition: all 0.15s;
	transform: translateY(-6px);
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

• transition은 부드럽게 적용이 안되어서 0.15s 를 적용
• transform: translateY(-6px); 로 호버시 위로 상승
• box-shadow: 0 2px 6px rgba(0,0,0,0.2); 로 상승한 list 요소 뒤에 그림자 생성

홈에서 게시물을 선택하는 재미를 주기 위해 수정했다.

---

/* Web Font Load */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600&display=swap');

/* local font 예시 */
@font-face {
    font-family: 'Kimjungchul';
    src: url('./images/Kimjungchul-Myungjo.ttf') format('truetype');
}

.cover-list ul li .title {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 6px;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.2rem;
	line-height: 1.4;
	font-family: 'Noto Serif KR', 'serif';
	font-weight: 600;
}

• Noto Serif KR을 강조하는 텍스트에, Noto Sans KR을 가독성이 중요한 텍스트에 적용

사실 원래는 건축학도로서 의미가 있는 정림건축에서 만든 김정철폰트를 사용하고 싶었으나. 티스토리의 파일업로드 용량이 20MB 밖에 안되는데 폰트 하나를 올리니 15MB가 차버려서 추후 JS 파일을 업로드 하는 것에 차질이 생길 것 같아 Web 폰트로 교체 했다.