HTML/CSS 티스토리 블로그 폰트설정

HTML/CSS 티스토리 블로그 모바일 최적화(1)

 

1) body 본문 글꼴 설정

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

body {
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif; /* 나눔고딕 */
	font-size: 1em;
	line-height: 1.25;
	color: #0F0F0F; /* 가독성 검정 */
}

 

폰트는 나눔고딕과 애플 산돌 고딕을 비교해봤다. 같은 Bold 상황에서 나눔고딕이 글자 간격이 더 넓고 글자 끝이 선명하다. 따라서 나눔고딕을 body의 기본 글꼴로 설정했다. 나눔고딕의 경우 구글폰트에서 무료로 배포하고 있다. 

 

 

 

구글폰트

Google Fonts

 

---

 

2) body 본문 글꼴 색깔 설정

순수 검정은 가독성에 좋지 않다. 가독성 높은 검정으로 추천되는 세 가지를 순수 검정과 비교해봤다.#444444 다크 그레이는 너무 밝아서 적합하지 않다고 판명했다. 나머지 두 개는 거의 차이가 없기에 아무거나 선택했다.

 

 

 

 

HTML 컬러코드

HTML Color Codes - What's your color

 

---

 

3) 글 리스트(이벤트 배너) 폰트 설정

티스토리 기본 스킨인 Book Club의 이벤트 배너다. 화면이 작아질 경우 제목이 ... 으로 축약되어 나타난다. 거기다가 검정색이 배경화면에 묻혀 잘 드러나지 않는다.

 

 

 

1) 축약 문제 해결 : max-width를 80%로 줘서 글이 더 나오게 한다. display가 box로 되어있어서 편하게 block으로 바꿨다.

 

2) 폰트 문제 해결 : background-color에 배경색으로 흰색을 주고 opacity 값을 넣어 투명도를 적용했다. 테두리 부분도 흰색이 적용되서 background-clip 속성값으로 content-box를 줘서 글자부분만 배경이 적용되게 조정했다.

 

 

.cover-event ul li .title {
    top: 20%; /* 위치 조정 */
    display: block; /* display 형식 바꾸기 */
    /*-webkit-line-clamp: 2;
    -webkit-box-orient: horizontal;*/
    color: rgba(15, 15, 15, 1);
    font-weight: bold; /* 굵게 */
    background-color: rgba(255, 255, 255, 0.5); /* 0.5의 투명도를 준 흰색 배경 */
    background-clip: content-box; /* 테두리를 제외한 글자 부분에만 배경색을 주기 위한 옵션 */
}

 

 

3) 밑에 more 는 괜히 글만 어지럽혀서 html 코드에서 주석처리를 했다. HTML에서 cover-event 클래스의 div 태그 아래에 있는 span 클래스를 주석처리하면 된다. 

 

 

<div class="cover-event">
  <span class="more>more</span>

 

 

밑에가 좀 허전해져서 css에서 top 속성값을 20%로 늘려서 조금 아래로 내렸다. 

 

 

 

4) 모바일 웹에서 가로 스크롤 없애기 

 

 

 

모바일 화면을 확인하니 오른쪽에 여백이 있고 스크롤로 자꾸 넘어갔다. stack overflow에 disable horizontal scroll 을 검색하니 바로 해결법이 나온다.

 

 

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

 

overflow 속성은 내용물이 넘칠 때 어떻게 할 지를 설정할 수 있다. 속성값으로 hidden을 주면 내용물이 잘리고 가로 스크롤이 나타나지 않는다. max-width로 최대 화면값을 주면 내용물이 잘리는 것을 막을 수 있다.