티스토리 뷰

애드센스_블로깅

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

rhyshan

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

 

 

저 안녕하세요....! 실례지만 혹시 지금 사용하시는 티스토리 스킨에서 저 샇튜브라는 유튜브 링크 이미지는 어떻게 정렬하셨는지 여쭤봐도 될까요ㅠㅠ...? 기본 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

 


댓글
  • 프로필사진 질문 와 상세한 답변 정말 감사드립니다ㅠㅠㅠ 이렇게까지 친절히 알려주실 줄은 몰랐는데 하나하나 다 짚어주셔서 진짜 큰 도움이 되었어요ㅠㅠㅠㅠㅠ 혼자 하니까 안되던게 지금은 잘되네요ㅠㅠ 보고 처음부터 따라해보면서 계속 연습하고 외워둬야겠습니다 정말 감사드립니다ㅠㅠ 복 많이 받으시고 좋은 하루 되세요ㅠㅠ!! 2019.04.14 20:42
  • 프로필사진 Favicon of https://rhyshan.com BlogIcon rhyshan 넵 저도 많이 고민했던 부분이라서요ㅋㅋ
    해결이 되어 다행입니다 복 많이받으세요!
    2019.04.14 23:46 신고
댓글쓰기 폼