'- 공부합시다!/티스토리 꾸미기'에 해당되는 글 9건

안녕하세요~ 구름군단 티스토리 입니다.^^

요즘 사이트를 제작하는 추세가 반응형으로 가고 있죠?? 스마트폰과 테블릿 PC 그리고 데스크톱! 이 3가지를 모두 아우를 수 있는 반응형 웹, 현재 구름군단 티스토리 또한 시대를 따라 반응형으로 수정해뒀습니다.^^

허나 웹에서 보여지는 것은 곧 잘 수정해놓을 수가 있는데.. 문제는 바로 모바일에서 보여지는 부분 입니다. 분명히 맞는 부분을 수정해뒀는데, 자꾸 수정이 되지 않은 채 보여지는 화면...ㅠ_-

모바일에서 소스를 보는 방법이 있다해도 불편하고.. 아오! 그런데 순간 이런 생각을 해봤어요~ "다음 서비스인 트로이를 열어서 구글 크롬 개발자&디자이너 툴(구글 크롬 -> F12)을 열어서 소스를 확인하면 되지 않을까?!!"

제 생각이 딱 맞아 떨어졌습니다.ㅋㅋㅋㅋㅋㅋㅋ

보니깐 다음 서비스인 트로이에서 iframe으로 불러와주는 것이 었더군요~ 후후~ 알고보니 아주 간단하게 만든 서비스였던거였으요...흐흐흐~~

다음 트로이와 구글 크롬을 섞어 사용하는 방법은 어렵지 않으니 따라오세요~ 궈궈!

먼저 구글 크롬을 실행시킨 다음 다음 서비스인 트로이에 접속한 뒤에 열고자하는 사이트를 트로이 화면 안에 있는 검색창에 작성하고 "GO"를 눌러줍니다. 누르게 되면 설정된 해상도에 따라 화면이 나오게 됩니다.

여기까지 되었으면 이제 구글 크롬 F12를 눌러서 개발자&디자이너 툴(구글 크롬 -> F12)을 열어주세요. 그리고서 소스를 클릭해가면서 어떤 화면이 잡히는지 확인을 합니다.

조금씩 심도있게 찾아가다보면 아래와 같은 소스를 발견 할 수가 있습니다.

여기부터가 모바일 화면이 나오는 부분 입니다. 소스가 다 나오고, 어떤 영역인지 표시를 해주니깐 금방 알겠죠???^^ 게다가 더 좋은게...

오른쪽을 보면 css에 대한 속성을 보여주게 됩니다. 이 속성 앞에 체크박스가 있는데, 체크가 없으면 비활성화, 체크를 하게 되면 활성화가 되면서 그에 따른 화면에 변화를 보여주게 됩니다.

비교화면을 보시면 조금 도움이 되실까 만들어봤습니다.^^ 예전 css를 할 적에 배경색을 넣어가면서 위치 확인하고 번거로운 작업을 많이 했었는데... 이제는 구글 크롬에 개발자&디자이너 툴(구글 크롬 -> F12)을 이용하면 손쉽게 사용하실 수가 있게 됐습니다.^^

반응형 웹 사이트 소스 수정하는데 도움이 되셨나요??^^ 그럼 이만 "반응형 웹 사이트, 소스 수정 힘들다? 구글 크롬과 다음 트로이로 뽝! 끝!"에 대한 포스팅을 마치도록 하겠습니다.