[티스토리 반응형 스킨] 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

 

'블로깅 Blogging' 카테고리의 다른 글

[티스토리] 블로그 이전: 네이버 블로그로 옮기는 이유 #글쓰기환경 #검색점유율  (4)	2021.01.01
고객센터 답변으로 보는 티스토리 에디터의 미래: 사라진 가운데 정렬 단축키  (0)	2020.06.09
[티스토리 반응형 스킨] PC/태블릿/폰에 따라 이미지 위치 바꾸기  (3)	2019.04.13
굿바이 DISQUS 광고: 디스커스 블로그에서 지우기  (1)	2018.11.18
[Tistory] 반응형 스킨으로 변경: 티스토리 #반응형 #1  (2)	2018.07.19
[Tistory] 블로그 글쓰기 가로폭 수정 방법: 730px → 960px  (0)	2014.11.13
[Adsense/AdMob] 애드몹 수익 지급방식: PayPal & ACH/Wire 비교  (0)	2014.02.25
[Adsense] 구글 애드몹, 애드센스/애드워즈 계정 통합/연동을 통해 얻는 것은?  (0)	2014.02.15
[Android/AdMob] loadAd called while the ad is already loading, so aborting  (0)	2014.02.03