본문 바로가기

반응형

유투브 영상 삽입시 가로세로비율을 계산해서 반응형으로 사이즈 조절 완벽해결 유투브 영상 삽입시 가로세로비율을 계산해서 반응형으로 사이즈 조절 완벽해결 유투브에 있는 영상을 퍼올때 보통 고정사이즈로 삽입을 하게 되는데요. 요새 트렌드가 반응형이잖아요. 그래서 보통 인터넷에서 검색하면 가로 사이즈를 100%로 넣어서 해결하는 방법을 제시합니다. 하지만, 이 방법을 적용하면 모바일에서는 세로가 PC버전으로 고정되어 있어 검은배경이 길게 표시되죠. 그래서 찾은 방법은 바로 이 방법입니다. 해당 사이트에 들어가셔서 유투브 동영상의 URL를 입력하면 스타일 시트로 계산해서 스크립트를 제공합니다. 저같은 경우는 아예 CSS 에서 해당 코드를 삽입한 다음 일괄적으로 적용하는 방법으로 사용하고 있답니다 ㅎ 유용하게 사용하시길 바랍니다. ㅎ P.S 아이프레임(iframe) 이나 임베드(embed..
이미지내 지정한 포커스에 따라 이미지사이즈가 변경되는 반응형 jQuery 플러그인 Intelligent cropping for flexible image containers 유연한 이미지 컨테이너 반응형 플러그인 사실 이 기능을 찾기 위해 검색을 한 것은 아니지만, 아주 유요한 플러그인을 우연히 발견하여 이렇게 기록용으로 포스팅합니다. 간략하게 설명하자면, 반응형 사이트에서 사이트내에서 사용하는 이미지가 자동으로 크롭되잖아요. 이때 이미지의 정렬은 보통 left, right, center 인데요. 이 플러그인은 이미지내에 포커스 좌표를 지정하여, 그 포커스를 center로 정렬하는 플러그인입니다. 아래 이미지를 예로 들면, 넓은 창일때의 이미지 좁은 창일때의 이미지 도마뱀의 눈에 포커스를 맞추어 이미지가 반응형으로 크롭된다는 것이지요. 이 기능이 유용한지 안한지에 대해서는 모바일 사이..
구글 웹디자이너 Google Web Designer 의 가능성?? 믿어보자 ㅎ 서비스가 나온지는 꽤 되었네요 몇 일전 우연히 보게된 구글 웹디자이너라는 페이지를 보게 되었습니다. 뭔가 하니...플래시를 사용하지 않고 역동적인 이미지를 만드는 웹툴이라고 생각하시면 될 것같습니다. 기본적으로 반응형으로 코딩이 가능하며, 결과물이 코드로 나오기 때문에 용량도 작네요. 정말 잘 활용한다면 강력한 툴이 될 것 같기는 한데...^^; 왠지 손이 가질 않는 이유는 무엇일까요? 구글이면 믿고 사용할 법도 한데 말이죠. ^^ 그래도 저는 언제가 제대로 활용하는 날이 올꺼라 생각하기에 미리미리 손에 익혀놔야겠습니다. 2014.9.15.
RWD, Responsive Web Design 반응형 웹에 대해서 반응형 웹(Responsive Web)의 등장배경 최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다. 반응형 웹(Responsive Web)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게..
[MEDIAQUERI.ES]미디어쿼리(Media queries)를 사용한 반응형 웹 사이트 갤러리 반응형 웹 모음 마크업은 모두 같고, CSS로만 제어하여, 반응형 웹으로 만든 사이트들을 한눈에 볼 수 있는 갤러리 사이트입니다. 바로가기