티스토리 광고 본문 보다 튀어나온 영역 숨기기, overflow : hidden

 

"안녕하세요"

 

간혹 광고 영역이 아래 이미지처럼 본문 영역보다 커서 프로필까지 침범하는 경우가 있을 거예요.

그럴 경우 본문 영역보다 많이 튀어나온 부분을 숨겨주는 방법을 알려드리겠습니다.

 

광고 영역이 프로필까지 침범하는경우

---

1. 크롬 환경에서 F12 선택 -> 화살표 부분 클릭 후 원하는 영역에 마우스 올려 Class 확인하기

본문 영역에 광고가 올라가므로 본영 역의 Class 확인이 필요하다.

Class는 CSS에서 쓰는 변수라고 보시면 됩니다.

div.area-main이라고 적혀있는데 .area-main의.(점 dot)이 class의 시작을 알려주는 표시이다.

 

2. 영역이 Class = "area-main"이라는 것을 확인해 두자.

 

3. 티스토리 - 블로그 관리 - 꾸미기 - 스킨 편집 - html 편집- CSS를 눌러준다.

 

4. CSS 소스코드 영역 쪽 클릭 후 Ctrl + F(검색하기)  -  area-main을 검색

 

5. .area-main{    } 영역 안에 overflow:hidden;을 추가 입력한다.

 

overflow:hidden의 뜻 : 넘치는 영역을 숨긴다.

본문 영역에 들어간 모든 이미지, 글자 등이 영역 밖으로 튀어나갔을 경우 그 부분을 숨김

 

5. CSS에 추가 후 미리 보기 or 적용을 하여 광고 영역이 아래와 같이 잘려서 보이는지 확인.

아래 빨간 영역처럼 프로필 영역까지 침범하지 않고 잘린 것을 확인할 수 있다.

적용 후

---

적용 전

 

더 깔끔한 블로그를 만들기 위해 노력하는 중이에요.

 

필요하시면 한번 적용해 보세요.^^

 

end.