티스토리 사진 좌우 여백 제거 방법

티스토리 블로그의 경우 보통 본문 여백을 설정하면 사진 여백과 글자 여백이 일치한다.

그런데 모바일 환경에서 사진을 좀 더 크게 보고 싶다 할 때 사진 여백을 없앨 수 있는데 그 방법을 알아보자.

 

.gra-box figure.imageblock {
  max-width: 105% !important;
  margin-left: -1em;
  margin-right: -1em;
}

 

일단 위 코드를 css 밑줄에 쓰면 되는데

앞의 클래스는 브라우저 F12를 누르면 나오는 개발자 도구에 들어가서

개발자 도구의 제일 왼쪽 위 요소 클릭 select an element in the page to inspect it 을 누르고 난 뒤

본문을 클릭하면 html 코드를 볼 수 있고

클릭한 본문 내용에 대한 html 코드에서 해당하는 class를 찾아보면 나온다

 

보통<div class="클래스명" 이렇게 나올 것이다. 나 같은 경우는 gra-box 였다.

 

참고로 여백 설정하는 방법은

 

margin-top 위

margin-right 오른쪽

margin-bottom 아래

margin-left 왼쪽

 

margin 1px; 모든 방향: 1px

margin 1px 2px; 상하: 1px, 좌우: 2px

margin 1px 2px 3px; 상: 1px, 좌우: 2px, 하: 3px

margin 1px 2px 3px 40px 상: 1px, 우: 2px, 하: 3px, 좌: 4px

 

이렇게 여백 설정하는 방법이다. margin 말고 padding border도 동일한 방법으로 사용한다.

 

기본 좌우 여백이 1em으로 되어 있었기 때문에 -1em으로 마진을 - 해 줬다.

 

그리고 티스토리 이미지의 경우 <figure class="imageblock alignCenter" 이렇게 나오니까 위와 같은 코드를 쓰면 된다.

 

 

figure.imageblock.alignCenter {
  max-width: 105% !important;
  margin-left: -1em;
  margin-right: -1em;
  text-align: center;
  height: auto;
  box-sizing: border-box;
}

 

위와 같은 코드를 써도 된다.

height: auto; 코드와 text-align: center; box-sizing: border-box; 는 임의로 넣은 코드로 안 넣어도 되는 코드다

 

문제는 위 두 코드를 써도 이미지가 죄다 왼쪽으로 정렬되고 중앙정렬도 안된다

 

 

.gra-box figure.imageblock {
  display:block;
  max-width: 105% !important;
  margin-left: -1em;
  margin-right: -1em;
}

 

중앙 정렬하기 위해서 위와 같이 display:block; 블록 속성을 추가해야 되는데

이러면 원본 이미지의 해상도를 억지로 늘려서 가로세로로 꽉 채워서 표시되게 된다.

이러면 이미지가 너무 흐릿해지고 보기가 싫어진다.

 

이점은 해결을 하지 못했다.

누가 아는 사람 있으면 알려주시면 감사하겠다.

 

 

댓글로 choono님이 알려주셨는데

display: flex;

justify-content: center;

를 추가하면 된다고 한다.

그래서 코드를 다시 추가해서 해보면

 

.gra-box figure.imageblock {
  max-width: 110% !important;
  margin-left: -1em;
  margin-right: -1em;
  display: flex;
  justify-content: center;
}

 

.gra-box figure.imageblock {
  max-width: 110% !important;
  margin: 20px -1em;
  display: flex;
  justify-content: center;
}

 

위와 같이 display: flex; 와 justify-content: center; 를 추가하고  max-width도 110%로 수치를 더 올렸다.

가끔 오른쪽 공백이 없어지지 않는 경우 max-width를 조절하면 해결될 수도 있다.

 

두번째 코드는 사진 위에 20px 정도 여백을 주는 코드이다.

사진 위에 여백이 너무 없는거 같아서 해보았다.

 

그래서 해보니까 이제 잘 된다. 해결되어서 기쁘다.

 

 

figure[data-ke-type='video'][data-ke-style='alignCenter'] {
    max-width: 110% !important;
    margin: 20px -1em;
}

 

추가로  위의 코드는 유튜브 동영상 본문 여백을 제거하는 코드다.

 

 

다시 한번 알려주신 choono 님께

 

 

압도적 감사 드립니다.

 

티스토리 유튜브 영상 반응형으로 만들기