더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 11개의 일치하는 문서를 찾았습니다.
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- css
CSS Property background color
CSS에서 배경색을 사용하는 방법에 대하여 알아봅니다. 이 경우 CSS 프로퍼티인 background-color를 사용할 수 있습니다. background-color는 해당 엘리먼트에 배경색을 지정하여 보여줍니다. 사용방법은 아래와 같습니다.background-color { color | transparent | inherit | initial }@ background-color property- CSS 1# background-color 프로퍼티 값 지정하기설정 가능한 값으로 투명하게하는 transparent를 사용할 수 있습니다. color값으로는 HEX, RGB...
Last Modified : 2019-08-05 12:53:20
Created : 2018-07-09 21:54:45 - css
css를 사용하여 gradient 텍스트 만드는 방법
css를 사용하여 배경, background에 gradient(그라데이션) 효과를 줄 수 있습니다. gradient는 2개 이상의 색이 서서히 적용되어 있는 상태의 모습을 가지게됩니다. 그럼 아래는 css를 사용한 그라데이션(gradient)효과를 적용하는 방법을 알아보고 이 효과를 사용하여 텍스트 그라디언트 효과를 적용하는 방법입니다.# backround에 gradient 적용하는 방법먼저 background에 linear gradient를 적용하는 방법을 알아봅니다. linear는 한 방향으로 스무스(Smooth)하게 색이 다른색으로 변하며 적용되는 cs...
Last Modified : 2018-11-23 18:35:40
Created : 2017-09-01 06:07:33 - 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 - html
[CSS] padding 영역을 선택하여 색 지정하기, background-clip
만약 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 어떻게 해야할까요? 즉 패딩값이 적용되지 않은 콘텐츠 영역만 테두리 색을 지정하는 방법입니다. padding 값에 색을 지정할지 말지를 결정하기 위해 background-clip 속성을 사용합니다.background-clip: content-box;그럼 이 속성을 사용하기 이전과 사용 후의 모습을 비교할 필요가 있겠습니다.# 사용 전...<body><div class='test'>test</div></body><st...
Last Modified : 2015-10-29 21:46:38
Created : 2015-09-24 09:49:49 
css[CSS] background 배경 고정하기, background-attachment
CSS를 사용하여 백그라운드 이미지를 고정하는 방법에 대하여 알아봅니다. 즉 스크롤을 이동해도 동일한 위치에 계속 fixed 된 상태로 보이게 하려면 어떻게 할까요? 아래에서 알아보세요.# CSS를 사용하여 background 고정하는 방법하지만 백그라운드 이미지만 고정하길 원하면 사실 이처럼 레이어 전체를 고정(fixed)될 필요는 없겠죠. 이럴때 background-attachment 속성을 이용합니다.이 속성을 사용하면 아래와 같은 옵션값으로 백그라운드를 조정할 수 있습니다. 아래는 속성에 사용할 수 있는 값이니다. scroll과 fixed를 사용할 수 있습니다...
Last Modified : 2019-08-21 12:22:33
Created : 2015-09-23 15:12:06
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- css
[CSS] background 속성 및 옵션값, 그라데이션 사용법
웹사이트를 구축하는 경우 엘리먼트 요소에 원하는 배경을 추가할 수 있습니다. css를 사용하여 어떻게 백그라운드 배경을 설정하는지와 예제를 함께 알아보도록 하겠습니다. 추가적으로 그라데이션 효과(Gradient)를 만드는 방법도 함께 알아봅니다.# CSS를 사용하여 백그라운드(background) 지정하기특정 요소에 백그라운드를 추가하는 방법으로 CSS의 background 속성을 사용합니다. 백그라운드를 지정하는 경우 이미지 또는 배경색을 선택할 수 있습니다. 배경색의 경우 그라데이션 효과도 가능합니다.i. 백그라운드 ...
Last Modified : 2019-08-05 23:02:46
Created : 2014-09-04 18:12:06