2019. 1. 6. 18:34ㆍIT, 테크
지난 시간의 티스토리 Portfolio (포트폴리오) 스킨의 하단 디자인 수정에 이어서 이번 포스팅에서는 홈화면 구성을 위한 커버아이템 디자인을 수정하는 방법을 정리해본다.
커버아이템이란 티스토리 신규 스킨들이 제공하는 홈화면 구성용 메뉴이다. 기존에 사용되던 티에디션이나 태터디스크는 이제 신규 블로그에서는 사용할 수가 없는 것으로 보인다.
과거보다 더 향상된 디자인과 편의성을 제공하는 커버아이템은 와이드패널, 슬라이더, 갤러리, 섬네일 리스트, 리스트 등으로 구성되는데 블로그의 성격에 따라 잘 쓰면 시각적으로 화려하고 세련된 느낌을 줄 수가 있다.
블로그 접속 시 헤드라인이나 최신글을 보여주기 위한 홈 커버 중 와이드패널과 리스트 예시
본 포스팅에서 설명할 주요내용은 아래와 같으며, 기본적인 CSS 편집이 어려울 경우 지난 글을 참조하시면 되겠다. (참고링크: BLAYING)
1. 커버아이템 최상단 위치 조정
2. 커버아이템 요소간 세로간격 조정
3. 커버아이템 제목 크기 수정
4. 와이드패널 사진 내 제목박스 너비 확장
5. 와이드패널 사진 내 제목 글자 크기 수정
6. 와이드패널 사진 내 본문요약 글자 크기 수정
커버아이템 최상단 위치 조정
커버아이템 전체 기준의 최상단 위치를 조정하는 방법이다.
해당 코드는 데스크탑과 모바일 적용 코드가 분리되어 있다.
데스크탑용 위치를 조정할 경우, CSS 코드에서 '.area_cover {'를 검색하여 바로 밑에 있는 'margin-top:' 수치를 조정하면 된다.
모바일용 위치를 조정할 경우, 좀 더 아래에 있는 '@media screen and (max-width: 1023px) {' 섹션에 포함된 '.area_cover {'를 찾아 바로 아래의 'margin-top:' 수치를 조정하면 되겠다.
데스크탑용/모바일용 코드
/* area_cover */
.area_cover {
margin-top: 268px; } //데스크탑용 세로 위치 조정
.area_cover a {
text-decoration: none; }
.area_cover button {
border: 0;
border-radius: 0;
background-color: transparent;
cursor: pointer;
overflow: visible; }
/* media query - mobile */
@media screen and (max-width: 1023px) {
.area_cover {
margin-top: 130px; } } //모바일용 세로 위치 조정
데스크탑용/모바일용 코드 (리스트 커버)
/* type_notice - 리스트 커버 */
.type_notice {
max-width: 1180px;
margin: 120px auto 0 auto; } //데스크탑용 리스트 상단 간격 조정
.type_notice:after {
(...중간 많이 생략)
/* media query - mobile */
@media screen and (max-width: 1023px) {
.type_notice,
.category_type_notice {
margin-top: 60px; //모바일용 리스트 상단 간격 조정
padding: 0 24px;}
리스트가 아닌 기타 요소별 코드도 아래와 같이 유사하니 참조하시기 바란다.
데스크탑용/모바일용 코드 (와이드패널 커버)
/* type_banner - 와이드패널 커버 */
.type_banner {
max-width: 1180px;
margin: 120px auto 0 auto; } //데스크탑용 와이드패널 상단 간격 조정
(...중간 많이 생략)
/* media query - mobile */
@media screen and (max-width: 1023px) {
.type_banner {
margin-top: 60px; //모바일용 와이드패널 상단 간격 조정
padding: 0 24px;}
데스크탑용/모바일용 코드 (슬라이드 커버)
/* type_featured - 슬라이드 커버 */
.type_featured {
position: relative;
margin-top: 120px; } //데스크탑용 슬라이더 상단 간격 조정
.type_featured:after {
content: '';
(...중간 많이 생략)
/* // type_featured */
/* media query - tablet */
@media screen and (max-width: 1406px) {
.type_featured {
margin-top: 60px; } //모바일, 태블릿용 슬라이더 상단 간격 조정
.type_featured .text_slide {
padding: 0 80px;
font-size: 40px; }
데스크탑용/모바일용 코드 (갤러리 커버)
/* type_post - 갤러리 커버 */
.type_post {
max-width: 1180px;
margin: 120px auto -20px auto; //데스크탑용 갤러리 상단 간격 조정
overflow: hidden; }
/* media query - mobile */
@media screen and (max-width: 1023px) {
.type_post {
margin: 60px auto 0 auto; } //모바일용 갤러리 상단 간격 조정
.title_section {
margin: 0 0 20px 0;
font-size: 16px;
커버아이템 제목 글자 크기 수정
커버아이템 요소들의 제목 크기를 수정할 수 있는 방법이다.
데스크탑과 모바일 설정이 분리되어 있다.
데스크탑용 크기를 조정할 경우, CSS 코드에서 '.title_section {'을 검색한 뒤 아래에 있는 'font-size:'를 조정하면 된다.
모바일용 크기를 조정할 경우에는 더 아래에 있는 '@media screen and (max-width: 1023px) {' 내의 '.title_section {'에 포함된 'font-size:' 수치를 조정하자.
데스크탑용/모바일용 코드
/* // area_cover */
/* title_section */
.title_section {
position: relative;
width: 100%;
margin: 0 0 20px 0;
font-size: 20px; //데스크탑용 커버 제목 글자크기 수정
font-weight: 900;
color: #333; }
(.. 중간 생략)
/* media query - mobile */
@media screen and (max-width: 1023px) {
.type_post {
margin: 60px auto 0 auto; }
.title_section {
margin: 0 0 20px 0;
font-size: 16px; //모바일용 커버 제목 글자크기 수정
text-align: left; }
와이드패널 사진 내의 제목박스의 너비를 확장하는 방법이다.
기본스킨 사용 시 모바일의 경우 사진 전체에 걸쳐 제목을 쓰도록 되어 있는데, 데스크탑의 경우는 50%만 쓸수있게 되어 있어서 글자크기가 클 경우 몇 글자 출력이 되지 않는 경우가 있으므로 수정이 필요할 수 있겠다.
CSS 코드에서 '.list_type_banner .box_content {' 코드를 찾아서 아래에 있는 'width: 50%;'를 삭제하거나 100%로 수정하면 데스크탑에서의 너비를 수정할 수 있다.
혹시나 기본 100%의 비율이 적용된 모바일에서의 수치를 역으로 줄일 경우에는 아래 코드처럼 'width: 100%;'를 더 낮게 조정하면 되겠다.
데스크탑용/모바일용 코드
.list_type_banner .box_content {
width: 50%; //데스크탑에서 너비를 100%로 키울 경우 라인을 삭제하거나 100%로 조정
padding: 47px 45px 50px 48px; }
(.. 중간 생략)
/* media query - mobile */
@media screen and (max-width: 1023px) {
.type_banner {
margin-top: 60px;
padding: 0 24px;}
.list_type_banner .link_banner {
height: 100px; }
.list_type_banner .box_content {
width: 100%; //모바일에서 너비를 줄일 경우 원하는 비율로 조정
padding: 25px; }
와이드패널 사진 내 제목 글자 크기 수정
와이드패널의 사진 내에 있는 제목의 글자 크기를 조정하는 방법이다.
기본 스킨에서 데스크탑은 큰 문제 없으나 모바일의 경우 글자가 너무 커서 조정할 필요가 있어 보인다.
데스크탑용 크기를 수정할 경우, CSS 코드에서 '.list_type_banner .link_banner strong {'를 찾고 바로 아래의 'font-size:'를 수정하면 된다.
모바일용 크기를 수정할 경우, 더 아래에 있는 '@media screen and (max-width: 1023px) {' 하단의 '.list_type_banner .link_banner strong {'를 찾아서 'font-size:'의 크기를 조정하면 된다.
데스크탑용/모바일용 코드
/* // type_card */
/* type_banner - 와이드패널 커버 */
.type_banner {
max-width: 1180px;
(..중간 생략)
.list_type_banner .link_banner strong {
display: block;
max-height: 58px;
font-size: 50px; //데스크탑용 제목 크기 수정
font-weight: 900;
color: #fff;
/* media query - mobile */
@media screen and (max-width: 1023px) {
.type_banner {
(.. 중간 생략)
.list_type_banner .link_banner strong {
display: block;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px; //모바일용 제목 크기 수정
와이드패널 사진 내 본문요약 글자 크기 수정
와이드패널의 사진 내에 있는 본문요약 글자의 크기를 수정하는 방법이다.
데스크탑과 모바일의 코드를 공유하기 때문에 별도 적용이 필요 없으며, CSS 코드에서 'list_type_banner .link_banner .text {'를 찾고 바로 아래의 'font-size:'를 수정하면 된다.
데스크탑용/모바일용 코드
/* // type_card */
/* type_banner - 와이드패널 커버 */
.type_banner {
max-width: 1180px;
(..중간 생략)
.list_type_banner .link_banner .text {
max-height: 80px;
margin: 12px 4px 0 2px;
font-size: 16px; //데스크탑 및 모바일용 본문요약 글자 크기 수정
color: #fff;
line-height: 1.62;
이상으로 홈화면 구성용 커버아이템의 몇가지 팁을 알아보았다.
다음 시간에는 메뉴 관련 수정을 해보도록 하자.
'IT, 테크' 카테고리의 다른 글
| 애드센스 자동광고 제거 방법 및 앵커 광고 제거가 안될 경우의 확인사항 (0) | 2019.02.06 |
|---|---|
| [티스토리] Portfolio 스킨 검색 메뉴 디자인 수정 (7) | 2019.01.07 |
| [티스토리] Portfolio 스킨 사이드바 메뉴 디자인 수정 (1) | 2019.01.07 |
| [티스토리] Portfolio 스킨 하단 디자인 수정 (0) | 2019.01.06 |
| [티스토리] Portfolio 스킨 상단 디자인 수정 (0) | 2019.01.06 |