CATEGORIES
CSS 이미지 스프라이트 기법에 대하여 알아보려고 합니다. 우선 CSS 이미지 스프라이트란 무엇이고 어떤 효과가 있는지 간략하게 알아보도록 하겠습니다.# CSS Image Sprite 기법 알아보기웹페이지에 사용되는 이미지는 다양합니다. 배경 이미지가 있을 수 있고 그 밖에 아이콘이나 텍스트, 제목 등이 사용되는 이미지가 있겠죠. 여기서 Image Sprite는 하나의 이미지를 하나의 파일로 저장하여 불러오는 것이 아니라 여러개의 이미지를 모아서 하나의 파일로 만들어 사용하는 것을 말합니다.! 하나로 만든 이미지를 어떻게 불러오는가?여러개의 이미지가 각각의 위치에 배치되어 있으므로 이미지의 좌표를 사용하여 불러옵니다. 그래서 background-position 프로퍼티를 사용하게됩니다. 아래와 같이 몇 가지
Last Modified : 2019-08-18 15:30:01react native에서 이미지를 보여줄 때 사용하는 Image 컴포넌트에 대하여 일아봅니다.# react native Image 컴포넌트 사용하기Image 컴포넌트는 아래와 같이 사용합니다.<Image />이때 이미지 경로 등의 값을 설정하기 위해 아래와 같은 props를 사용합니다.@ source이미지의 경로, 위치를 가지는 값입니다. 예를들어 ./images/에 존재하는 test.jpg인 경우 아래와 같이 적용할 수 있습니다.<Image source = {require('./image/test.jpg')} />위에서는 source 내부에 require()를 사용하여 경로를 지정하였습니다.또 다른 방법으로 아래처럼 uri를 사용하는 것 역시 가능합니다. 아래 코드 역시 동일하게 이미지층 출력합니다.<I
Last Modified : 2019-09-19 20:23:20제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 data-imgname의 값을 불러온 뒤 이를 해당 태그 안에 있는 thumbImg 클래스명안에 백그라운드 형태로 넣어 출력하는 방법입니다.* HTML 코드<body> <li data-imgname="test.jpg"> <div class="thumbImg"></div> </li></body>* 스크립트 코드// 이미지 배경으로 삽입하기thumbEles = $('li[data-imgnam
Last Modified : 2015-11-26 15:37:50이미지를 데이터베이스로 저장하는 방법 및 이 경우 성능은 어떤가요?# 이미지를 데이터베이스에 저장하기이미지를 데이터베이스에 저장하는 경우는 많이 있습니다. 특히 blob타입을 사용하여 저장되는 경우가 많으며 blob는 binary large object의 약자로 이미지 또는 바이너리 파일들을 저장하는 용도로 많이 사용됩니다.blob 타입의 단점이라면 데이터를 분류(Sorting)하거나 index를 만드는 것이 안됩니다.
Last Modified : 2017-04-18 22:09:40
VueJS에서 태그 및 컴포넌트 요소에 backgroundImage 인라인 스타일을 사용하여 백그라운드 이미지를 추가하는 방법입니다.# VueJS 요소 및 컴포넌트에 백그라운드 이미지 적용하기만약 변수 bgImg이 다음과 같은 값을 가지는 경우라면...this.bgImg = "https://webisfree.com/imgs/main_bg.jpg";이 값을 아래의 태그 요소에 백그라운드 이미지로 적용해보겠습니다. 이때 인라인 스타일 방식을 사용하였습니다. <div class="sidebar__bg" v-bind:style="{ backgroundImage: 'url(' + this.bgImg + ')' }"></div>이제 div태그에는 백그라운드 이미지가 적용되었습니다. 이 외에 필용한 스타일(
Last Modified : 2020-03-12 12:44:52css에서 이미지 스프라이트(image sprite)를 적용시 장점 및 단점과 고려할 사항은 무엇일까요?먼저 이미지 스프라이트에 대하여 아래에서 무엇인지 간략히 아실 수 있습니다.css 이미지 스프라이트란? 관련 링크 바로가기 >https://webisfree.com/2015-06-10/[css]-css-image-sprites-알아보기! 이미지 스프라이트 적용시 장단점은?이미지 스프라이트를 사용하는 가장 큰 이유, 장점은 아래와 같습니다.- 새롭게 로딩되는 경우의 깜박임 현상 없음; 이미지는 실제로 사용되기 전 까지는 렌더링되지 않습니다. 이런 이유로 마우스오버시에만 나타나는 이미지 등은 새롭게 로딩되면서 깜박일 수 있죠. 이미지 스프라이트는 미리 모두 로드하기 때문에 이런 현상을 방지할 수 있습니다 -
Last Modified : 2020-08-11 18:08:38AngularJS에서 이미지를 Crop하는 자르기 위한 써드파티(Third-party Module)모듈은 무엇이 있을까요?아래의 ngImgCropFullExtented 모듈은 이미지를 간단하게 몇 가지 형태(네모, 원 등...)로 자를 수 있도록 해줍니다.ngImgCropFullExtended위 링크는 github의 링크페이지로 해당하는 소스를 찾을 수 있습니다.아래 링크는 자세한 설정 및 테스트를 수행 가능한 예제 소스입니다.http://crackerakiua.github.io/ngImgCropFullExtended/대부분의 기능을 가지고 있습니다.
Last Modified : 2017-08-11 01:42:53무료 이미지 사이트는 뭐가 있을까요? 어떤 사이트가 있는지 알아보겠습니다.# Pixabay (pixabay.com)제가 일순위로 검색하는 이미지 사이트입니다. 고퀄리티까지... 가장 좋아합니다.
Last Modified : 2017-04-30 22:32:28