티스토리 블로그 : 모바일에서 표의 글자 크기 줄이는 꿀팁 코드 적용하기

 

 

표를 적용했는데 모바일에서는 글쎄...

 

블로그를 운영하면서 표를 글본문에 적용할 일이 생기곤합니다. 하지만 표를 내맘대로 다루기위해서는 html구조에 대해서 많이 이해하고 있어야하며 그때그때 변형하고 다듬는 일이 사실 많이 힘들죠. 표를 적용했다고 해도 PC의 브라우저상에서는 잘 보이고 깔끔히 정돈된듯하게 보이지만 모바일에서 글을 확인해보면 정말 맘에 안드는 경우가 종종 있습니다.

 

모바일에서는 특히나 글본문의 글자크기가 표의 글자크기가 동일하게 적용되어서 표가 찌그러지거나 글자의 줄이 여러줄로 변형되어서 PC에서 보던 표의 깔끔함이 없어지고 어지럽게 보이게 됩니다. 이를 해결하는 하나의 방법으로 모바일에서 접속했을때는 표안의 글자크기를 자동으로 줄여주어서 표가 더욱 깔끔하게 보이도록 만들 수 있는데요. 그 방법을 아래의 글에 적어보고자 합니다. 저처럼 생각하셨던 분들은 아래의 코드를 적용해서 문제해결을 해볼수 있도록 하세요.

 

 

 

모바일에서 표 깔끔하게 보이는 방법

 

먼저 적용하는 방법을 소개해 드리기에 앞서서 제 글의 경우 어떻게 표가 나타나고 적용되어 있는지를 살펴보고 코드를 적용해가면서 변경된 모습을 확인해보겠습니다.

 

 

PC에서 웹브라우저로 확인했을때

아래의 캡처이미지 처럼 표가 깔끔하게 정리되어 있는 모습을 볼 수 있습니다. 아래의 표를 직접 확인해보실 분은 아래의 링크를 클릭해보세요.

 

서울시 성북구 대형폐기물 인터넷신고 품목별 수거기준 및 비용

 

PC브라우저 글의 표를 캡처한 화면

 

 

이 글을 모바일화면에서 확인해보면 다음과 같습니다. 

 

기본적으로 적용된 표안의 글자크기를 봐주세요

 

 

이제 코드를 적용하고 난후의 모바일 화면은 어떻게 달라졌는지 확인해볼께요. 아래의 캡처이미지를 참고해주세요.

 

글자크기를 조정한 후의 표를 확인해보세요

 

 

차이가 느껴지시나요? 글자가 작게 표현되어서 표가 더 넓어보이고 정돈된 느낌을 모바일에서 느낄 수 있죠? 이렇게 적용할 수 있는 CSS코드가 있습니다. 이제 간단하게 적용하면 저처럼 표의 글자를 별도의 작업해주지 않아도 적용되는것을 확인해볼 수 있습니다.아래의 CSS코드 적용하는 방법을 확인해보고 그대로 따라만 하시면 되겠습니다.

 

 

 

블로그에 CSS코드 적용하기

 

1. 블로그 관리자화면에서 꾸미기 → 스킨편집으로 이동합니다.

 

 

 

2.스킨편집페이지에서 html편집을 클릭합니다.

 

 

3. html / css / 파일업로드 중 css를 눌러 편집창으로 이동합니다.

 

 

 

4. CSS 편집창이 나왔다면 코드편집창의 가장 아래로 이동한 뒤에 아래처럼 코드를 삽입하여 주세요.

 

 

해당코드를 복사해서 그대로 붙여넣기 하시면 되겠습니다. 여기의 코드가 마우스로 복사가 안되는 분들은 메모장파일을 다운로드 받아서 그안의 내용을 복사해서 사용하시면 됩니다.

 

CSS코드

/* 모바일 화면에서 테이블 스타일 조정 */
@media (max-width: 768px) {
    table {
        font-size: 0.8em; /* 모바일에서 글자 크기를 줄입니다 */
        width: 100%; /* 테이블 너비를 100%로 설정하여 화면에 맞게 조정 */
        overflow: hidden; /* 가로 스크롤을 숨기고 테이블이 화면에 맞게 조정 */
        display: block; /* 블록 요소로 변경하여 화면 조정 */
        table-layout: auto; /* 셀의 내용에 맞게 테이블 너비 조정 */
    }
    
    td, th {
        font-size: 0.8em; /* 테이블 셀 내 글자 크기 줄이기 */
        padding: 8px; /* 셀 내 여백 추가 */
    }
}

 

 

메모장파일

모바일화면에서 테이블 스타일 조정.txt

0.00MB

 

 

 

 

 

관련링크

 

이 글의 썸네일처럼 나도 쉽게 썸네일을 만들어보고싶다 생각하면 클릭

 

내 썸네일도 만들어보기

 

 

이 블로그에 쓰인 스킨 다운로드 받아서 내 블로그에 적용해보기

 

이 스킨 다운로드

 

 

 

관련글

 

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

🎉티스토리 블로그에 정리되지 않은 목록을 표로 쉽게 삽입하는 꿀팁

🎉티스토리 블로그에 정리되지 않은 목록을 표로 쉽게 삽입하는 꿀팁

 

티스토리 블로그 소제목을 깔끔하고 눈에 띄게 꾸미는 간단한 방법

티스토리 블로그 소제목을 깔끔하고 눈에 띄게 꾸미는 간단한 방법

 

티스토리 블로그에 'SNS아이콘' 달고 글을 쉽게 공유하게 만들어주세요.

티스토리 블로그에 'SNS아이콘' 달고 글을 쉽게 공유하게 만들어주세요.

 

 

 

참고하세요

 

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 쿠팡, 알리익스프레스등의 파트너스 활동으로 인한 수익금을 얻는 링크가 있습니다.
· 이 블로그의 홈으로 가시려면 여기를 누르셔도 됩니다.

· 삼성 갤럭시북4의 할인율은 2024.08.05일자 기준입니다.

📣 삼성 갤럭시북4 윈도우,한글기본설치에 29%할인까지