자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.# 캔버스(Canvas)에 배경색 칠하기canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을 그리는 방법이 사용됩니다. 즉 캔버스 위에 색을 칠하는 것과 동일하게 구현할 수 있죠.구현 과정은 아래와 같습니다.1. 새로운 캔버스를 만들고 컨텍스트를 생성한다.2. 컨텍스트 내부에 원하는 색의 fillStyle 값을 설정한다.3. 캔버스와 동일한 크기로 fi...
VueJS에서 태그 및 컴포넌트 요소에 backgroundImage 인라인 스타일을 사용하여 백그라운드 이미지를 추가하는 방법입니다.# VueJS 요소 및 컴포넌트에 백그라운드 이미지 적용하기만약 변수 bgImg이 다음과 같은 값을 가지는 경우라면...this.bgImg = "https://webisfree.com/imgs/main_bg.jpg";이 값을 아래의 태그 요소에 백그라운드 이미지로 적용해보겠습니다. 이때 인라인 스타일 방식을 사용하였습니다. <div class="sidebar__bg" v-bind:st...
CSS에서 배경색을 사용하는 방법에 대하여 알아봅니다. 이 경우 CSS 프로퍼티인 background-color를 사용할 수 있습니다. background-color는 해당 엘리먼트에 배경색을 지정하여 보여줍니다. 사용방법은 아래와 같습니다.background-color { color | transparent | inherit | initial }@ background-color property- CSS 1# background-color 프로퍼티 값 지정하기설정 가능한 값으로 투명하게하는 transparent를 사용할 수 있습니다. color값으로는 HEX, RGB...
css를 사용하여 배경, background에 gradient(그라데이션) 효과를 줄 수 있습니다. gradient는 2개 이상의 색이 서서히 적용되어 있는 상태의 모습을 가지게됩니다. 그럼 아래는 css를 사용한 그라데이션(gradient)효과를 적용하는 방법을 알아보고 이 효과를 사용하여 텍스트 그라디언트 효과를 적용하는 방법입니다.# backround에 gradient 적용하는 방법먼저 background에 linear gradient를 적용하는 방법을 알아봅니다. linear는 한 방향으로 스무스(Smooth)하게 색이 다른색으로 변하며 적용되는 cs...
제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 data-imgname의 값을 불러온 뒤 이를 해당 태그 안에 있는 thumbImg 클래스명안에 백그라운드 형태로 넣어 출력하는 방법입니다.* HTML 코드<body> <li data-imgname="test.jpg">&...
만약 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 어떻게 해야할까요? 즉 패딩값이 적용되지 않은 콘텐츠 영역만 테두리 색을 지정하는 방법입니다. padding 값에 색을 지정할지 말지를 결정하기 위해 background-clip 속성을 사용합니다.background-clip: content-box;그럼 이 속성을 사용하기 이전과 사용 후의 모습을 비교할 필요가 있겠습니다.# 사용 전...<body><div class='test'>test</div></body><st...
CSS를 사용하여 백그라운드 이미지를 고정하는 방법에 대하여 알아봅니다. 즉 스크롤을 이동해도 동일한 위치에 계속 fixed 된 상태로 보이게 하려면 어떻게 할까요? 아래에서 알아보세요.# CSS를 사용하여 background 고정하는 방법하지만 백그라운드 이미지만 고정하길 원하면 사실 이처럼 레이어 전체를 고정(fixed)될 필요는 없겠죠. 이럴때 background-attachment 속성을 이용합니다.이 속성을 사용하면 아래와 같은 옵션값으로 백그라운드를 조정할 수 있습니다. 아래는 속성에 사용할 수 있는 값이니다. scroll과 fixed를 사용할 수 있습니다...
CSS를 사용하여 배경 이미지와 다른 이미지 또는 배경색을 하나로 섞어 표현할 수 있는 방법을 알아봅니다. 쉽게 얘기해서 하늘에 구름이 떠 있는 이미지에 특별한 배경색을 혼합해 적용하려는 경우가 예가 될 수 있겠습니다.# CSS background-blend-mode 알아보기CSS에는 백그라운드 이미지에 다른 색을 적용할 수 있는 방법이 존재합니다. 바로 css의 background-blend-mode입니다. 해당 css 속성을 사용하면 위와 같이 이미지와 배경을 혼합하여 구현이 가능합니다. 이때 설정 값으로는 multiply가 사용되야 합니다.backgro...
css를 사용하여 백그라운드 위치를 조정하는 방법에 대하여 알아봅니다.# CSS의 background-position으로 백그라운드 위치 조정하기백그라운드 위치는 background-position이라는 css 속성을 사용해 위치 조정이 가능합니다. 간단한 문법은 아래와 같습니다.background-position: 좌우값 상하값;설정하는 값의 단위는 px 또는 % 등을 사용할 수 있습니다. 그리고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다.background-position: 0 0;background-positi...
웹사이트를 구축하는 경우 엘리먼트 요소에 원하는 배경을 추가할 수 있습니다. css를 사용하여 어떻게 백그라운드 배경을 설정하는지와 예제를 함께 알아보도록 하겠습니다. 추가적으로 그라데이션 효과(Gradient)를 만드는 방법도 함께 알아봅니다.# CSS를 사용하여 백그라운드(background) 지정하기특정 요소에 백그라운드를 추가하는 방법으로 CSS의 background 속성을 사용합니다. 백그라운드를 지정하는 경우 이미지 또는 배경색을 선택할 수 있습니다. 배경색의 경우 그라데이션 효과도 가능합니다.i. 백그라운드 ...