더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 10개의 일치하는 문서를 찾았습니다.
js자바스크립트 Canvas에 백그라운드 배경을 추가하는 방법
자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.# 캔버스(Canvas)에 배경색 칠하기canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을 그리는 방법이 사용됩니다. 즉 캔버스 위에 색을 칠하는 것과 동일하게 구현할 수 있죠.구현 과정은 아래와 같습니다.1. 새로운 캔버스를 만들고 컨텍스트를 생성한다.2. 컨텍스트 내부에 원하는 색의 fillStyle 값을 설정한다.3. 캔버스와 동일한 크기로 fi...
Last Modified : 2020-12-22 06:09:52
Created : 2020-12-22 06:06:00
vuejs[VueJS] 태그에 백그라운드 이미지 추가하는 방법
VueJS에서 태그 및 컴포넌트 요소에 backgroundImage 인라인 스타일을 사용하여 백그라운드 이미지를 추가하는 방법입니다.# VueJS 요소 및 컴포넌트에 백그라운드 이미지 적용하기만약 변수 bgImg이 다음과 같은 값을 가지는 경우라면...this.bgImg = "https://webisfree.com/imgs/main_bg.jpg";이 값을 아래의 태그 요소에 백그라운드 이미지로 적용해보겠습니다. 이때 인라인 스타일 방식을 사용하였습니다. <div class="sidebar__bg" v-bind:st...
Last Modified : 2020-03-12 12:44:52
Created : 2020-02-21 16:30:44- etc
웹워커(Web Worker) 사용 및 사용하기 좋은 부분은?
웹워커(Web Worker)는 백그라운드에서 작업을 실행하여 사용자에게 무거운 프로세스 동작시 멈추는 듯한 현상을 나타나지 않도록 도와줍니다. 이런 웹워커 환경은 비교적 제한적입니다. 특히 메인화면의 Scope 및 DOM이 별개입니다. 즉 여기서의 this는 window객체가 아닌 Worker 객체를 가르키게 됩니다.# 웹워커를 사용하는 곳은?모든 작업이 백그라운드에서 작업될 필요는 없습니다. 아래의 작업들이 워커를 통해 가능합니다.화면 인터페이스에 영향이 없는 경우시간이 많이 걸리는 작업의 처리이미지와 관련된 처리복잡한 암호화 처리간단한 Worker를 사용하는 코드...
Last Modified : 2017-04-05 00:02:33
Created : 2017-04-04 17:48:24 - webdevetc
크롬 input 태그등에 자동생성 백그라운드 색 제거하는 방법
크롬 브라우저를 사용하여 input 태그등을 사용하면 나중에 페이지를 로딩할 경우 배경색이 다른 경우가 발생한다. 이런 경우는 로그인 페이지를 만들거나 기타 입력폼을 작성할 때 나타나는데 문제는 input 폼이 다수인 경우 모두 바뀌는 것이 아니라 일부만 바뀌어 이상해 보이기 때문이다.자동완성기능 속성을 off해도 백그라운드가 노란색으로 나타나는 이 스타일을 제거하기 위한 방법은 어떻게 해야하는가? background 속성을 변경해도 적용이 안되는데 그 이유는 해당 백그라운드 칼라는 box-shadow 속성과 관련이 있기 때문이다. 이를 제거하기 위해 아래의 방법을 ...
Last Modified : 2015-12-11 13:22:57
Created : 2015-12-11 13:14:35 - js
제이쿼리 css() 에서 background-image 안되는 경우
제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 data-imgname의 값을 불러온 뒤 이를 해당 태그 안에 있는 thumbImg 클래스명안에 백그라운드 형태로 넣어 출력하는 방법입니다.* HTML 코드<body> <li data-imgname="test.jpg">&...
Last Modified : 2015-11-26 15:37:50
Created : 2015-11-26 15:28:11 
css[CSS] background-blend-mode 이미지와 배경색 혼합하기
CSS를 사용하여 배경 이미지와 다른 이미지 또는 배경색을 하나로 섞어 표현할 수 있는 방법을 알아봅니다. 쉽게 얘기해서 하늘에 구름이 떠 있는 이미지에 특별한 배경색을 혼합해 적용하려는 경우가 예가 될 수 있겠습니다.# CSS background-blend-mode 알아보기CSS에는 백그라운드 이미지에 다른 색을 적용할 수 있는 방법이 존재합니다. 바로 css의 background-blend-mode입니다. 해당 css 속성을 사용하면 위와 같이 이미지와 배경을 혼합하여 구현이 가능합니다. 이때 설정 값으로는 multiply가 사용되야 합니다.backgro...
Last Modified : 2022-01-20 23:27:22
Created : 2015-09-23 14:33:51
css[CSS] background-position 백그라운드 위치 조정방법
css를 사용하여 백그라운드 위치를 조정하는 방법에 대하여 알아봅니다.# CSS의 background-position으로 백그라운드 위치 조정하기백그라운드 위치는 background-position이라는 css 속성을 사용해 위치 조정이 가능합니다. 간단한 문법은 아래와 같습니다.background-position: 좌우값 상하값;설정하는 값의 단위는 px 또는 % 등을 사용할 수 있습니다. 그리고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다.background-position: 0 0;background-positi...
Last Modified : 2019-08-21 11:55:07
Created : 2015-03-09 11:23:05- html
파이어폭스 firefox에서 background-position 속성 적용 안될 경우
크로스 브라우징 작업을 하던중에 Firefox에서 background-position값 중 일부가 적용이 안되는 부분을 발견했습니다. Chrome(크롬)에서는 잘 되던 속성인데 말입니다... 알아보니 이 속성은 표준 CSS 속성이 아니더군요. 그래서 Opera와 Firefox에서는 바꾸어 사용해야합니다.* background 관련 파이어폭스 사용가능 속성1. background: .... ( O )2. background-position: .... ( O )3. background-position-x: .... ( X )4. background-position-y: ...
Last Modified : 2015-11-03 18:47:20
Created : 2015-03-09 11:16:25 
webdevetcimg 태그 vs 백그라운드 이미지 언제 어떻게 사용해야 하는가
웹사이트를 퍼블리싱 하면서 이미지 태그를 사용하는 것과 백그라운드로 사용하는 것중 어떤 방법이 더 나을지 고민하게 됩니다... 어떤 경우에 어떤 방법을 사용하는게 더 효과적인지 알아보도록 하겠습니다.# img 태그의 사용하는게 좋은 경우1. 프린트가 필요한 경우; 백그라운드 이미지는 출력시 포함되지 않습니다.2. 이미지에 문구가 사용되어 의미를 가지는 경우; 이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있습니다. 백그라운드 이미지는 alt 태그가 없습니다.3. 이미지가 콘텐츠의 중심으로 가장 중요한 경우# 백그라...
Last Modified : 2016-05-02 13:42:30
Created : 2015-01-15 16:44:23
js[자바스크립트] 백그라운드(background) 경로, 주소 불러오기, getComputedStyle()
이미지 태그를 사용하지 않고 백그라운드를 사용한 이미지의 경우 이미지 경로를 확인하려면 아래의 함수를 사용해 불러올 수가 있습니다. 그 외에도 다른 속성들 예를 들어 display나 margin등의 속성이 가진 값을 확인할 때도 아래 함수를 사용해 어떤 값이 지정되었는지 알 수 있습니다.# 자바스크립트를 사용하여 백그라운드 정보, url 등을 불러오는 방법아래 함수는 적용된 백그라운드의 다양한 정보를 불러옵니다. window.getComputedStyle(해당 엘리먼트)적용된 엘리먼트는 아래의 함수를 사용하여 브라우저에 적용된 모든 CSS 스타일을 불러올 수 있습니...
Last Modified : 2017-11-19 07:17:10
Created : 2014-01-12 15:56:28