'CSS'에 해당되는 글 2건

  1. 웹에서 Responsive Image(반응형 이미지) 구현하기
  2. [CSS] CSS 프레임워크 관련 리소스 북마크

웹에서 Responsive Image(반응형 이미지) 구현하기

반응형 이미지는 어떻게 구현할까?


웹에서 고정된 크기를 가진 이미지를 데스크탑, 랩탑, 태블릿, 스마트폰 등 다양한 기기마다 최적화된 형태로 출력하려면 어떻게 해야할까? 해답은 간단하다. 반응형으로 출력하고 싶은 이미지의 img 엘러먼트에 style 애트리뷰트를 아래와 같이 부여하면 된다.


HTML에서는 아래와 같이 부여한다.

<img src="someImage.jpg" style="max-width: 100%; height: auto;">

CSS에서는 아래와 같이 부여한다.

img
{
  max-width: 100%;
  height: auto;
}


JavaScript에서는 아래와 같이 부여한다.

var img = document.getElementsByTagName("img");
vat i=0;
while (i < img.length) {
  img[i].setAttribute("style", "max-width: 100%; height: auto;");
  i++;
}


키워드: Responsive Image, 반응형 이미지



저작자 표시 비영리 동일 조건 변경 허락
신고

[CSS] CSS 프레임워크 관련 리소스 북마크

Top 10 Front-End Development Frameworks (by Ivaylo Gerchev)

http://www.sitepoint.com/top-10-front-end-development-frameworks/

http://www.sitepoint.com/top-10-front-end-development-frameworks-part-2/

Bootstrap을 포함한 다양한 프론트엔트 개발 프레임워크를 소개한다. 나 또한 작년부터 사내 웹 시스템 개발에 Bootstrap을 도입하여 재미를 보고 있다. Bootstrap은 이미 그 자체가 생태계가 되어 전세계적으로 관련  라이브러리들이 쏟아져 나오고 있다. 당분간 Bootstrap의 강세가 지속될 것으로 예상된다.


Five Essential Front-End Tools That Should be Used with Modern MVC Projects (by Adam Tibi)

http://www.adamtibi.net/06-2013/five-essential-front-end-tools-that-should-be-used-with-modern-mvc-projects

normalize.css, html5shiv.js와 같은 유용한 브라우저 호환성 라이브러리를 소개한다.


저작자 표시 비영리 동일 조건 변경 허락
신고