블로그 상단 이미지 배너 없애기(1)를 했는데...
티스토리 | 오디세이 스킨 - 블로그 글 상단 이미지 배너 없애기
오디세이 스킨의 기본적인 형태에서는 블로그 글의 상단에 글 내 대표 이미지가 배너 이미지로 설정되어 나타난다. 이미지 크기도 잘 맞지 않고 제목을 읽는 데도 별 도움이 되지 않는 듯해 없
eunoblog.tistory.com
윗글에서 몇 가지 코드를 수정하여 제목의 배경이미지는 어찌어찌 지웠는데, 이 한없는 공백과 제목의 큰 글씨가 눈에 거슬린다.
개발자 도구를 통해 살펴보면 html 문서에서 이 부분이 article-header에 해당하는 부분이고, 안쪽에 제목이 입력되고 있는 부분이 inner-header라는 클래스로 작성되어 있는데, article-header에 해당하는 부분이 여전히 페이지 내에서 일정한 크기와 배치를 차지하기 때문에 이 부분을 최소화해야 한다. 지우자. 이번엔 강경파다.
1단계 - html 수정하기
블로그 관리 > 스킨 편집(꾸미기) > html 편집으로 들어간다. html문서를 백업해 두자.
[CTRL + F]로 'article-header'라는 키워드를 검색한다. 아래와 같은 코드 구조를 찾아내자.
빨간 박스로 표시한 부분을 지우면 된다. html의 명령어를 태그라고 하는데, 태그는 여는 태그와 닫는 태그가 쌍을 이룬다. <html>로 시작된 태그는 반드시 어딘가에서 </html>태그로 닫혀야 한다. <head>~</head>, <body>~</body>도 마찬가지이고, <div>도 그렇다. 그래서 각 코드에서 <div>로 열린 article-header에 대한 코드를 지우면서 닫는 코드 </div>도 짝을 이루어 지워줘야 한다.
이렇게 코드를 수정하면 더이상 넓은 공간을 차지하던 article-header를 호출하지 않게 되고, 바로 제목이 입력되던 inner-header만 호출하게 되기 때문에 아래와 같은 화면으로 나타나게 된다.
제목의 크기는 줄어들었는데, 빈 공간이 더 크게 남게 된 듯하다. 해결해보자.
2단계 - css 수정하기
개발자도구를 통해 살펴보면 해당부분은 tt-body-page라는 속성에 의해 여백이 설정되고 있다. css를 백업해 두고 수정을 해보자.
css에서 tt-body-page .main이라는 속성을 찾으면 두 가지가 나오는데, #으로 시작하는 속성은 기본 화면에서의 속성값이고, @media로 시작하는 속성은 반응형 페이지를 만들기 위해 부여되는 속성이다. 반응형 페이지라 함은, 화면의 크기가 커지거나 작아짐에 따라 적절한 크기와 배치로 나타나도록 설정되는 웹페이지를 말한다.
여기에 padding-top이라고 되어있는 부분은 윗부분의 여백을 말하는데, 원래는 기존의 article-header가 이 여백에 해당하는 부분에 표시가 되었었으나, article-header가 사라진 자리에 여백만 남게 된 것이다. padding-top 속성값 자체를 지워줘도 되고, 호출되는 속성값이니 속성값을 0px로 수정해도 된다.
그러면 이렇게 여백이 사라지고 제목이 적절하게 표시되는 화면이 된다.
3단계 - 수정하기 버튼이 사라졌다?
제목을 다시 살펴보니, 빨간 박스에 있었어야 할 수정 버튼이 사라졌다. 알고보니 여전히 그 자리에 있지만, 이 아이콘의 색깔이 하얀색이어서 보이지 않게 된 것.
css에서 ico_more라는 키워드를 찾아 색깔을 수정하자. 나는 #333이라는 색으로 수정했다.
다시 돌아온 수정하기 버튼.
'IT일반' 카테고리의 다른 글
| 파이썬 프로그래밍 - 입출력(4), 여러 값 입력받기 split, map (0) | 2024.10.24 |
|---|---|
| 파이썬 프로그래밍 - 입출력(3), 입력 명령어 input, 형변환 명령어 int, float, str (1) | 2024.10.15 |
| 티스토리 오디세이 스킨, 블로그 글 상단 이미지 배너 없애기(1) (1) | 2024.10.13 |
| 티스토리 오디세이 스킨, 코드 블럭 꾸미기, html, css 수정하기 (0) | 2024.10.12 |
| 파이썬 프로그래밍 - 입출력(2), print, 서식 문자 활용, format 함수 (1) | 2024.10.12 |