안녕하세요?
이번 포스팅에서는 티스토리 블로그 왓에버(Whatever) 스킨에서 헤더(header) 부분 고정 시 발생하는 태블릿과 모바일에서의 출력 문제를 해결하는 방법에 대해서 소개해드리겠습니다. 지난 포스팅에서 소개해드린 티스토리 블로그 왓에버(Whatever) 스킨에서 헤더(header) 부분을 고정 및 수정하는 방법을 적용했을 때 나타나는 문제점을 해결하는 방법입니다. 지난 포스팅과 연결되는 내용이니 함께 봐주시길 바랍니다.
티스토리 왓에버(Whatever) 스킨에 헤더(header) 부분 고정 및 수정하는 방법
티스토리 왓에버(Whatever) 스킨에 헤더(header) 부분 고정 및 수정하는 방법
안녕하세요? 티스토리 왓에버(Whatever) 스킨에서 레이아웃 타입을 좌측 정렬로 하지 않는 이상 카테고리 메뉴가 최상단에 있기 때문에 포스팅을 다 읽고 다른 카테고리로 이동하기 위해서는 다시
rokggu.tistory.com
태블릿 화면상에서 카테고리 메뉴 버튼이 안 보이는 문제점 해결 방법
위에 링크로 남겨놓았던 이전 포스팅에서 다루었던 과정까지 진행하셨다면 태블릿 화면 기준으로 카테고리 메뉴 버튼이 안 보이는 문제점이 발생합니다. 그래서 이를 해결하는 과정을 설명드리겠습니다.
1. 위에서 언급드렸던 'CSS' 카테고리에서 '#header .mobile-menu' 부분을 찾아주세요.
'CSS' 화면 임의의 한 지점을 클릭해준 뒤 [Ctrl] 키와 [F] 키를 동시에 눌러주면 나오는 검색창에 '#header .mobile-menu' 또는 그 일부 'mobile-menu'정도를 입력해주시고 [Enter] 키를 눌러주세요. 그리고 노란색으로 음영 처리된 부분을 중심으로 '#header .mobile-menu' 부분을 찾아주시면 되시고 과거 'CSS' 카테고리 코드 수정까지 감안했을 때 보통 2191번째 행에서 2211번째 행 부근에서 위치하고 있을 겁니다.
2. 'right' 부분을 수정합니다.
'right' 부분이 초기에는 '19px'로 설정되어 있을 텐데 이는 태블릿 화면상에서 카테고리 메뉴 버튼의 오른쪽 여백을 의미합니다. 이 수치가 커지면 해당 여백이 넓어지고 반대로 작아지면 해당 여백이 좁아지는 것입니다. 이 포스팅에서는 'right' 부분을 '88px'로 설정해보겠습니다.
3. 우측 상단의 '적용' 버튼을 누른 뒤 변화된 카테고리 메뉴 버튼의 위치를 확인합니다.
모바일 화면상에서의 출력 문제 해결방법
모바일 화면상에서도 2가지 문제가 눈에 띄었습니다. 첫 번째 문제는 블로그 이름의 상하 위치, 두 번째 문제는 카테고리 메뉴 버튼이 보이지 않는다는 점입니다. 이를 해결하는 방법 또한 설명드리겠습니다.
1. 위에서 언급드렸던 'CSS' 카테고리에서 'Media Screen - Mobie' 부분을 찾아주세요.
'CSS' 화면 임의의 한 지점을 클릭해준 뒤 [Ctrl] 키와 [F] 키를 동시에 눌러주면 나오는 검색창에 'Media Screen - Mobie' 그 자체 또는 그 일부 'Mobie'정도를 입력해주시고 [Enter] 키를 눌러주세요. 그리고 노란색으로 음영 처리된 부분을 중심으로 'Media Screen - Mobie' 부분을 찾아주시면 되시고 과거 'CSS' 카테고리 코드 수정까지 감안했을 때 보통 2476번째 행에서 2496번째 행 부근에서 위치하고 있을 겁니다.
a. 블로그 이름의 상하 위치 수정 방법
a-2. 'Media Screen - Mobie' 부분 아래에서 '#header h1' 부분을 찾아주세요.
a-3. 'line-height' 부분을 수정합니다.
'line-height' 부분은 모바일 화면 상에서 헤더(header) 부분과 바디(body) 부분을 나누어주는 구분선과 블로그 이름 사이의 상하 간격으로 이 수치가 높아지면 해당 간격이 가까워지고 작아지면 해당 간격이 멀어지게 됩니다. '30px'로 설정해보겠습니다.
a-4. 우측 상단의 '적용' 버튼을 누른 뒤 변화된 상하 간격을 확인합니다.
b. 카테고리 메뉴 버튼 위치 수정 방법
b-2. 'Media Screen - Mobie' 부분 아래에서 '#header .mobile-menu' 부분을 찾아주세요.
b-3. 'right' 부분을 수정합니다.
'right' 부분은 모바일 화면 상에서 카테고리 메뉴 버튼의 오른쪽 여백을 의미하며 이 수치가 커지면 해당 여백이 넓어지고 반대로 작아지면 해당 여백이 좁아지는 것입니다. 이 포스팅에서는 'right' 부분을 '45px'로 설정해보겠습니다.
b-4. 우측 상단의 '적용' 버튼을 누른 뒤 변화된 카테고리 메뉴 버튼 간격을 확인합니다.
마무리
지금까지 티스토리 블로그 왓에버(Whatever) 스킨에서 헤더(header) 부분 고정 시 발생하는 태블릿과 모바일에서의 출력 문제를 해결하는 방법에 대해서 소개해드렸습니다. 티스토리 블로그 왓에버(Whatever) 스킨에서 헤더(header) 부분을 고정 및 수정하는 방법을 적용하신 뒤 태블릿과 모바일에서의 출력 문제로 고민 가지셨던 분들에게 많은 도움될 수 있는 포스팅이었으면 좋겠습니다. 감사합니다. 행복한 하루 보내세요.
관련글
구글 애널리틱스 IP 필터링 설정 불필요한 자료 데이터 수집 제외 기능
구글 애널리틱스 가입과 티스토리 블로그 유니버설로 연동 연결하는 방법
안녕하세요? 티스토리 블로그 하면서 방문자 분석을 위해 구글 애널리틱스를 이용 많이들 하시죠? 그만큼 구글 애널리틱스에 자신의 티스토리 블로그를 연동하는 것이 이제는 필수라고 할 수
rokggu.tistory.com
구글 애널리틱스 IP 필터링 설정 불필요한 자료 데이터 수집 제외 기능
구글 애널리틱스 IP 필터링 설정 불필요한 자료 데이터 수집 제외 기능
안녕하세요? 블로그나 사이트 개설 초기에는 아무래도 다른 사람들의 검색 유입보다 스스로가 방문하여 살피는 경우가 압도적으로 많기 때문에 불필요하게 자신의 IP가 구글 애널리틱스에 수집
rokggu.tistory.com
티스토리 왓에버(Whatever) 스킨에서 포스팅 제목 짤림 현상 해결 방법
티스토리 왓에버(Whatever) 스킨에서 포스팅 제목 짤림 현상 해결 방법
안녕하세요? 티스토리 왓에버(Whatever) 스킨을 이용하다 보면 아래 그림과 같이 포스팅 제목이 잘리는 현상을 발견할 수 있어요. 방문자 입장에서는 온전한 포스팅 제목을 보고 판단한 뒤 유입될
rokggu.tistory.com
이 포스팅의 내용이 도움이 되셨다면 공감 꾹♥
이 포스팅의 모든 내용에 대해 무단 복제 및 2차 생산 가공을 금지합니다.
하단