[티스토리 반응형 스킨] PC/태블릿/폰에 따라 이미지 위치 바꾸기

이번 포스트는 반응형 스킨 포스트에 달린 댓글에 대한 답변입니다.

 

 

저 안녕하세요....! 실례지만 혹시 지금 사용하시는 티스토리 스킨에서 저 샇튜브라는 유튜브 링크 이미지는 어떻게 정렬하셨는지 여쭤봐도 될까요ㅠㅠ...? 기본 pc 화면에서는 딱 저렇게 메뉴탭 가운데 위치에 예쁘게 잘 자리잡고 모바일 화면에서는 오른쪽으로 이동해서 계속 나타날 수 있는 이유가 궁금합니다... 따라해보려 해도 똑같이 안되고 배치정렬이 엉성하게 나오더라구요ㅠㅠ 혹시 가르쳐주실 수 있으실까요...?

[Tistory] 반응형 스킨으로 변경: 티스토리 #반응형 #1

 

 

 

 

 

 

PC

Tablet/Phone

제 블로그는 PC에서 볼 때와, 태블릿/폰 크기의 모바일 디바이스에서 볼 때 레이아웃이 차이가 납니다.

 

제가 선택한 티스토리 스킨에서 지원하기 때문인데요

 

스킨편집창 같이 볼게요.

 

 

 

 

스킨 편집 - HTML 편집 - 파일업로드

먼저 사용할 이미지를 업로드했고

 

 

 

스킨 편집 - HTML 편집 - HTML

<img> 태그를 사용해 상단에 끼워넣었습니다.

 

class 값으로 "youtube_header"를 줬는데

 

 

 

스킨 편집 - HTML 편집 - CSS

이는 CSS창 두 군데에서 확인할 수 있습니다.

 

 

 

스킨 편집 - HTML 편집 - CSS - 840px

@media only screen and (max-width:840px)

 

그러면 상단에 주어진 max-width 값에 따라,

 

840px 이하로 스크린이 작아지게 되면 "youtube_header"의 left/right/top 값이 바뀌게 됩니다.

 

이때 visibility 여부를 조합하면, 화면 너비에 따라 이미지를 바꿀 수도 있겠습니다.

 

 

#ResponsiveWebDesign