홈 설정 - 커버 정의
뉴스레터(사진과 요약) - 최신 글 4개
커버갤러리1 (5개) - 인기글 (조회 수 기준)
이벤트 배너 (배너형 직사각형 with 타이틀) - 4개 선정 (데이터 모델링, 열무김치, 벵갈루루, 책을 읽다)
섬네일 리스트 (큰 사진과 제목) - 사진 3개 '글 선택'
사이드 바
트위터 타임라인 : https://twitter.com/eunsaeng?ref_src=twsrc%5Etfw
블로그 제목 색상 변경
css 파일에서 #header h1을 찾아서,
#header h1 {
padding: 23px 0 ;
font-family: 'Jua', sans-serif; /*변경을 원하는 폰트명 넣기*/
font-weight: 200; /*폰트 두께 변경*/
font-size: 1.6em; /*폰트 크기 변경*/
line-height: 10px; /*폰트 줄간격 변경*/
letter-spacing: -0.2px; /*폰트 자간 변경*/
color: #333; /*폰트 색 변경*/
}
반영이 잘 안 되면 그 아래의 #header h1 a { 의 color도 변경합니다.
글꼴 추가/변경
산돌 삼립호빵체 - 블로그 포스팅 제목에 사용
css 파일의 맨 첫 부분에 폰트 영역이 있음
/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
font-family: 'SDSamliphopangche_Outline';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GothicA1';
src: url('./images/GothicA1-Bold.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'GothicA1';
src: url('./images/GothicA1-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GowunDodum-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SDSwaggerTTF';
src: url('./images/SDSwaggerTTF.ttf');
font-weight: normal;
font-style: normal;
}
/* Type Selector Reset */
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'GowunDodum-Regular','GothicA1','GmarketSansMedium','AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
color: #555;
}
북클럽 제목 변경
크기 변경
CSS에서 Ctrl+F를 누르고 'post-cover {'로 검색하여 1041번 근처 height :340px → 200px로 수정합니다.
200px로 했지만 마음에 드는 수치로 수정하시면 됩니다.
수직 위치 변경
CSS에서 Ctrl+F를 누르고 padding-bottom으로 검색하여 1067번 근처(post-cover .inner) padding-bottom:78px → 39px로 수정합니다. 39px로 했지만 마음에 드는 수치로 수정하시면 됩니다. 2952부근에서 모바일을 위한 크기도 38px 를 18로 바꾸어 줍니다.
제목 배경과 본문 사이의 여백 조정
CSS에서 Ctrl+F를 누르고 padding-top으로 검색하여 2번째 440번 근처 (#tt-body-page #container { ) padding-top:339px → 180px로 수정합니다. PC만 생각하면 150px도 좋지만, 모바일에서는 너무 좁게 되므로 180으로 했습니다.
배경을 약간 어둡게
'post-cover:before'를 검색하여, background-color:rgba(0,0,0,0.25)를 찾은 다음에 25를 40정도로 바꾸어 더 어둡게 합니다.
글꼴 변경
'post-cover h1'을 검색해서 그 안에 'font-family: 'SDSamliphopangche_Outline';'를 추가해서 넣습니다.
북클럽 본문 글꼴/크기 변경
'.entry-content p'를 검색해서, font-size를 조금씩 수정해서 최적의 조건을 찾습니다.
.entry-content p {
margin-bottom: 32px;
word-break: break-all;
font-size: 1em;
line-height: 1.7;
color: #555;
}
모바일을 위해 '.entry-content p'를 검색하여 아래로 더 내려와서, 'font-size: 1.1em;'을 추가해 넣는다.
글꼴도 고딕으로 바꿀 수 있다.제목의 글꼴과 굵기도 변경할 수 있다.
리스트를 위해서는 다음과 같이 모바일 영역에 추가해 넣으면 된다.
기타
모바일의 줄간이 너무 좁아 보이면 아래처럼 주석으로 바꿔버리면 깔끔해짐
소제목 변경
SNS 공유를 위한 html 추가
1. image file들 업로드
2. 본문 공유 스크립트 :
홈 설정 - 커버 정의
뉴스레터(사진과 요약) - 최신 글 4개
커버갤러리1 (5개) - 인기글 (조회 수 기준)
이벤트 배너 (배너형 직사각형 with 타이틀) - 4개 선정 (데이터 모델링, 열무김치, 벵갈루루, 책을 읽다)
섬네일 리스트 (큰 사진과 제목) - 사진 3개 '글 선택'
사이드 바
트위터 타임라인 : https://twitter.com/eunsaeng?ref_src=twsrc%5Etfw
블로그 제목 색상 변경
css 파일에서 #header h1을 찾아서,
#header h1 {
padding: 23px 0 ;
font-family: 'Jua', sans-serif; /*변경을 원하는 폰트명 넣기*/
font-weight: 200; /*폰트 두께 변경*/
font-size: 1.6em; /*폰트 크기 변경*/
line-height: 10px; /*폰트 줄간격 변경*/
letter-spacing: -0.2px; /*폰트 자간 변경*/
color: #333; /*폰트 색 변경*/
}
반영이 잘 안 되면 그 아래의 #header h1 a { 의 color도 변경합니다.
글꼴 추가/변경
산돌 삼립호빵체 - 블로그 포스팅 제목에 사용
css 파일의 맨 첫 부분에 폰트 영역이 있음
/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
font-family: 'SDSamliphopangche_Outline';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GothicA1';
src: url('./images/GothicA1-Bold.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'GothicA1';
src: url('./images/GothicA1-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GowunDodum-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SDSwaggerTTF';
src: url('./images/SDSwaggerTTF.ttf');
font-weight: normal;
font-style: normal;
}
/* Type Selector Reset */
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'GowunDodum-Regular','GothicA1','GmarketSansMedium','AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
color: #555;
}
북클럽 제목 변경
크기 변경
CSS에서 Ctrl+F를 누르고 'post-cover {'로 검색하여 1041번 근처 height :340px → 200px로 수정합니다.
200px로 했지만 마음에 드는 수치로 수정하시면 됩니다.
수직 위치 변경
CSS에서 Ctrl+F를 누르고 padding-bottom으로 검색하여 1067번 근처(post-cover .inner) padding-bottom:78px → 39px로 수정합니다. 39px로 했지만 마음에 드는 수치로 수정하시면 됩니다. 2952부근에서 모바일을 위한 크기도 38px 를 18로 바꾸어 줍니다.
제목 배경과 본문 사이의 여백 조정
CSS에서 Ctrl+F를 누르고 padding-top으로 검색하여 2번째 440번 근처 (#tt-body-page #container { ) padding-top:339px → 180px로 수정합니다. PC만 생각하면 150px도 좋지만, 모바일에서는 너무 좁게 되므로 180으로 했습니다.
배경을 약간 어둡게
'post-cover:before'를 검색하여, background-color:rgba(0,0,0,0.25)를 찾은 다음에 25를 40정도로 바꾸어 더 어둡게 합니다.
글꼴 변경
'post-cover h1'을 검색해서 그 안에 'font-family: 'SDSamliphopangche_Outline';'를 추가해서 넣습니다.
북클럽 본문 글꼴/크기 변경
'.entry-content p'를 검색해서, font-size를 조금씩 수정해서 최적의 조건을 찾습니다.
.entry-content p {
margin-bottom: 32px;
word-break: break-all;
font-size: 1em;
line-height: 1.7;
color: #555;
}
모바일을 위해 '.entry-content p'를 검색하여 아래로 더 내려와서, 'font-size: 1.1em;'을 추가해 넣는다.
글꼴도 고딕으로 바꿀 수 있다.제목의 글꼴과 굵기도 변경할 수 있다.
리스트를 위해서는 다음과 같이 모바일 영역에 추가해 넣으면 된다.
기타
모바일의 줄간이 너무 좁아 보이면 아래처럼 주석으로 바꿔버리면 깔끔해짐
소제목 변경
SNS 공유를 위한 html 추가
1. image file들 업로드
2. 본문 공유 스크립트 : 를 검색해서 찾아보자. 대개 두번째의 것을 찾아라. 그 아래에 아래의 내용을 추가하라.
3. 카카오 톡은 추가적으로 아래 내용을 head와 /head 사이에 넣어주자.
3. 카카오 톡은 추가적으로 아래 내용을 head와 /head 사이에 넣어주자.
'Management > 일 잘하기' 카테고리의 다른 글
| 네이버 검색 제외 요청 방법 (0) | 2022.12.09 |
|---|---|
| 티스토리 에디터 단축키 (0) | 2022.11.22 |
| 생키 다이어그램 Sankey Diagram (0) | 2022.11.01 |
| 삼성전자 레이저 프린터 C 시리즈 tips (0) | 2022.06.22 |
| Mac OS (몬터레이)에서 ipTIME 공유기로 네트워크 프린터 설정 (1) | 2022.05.02 |
| 이메일 관리법 (0) | 2022.01.17 |
