티스토리 스킨 편집 크롬 개발자 도구 활용하기

안녕하세요.

  

이번 포스팅에서는 티스토리 스킨 편집을 할 때 크롬 개발자 도구를 활용하는 방법에 대해 알아보겠습니다.

 

크롬 개발자 도구 활용

 

스킨 편집을 계속하다 보면 어떤 HTML, CSS 코드를 고쳐야 할지 감이 잡히지만, 처음에는 무엇을 손대야 하는지 막막하기만 합니다. 이럴 때 크롬 개발자 도구 (단축키 F12)를 활용하면 쉽게 변경할 부분을 찾을 수 있습니다.

 

크롬 개발자 도구 레이아웃

 

블로그 페이지에서 F12키를 누르면 위와 같은 레이아웃을 볼 수 있습니다. 왼쪽 영역에서 HTML을, 오른쪽 영역에서 CSS 코드 값들을 볼 수 있습니다. 이를 활용해서 북클럽 스킨 모바일 화면의 레이아웃 일부를 변경해보겠습니다.

우선 붉은색 테두리 안의 모바일 화면 보기를 클릭해 줍니다.

 

티스토리 모바일 화면

 

이제 위의 그림처럼 블로그의 모바일 화면이 어떻게 표시되는지 알 수 있습니다. 모바일 화면을 보면 ‘전체 글’ 문구가 혼자서 왼쪽에 치우쳐 있습니다. 이 부분을 블로그 제목, 포스팅 영역과 맞게 정렬해보겠습니다.

개발자 도구 요소 선택

개발자 도구에서 요소 선택 버튼을 클릭합니다. 마우스 커서를 포스팅 영역에 올려놓고 클릭하면 화면상으로 좌/우 패딩이 24px라는 것을 바로 알 수 있습니다. 그리고 CSS 코드가 보이는 영역에 padding: 0 24px; 로 설정되어 있는 것도 확인할 수 있습니다.

 

이제 ‘전체 글’ 영역에도 왼쪽 패딩을 24px로 적용해 주면 된다는 걸 알 수 있습니다.

 

CSS 속성 확인

 

동일한 방법으로 ‘전체 글’ 영역을 클릭하면 CSS 코드 창에 해당 영역의 여러 값들이 나타나게 됩니다. style.css? ~ 2240 이라고 적혀 있는 부분의 의미는 CSS 편집 창을 열었을 때 2240번째 행에 해당 구문들이 존재한다는 의미입니다.

 

위의 그림에서 보면 ‘전체 글’에 해당하는 CSS 코드 영역이 2개인 걸 알 수 있습니다.

첫 번째 .list-type-thumbnail .post-header {

 

두 번째 @media screen and (max-width: 767px) .post-header {

 

여기서 편집해야 할 부분은 두 번째 항목입니다. 티스토리 스킨들은 해상도에 맞게 반응형으로 변할 수 있도록 해상도 구분 문구를 CSS에 적용합니다.

 

.list-type-thumbnail .post-header {

    margin-bottom: 28px;

    padding-bottom: 18px;

    border-bottom: 1px solid #eee;

}

 

첫 번째 영역의 값들이 PC 화면에서 보이는 기본값입니다. 이 기본값들에 대해 모바일 화면에서는 조정이 필요하다고 판단되면 모바일 화면용 구문들을 추가합니다.

 

@media screen and (max-width: 767px)

 

위의 구문으로 해상도를 구분할 수 있습니다. 해당 구문 아래 들어가는 CSS 코드 값들의 의미는 해상도 0~767px까지는 기본값과 다른 값을 적용하겠다는 의미입니다.

 

즉, PC 화면과 모바일 화면을 다르게 구성한다는 의미입니다.

CSS 속성 편집

모바일 화면을 편집할 것이기에 HTML 편집기를 열고 CSS 창에서 2846 행을 찾아줍니다.

해당 영역을 찾은 뒤에 padding-left: 24px; 을 추가하고 적용을 누릅니다.

 

CSS 속성 편집 후 모바일 화면

 

화면 새로 고침을 해보면 이제 블로그 제목, 포스팅 영역의 왼쪽 여백에 맞추어 정렬되었음을 확인할 수 있습니다.

 

개발자 도구  CSS 속성 확인

 

참고로 크롬 개발자 도구를 사용하여 나타나는 CSS 코드 영역에 코드 값들을 추가/변경하면 변경되는 사항을 실시간으로 확인할 수 있습니다. 예를 들어 padding-left: 24px; 아래에 padding-bottom: 20px를 추가하면 블로그 화면이 실시간으로 변경됩니다.

 

이렇게 어떤 영역에 손을 대야 하는지 시뮬레이션 해보고 티스토리 HTML 편집기에서 편집 후 적용하면 됩니다.

 

방문해 주셔서 감사합니다.

 

행복한 하루 보내세요 ^^