가로세로 비율을 유지하는 반응형 박스

August 22, 2012 08:30 PM

반응형 웹디자인에서는 max-width: 100%width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다.

가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다.

#movie-player-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.26%;
}
#movie-player-wrapper .wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

높이를 0으로 지정하고 padding-top이나 padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있다. 안의 콘텐츠는 패딩에 밀려 박스 밖에 위치하기 때문에 절대 위치로 위치를 잡아주면 화면에 나오게 된다.

50px
100px
200px

가변 크기의 동영상 플레이어를 넣어야 하는 경우가 있었는데 요긴하게 사용했다.

Comments

  • On September 12, 2012 09:01 PM, 태희 said:

    이런방법이있군요 필요한 형태였는데 고심하다가 안되는건가했었는데 감사합니다.

  • On November 04, 2012 09:59 PM, j1 said:

    정말 유용한 정보네요. !! 감사합니다. ^^

  • On March 25, 2014 03:18 PM, 박민철 said:

    설마했는데 이런 방법이 있네요
    정말 감사합니다.

  • On May 15, 2014 09:59 AM, mui said:

    정말 유용한 아이디어 군요.
    다만 화면 사이즈에 따라서 padding-bottom: 56.26%; 이 수치가 달라 지더군요.
    이 부분을 보완할 수 있으면 최고일듯 합니다.

  • On May 15, 2014 10:06 AM, 신현석 said:

    #movie-player-wrapper의 너비가 100%이니 의도된 동작입니다. 너비를 고정하거나 너비가 고정된 상위요소가 있으면 되요.

  • On July 08, 2014 08:20 PM, john said:

    안녕하세요~

    유튜브 에서 어떻게 사용하면 되는것인가요?

    답변 부탁드립니다 ^^

  • On July 09, 2014 10:22 AM, 신현석 said:

    뭘 물어보시는 건지 모르겠네요.

  • On August 09, 2014 03:42 PM, 행복사랑 said:

    안녕하세요, 사진일 경우에는 어떻게 적용하면 될까요?

    https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRSx-XRrNVB-45B7WVu_24iOjuhVwDVuGRrAiLeYW1UHyTKwrh80w 링크로 예를 들어주실수 있으신가요?

  • On August 09, 2014 09:37 PM, 신현석 said:

    이미지는 그냥 width: 100% 지정하고 높이를 지정하지 않으면 브라우저가 알아서 가로세로 비율을 유지한 상태로 이미지를 그려줍니다.

  • On September 13, 2014 02:48 AM, 이대근 said:

    유용한 정보 감사드립니다. 그런데 혹시 아이프레임으로 노출시키는 유투브에도 적용가능할까요?? 가령 pc에서도 비율이 맞고 모바일에서도 비율맞게요.

  • On September 14, 2014 01:34 AM, 신현석 said:

    적용해 보지는 않았지만 유투브 동영상에도 충분히 적용 가능할 것으로 생각됩니다.

  • On October 15, 2014 07:30 PM, 마징가 said:

    필요한 정보였는데 감사합니다.
    그런데 해당 내용을 적용했더니 데스크탑이나 아이패드에서는 보이는데
    스마트폰에서는 보이지가 않네요.
    왜그럴까요...??

  • On October 16, 2014 06:50 PM, 신현석 said:

    브라우저나 동영상 플레이어와 관련이 있을 수 있을 것 같아요.

  • On January 21, 2015 05:49 PM, Toby said:

    이 방법을 사용하는 경우 하위 요소에서 height:100%; 박스를 만들기 어려운 문제가 있는데요.

    position: absolute; 와 함께
    top: 0; bottom: 0; left: 0; right: 0; 이렇게 4방향을 모두 0 값을 주면 영역에 꽉 차는 박스를 만들 수 있습니다.

    서로 반대되는 방향의 값을 동시에 주는 경우 가상의 영역(virtual dimension)을 만들도록 되어있기 때문이지요.

    (좀 더 많은 분들과 나누고 싶은 생각에 이 곳에 댓글로 남깁니다)

  • On January 22, 2015 12:50 AM, 신현석 said:

    코드에 높이 100%인 하위 요소를 추가해 봤습니다. 하위 요소의 높이가 100%가 되지 않는 경우가 재현되는 URL 알 수 있을까요?

  • On December 10, 2015 11:32 PM, Toby said:

    위의 댓글을 제가 1월에 남겼었군요 ㅋ

    어떤 케이스였는지 잘 기억이 안납니다.
    근데 요즘은 저도 4방향 0값 주는 것 보다 보통은 width, height 100%주는 방법을 쓰고 있네요.

    무시해주셔도 될 것 같습니다 ^^;

  • On March 06, 2016 09:16 PM, 또동 said:

    그동안 height값 때문에 디바이스 크기가 작아지면 여백이 너무 생기는 게 고민이었는데 덕분에 해결되었습니다 ^^

  • On October 17, 2016 10:33 AM, 유현아 said:

    height:0 을 주면이미지는 삽입 못 하는 건가요?

  • On October 21, 2016 02:08 PM, 신현석 said:

    유현아, #movie-player-wrapper .wrap안에 넣으면 됩니다.

  • On December 22, 2016 02:41 PM, moon said:

    좋은 정보 감사합니다. 적용도 잘했습니다. 그런데 이해는 잘 되지 않네요 ㅜㅜ
    #movie-player-wrapper에서 속성중 padding-bottom: 56.26%; 패딩값은 어떻게 나온 값인가요? 아무리 생각해도 풀리지가 않네요

  • On December 23, 2016 12:22 AM, 신현석 said:

    56.26%는 16:9 화면비율의 세로비율입니다. 다른값으로 변경해도 무방합니다.

Post a comment

:

: 공개 되지 않습니다. Gravata를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.