Erzsamatory Weblog


해당 글은 워드프레스 블로그로 이관된 글입니다.
아래의 블로그에서 해당 글을 열람하시기 바랍니다.

이관된 글 링크는 다음과 같습니다.
http://www.walterz.net/2017/11/13/이미지와-동영상에-반응형-속성/
http://www.erzsamatory.net/trackback/86

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 김유찬
    김유찬
    2014/08/09 16:01
    안녕하세요 ^^ 정말 유익한 정보입니다. 한가지 부탁드려도 될까요? 제이쿼리 없이 아래 를 CSS 로 바꿔서 사용할수 있는지요?
    "max-width:1024px; max-height:800px; width:100%; height:100%;"
    제가 CSS 를 할줄몰라서, 도와주셨으면 합니다... 감사합니다.
    • Walter E.
      Walter E.
      2014/08/09 18:09
      제이쿼리 없이 CSS를 사용한다는 것이 <style> 태그를 사용하는 것을 의미하는건가요?

      그렇다면 아래와 같이 할 수 있습니다.

      모든 이미지에 대해서 해상도에 맞게 사이즈를 조절하기 위해서는 아래와 같은 내용을 <style> 에 넣으면 됩니다.

      .resizable, img {
      max-width: 1024px;
      max-height: 800px;
      width: 100% !important;
      height: 100% !important;
      }

      중간에 !important 가 들어가 있는 이유는 티스토리나 텍스트큐브에서 이미지를 넣는 경우에 <img> 태그에 width와 height 속성이 입력되기 때문입니다.

      !important 옵션을 사용하면 다른 곳에서 입력된 스타일들을 모두 무시할 수 있습니다.
    • Walter E.
      Walter E.
      2014/08/09 18:09
      하지만 위의 방법을 사용하면 이미지 본래의 크기를 확인할 수 없기 때문에 제대로 이미지 크기 조정이 되지 않을 수 있습니다. 따라서 완벽한 반응형 웹을 만들 때에는 CSS와 자바스크립트를 약간 섞어서 만드는 것이 필요합니다.
  2. 김재희
    김재희
    2014/09/30 13:00
    안녕하세요!! 반응형웹이라는것이 무엇인지 이 글을 읽으니까 이해가 가는 것 같아요!! 감사합니다.제가 요즘 만들고 있는 웹페이지에 적용해보고 싶은데 질문 하나 드려도 될까요....?

    저가 만들고 있는 웹페이지는 가로 패럴랙스 스크롤링이 되는 사이트에요.
    자세하세 말씀드리자면.
    큰 백그라운드jpg에 2행3열?로 6분할이 되어 있는 페이지로

    구조화 하자면 아래처럼
    A B C
    D E F

    알파벳 하나가 모니터에 꽉차게 보여지고 있는 상태이고
    버튼을 누르게 되면 가로로 스크롤링이 되면서
    D에서 E로 혹은 E에서 F로 가로 스크롤링이 됩니다.
    그리고
    D에있는 버튼을 누르면 A로 새로로 이동 되면서 A페이지가 보여지고 같은방식으로
    E와 B, F와 C도 세로로 올라가면서 페이지가 보여지는 방식입니다.

    그래서 예를들면
    A페이지가 제 노트북에서는 딱맞게 보여지게 디자인을 했는데
    다른 데스크탑으로 보게되면 위아래 좌우가 짤려 보이더라구요.

    이럴경우도 반응형웹으로 해서 코딩이 가능한가요?
    제 컴에서 보이는 것처럼 다른 컴퓨터에서도 같은 사이즈로 볼수 있게 하고 싶어요.

    포스팅 예시 보니까 큰 사진통째로 반응형웹이 되던데
    저같은 경우는 전체 백그라운드의 일부분이 반응형웹이 되어야 하는 경우이거든요..

    말을 잘 조리있게 못해서 이해가 잘 되셨나 모르겟어요...ㅠㅠ
    졸업 프로젝트로 디자인과 학생이 코딩까지 하려다 보니까
    어려움이 많아요..

    제 질문에 답을 얻을 수 있을까요??
    감사합니다..
    그리고 포스팅 잘 보고 갑니다!!
    • Walter E.
      Walter E.
      2014/09/30 19:42
      제가 전문가가 아니라서 자세히는 잘 모르겠습니다. ^^;;

      꼭 백그라운드 이미지로 이용을 해야 하는지요?

      위의 예시와 같이 이미지를 삽입하면 해결할 수 있지 않을까요?
  3. 이용현
    이용현
    2015/01/23 15:29
    아..정말 몇일동안 이것 때문에 몇일간 웹검색하면서 소스구하고 다녔는데 안됬거든요. 근데 이걸로 하니까 드디어 되네요. 일단 한줄기의 빛이 보여서 너무 기분이 좋습니다. 일단 감사드리구요. 근데 개인적인 작업중에 한가지 문제점이 생겨서 조언좀 구하고자 싶어서 댓글 남깁니다,.

    일단 Walter E. 님께서 올려주신 예시 소스로는 100%잘되구요 비율맞게 리사이징이 잘됩니다. 그런데 DIV 의 POSITION 속성이 absolute 이 div 는 리사이징이 되긴 되는데 비율을 무시한채 리사이징이 됩니다.

    말로써 설명이 잘 안되는것같아서 이미지 주소 같이 첨부합니다.


    http://yongbal88.cafe24.com/er.jpg


    저것만 해결되면 정말 좋을텐데.. 조언부탁드릴게요 감사합니다!
    • Walter E.
      Walter E.
      2015/01/24 05:35
      position이 absolute로 설정되어 있는 경우에는 다른 객체와의 상관성이 없고 window를 하나의 영역으로 인식하기 때문에 이와 같은 문제가 발생하는 것 같습니다.

      일단 position이 absolute일 때에도 윈도우 크기에 따른 리사이징이 가능한 소스코드를 만들어보았습니다. 이 소스코드의 원리는 absolute로 설정된 객체에 대해서만 사이즈 축소 비율을 구한 후 스타일에 적용하는 원리입니다. max-width와 max-height가 설정되어 있기 때문에 윈도우 크기에 따라 항상 이미지의 width, height 속성은 비율에 따라 변동됩니다.

      새롭게 만들어진 예제는 다음 링크에서 확인 가능합니다.
      http://goo.gl/tDqZ0r

      전체 소스코드는 아래 링크에서 확인할 수 있습니다.
      http://goo.gl/tbbhbP

      간단한 테스트는 하였으나 특별한 이상은 발견하지 못 했습니다.
      완벽할 수는 없겠지만, 기본적인 틀은 맞을 겁니다. ^^
      이 소스코드의 기본 원리는 이 블로그에서도 사용하고 있답니다!
  4. 이용현
    이용현
    2015/01/26 12:03
    정말 정말 정말로 감사드립니다!!! 이번에 알려주신 소스와 현재 블로그에 게시되있는 소스 활용해서 제가 원하던 리사이징이 말그대로
    완.벽.하.게 이루어졌습니다. 정말 감사드려요. 정말 한 2주동안 소스 구하러 다니느라 지쳐있었거든요. 이고 블로그에와서 이 게시물 차근차근히 읽어보고 처음으로 리사이징 할 수있는 빛을 보고 또 완벽한 리사이징 까지 할 수있는 소스를 얻어가서 너너무너무 감사드립니다. 정말 감사드립니다. 거짓말 아니고 진심으로 감사드립니다...^^ 제가 작업중에 좀 아리송한 점이 있으면 가끔씩 여쭤봐도 되죠?^^ 싫다고하지말아주세요 ㅎㅎ

    정말 감사합니다!!!
    즐겨찾기로 자주자주오고 있습니다 감사합니다^^
    좀 늦은감이 있긴하지만 새해복 많이 받으세요^^
    • Walter E.
      Walter E.
      2015/01/26 12:31
      즐겨찾기까지 해주셨다니 정말 감사합니다 ^^
      제 블로그에 있는 글들이 다른 곳에서도 찾을 수 있는 글이 많고, 저는 그냥 제 의견을 보태서 글을 쓰는 것에 불과한데 이렇게 좋게 봐주시니 너무 감사합니다~

      궁금한 점 있으시면 언제든지 문의해주세요.
      제가 알고 있는 부분에 대해서는 답변드리도록 하겠습니다. ^^

      새해 복 많이 받으세요.
  5. 정다은
    정다은
    2015/04/02 19:13
    제가 찾던 정보네요 감사합니다!!
    근데 li 안의 이미지에는 적용이 안되는데 왜그런지 혹시 이유를 알수 있을까요??
    • Walter E.
      Walter E.
      2015/04/02 19:44
      #post_content 내부에 li가 있는 것인지요?
      만약 만약 그렇다면 #post_content img 으로 지정을 했기 때문에 정상적으로 동작하는 것이 맞습니다. 원인을 찾아보겠습니다.
  6. ah
    ah
    2015/05/19 03:05
    저는 ir방식으로 작업중인데요.. css로 백그라운드로 이미지를 넣어 백그라운드 포지션을 변경해 홈페이지를 만들고 있습니다. 그렇다보니 이미지가 css에 백그라운드로 지정되어있어서 위에서 보여주신 자바스크립트코드가 적용이 되지 않습니다. 이런경우에는 어떻게 반응형 웹으로 만들수 있는지 궁금합니다.
    • Walter Erzsa
      Walter Erzsa
      2015/05/20 05:53
      백그라운드 이미지를 통한 반응형 웹 만들기는 아직 시도해보지 않았습니다. 한 번 시도해보고 말씀드리도록 하겠습니다. ^^
    • ah
      ah
      2015/05/21 01:56
      감사합니다
  7. 비밀방문자
    비밀방문자
    2017/01/21 20:17
    관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2017/01/27 00:03
      동영상이 유튜브와 같은 형태로 나타나는 것이라면 <embed> 태그를 <img> 태그와 동일하게 적용하면 위의 방법을 그대로 사용할 수 있습니다.

      위 글에서는 <img> 태그와 함께 resizablebox 클래스를 가진 객체도 처리하기 때문에 다음과 같이 적용해보시면 될 것 같습니다.

      <embed class="resizablebox" ... > </embed>
  8. 2017/12/06 23:37
    안녕하세요. 워드프레스에서는 댓글이 써지지 않아서 이 블로그에 글을 남깁니다! 아직 이 블로그를 쓰시는지 모르겠네요. 저도 티스토리에서 이미지를 링크할 때 '반응형' 속성을 부여하는 방법을 찾고 있었는데, walter님의 이 포스트에서 큰 도움을 얻고 문제를 해결하여 감사 말씀 드리려고 글을 남깁니다. 저는 제가 부여한 width, height에 맞추어 image를 resizing 하는 방법은 몰라서 그냥 width : 450 px, height : auto 형식으로 이미지를 링크했었는데요. ( 관련 포스트도 작성했습니다. http://mysnowbear.tistory.com/7 제 티스토리에서 확인해보실 수 있습니다.) 그런데 이 포스트를 보고 제가 부여한 크기에 맞게 이미지를 리사이징 하는 방법을 알게 되어서 잘 활용중입니다. 감사합니다!
  9. 2017/12/06 23:40
    그런데 한가지 부탁드릴 것이 있습니다. 해당 포스트에서는 width, height 크기에 맞게 사진을 resizing 하는 html 태그를 안내해주고 계신데요. 혹시 resizing이 아니라 해당 div 크기에 맞게 crop해주고 center로 위치를 맞추어 주는 html 태그도 안내해주실 수 있을까요? https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/
    이 해당 블로그 포스트에서 java script 및 Jquery를 이용해서 해주는 방법을 소개해주고 있기는 한데, 이를 어떻게 html 로 바꾸어야 할지 몰라서 여쭈어 봅니다. 부디 답장 주시면 감사하겠습니다.