CATEGORIES
만약 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 어떻게 해야할까요? 즉 패딩값이 적용되지 않은 콘텐츠 영역만 테두리 색을 지정하는 방법입니다. padding 값에 색을 지정할지 말지를 결정하기 위해 background-clip 속성을 사용합니다.background-clip: content-box;그럼 이 속성을 사용하기 이전과 사용 후의 모습을 비교할 필요가 있겠습니다.# 사용 전...<body><div class='test'>test</div></body><style>.test {padding: 5px;width: 100px;height: 50px;background-color: #fa8;border: 1px solid #000;}</style>te
Last Modified : 2015-10-29 21:46:38
CSS를 사용하여 백그라운드 이미지를 고정하는 방법에 대하여 알아봅니다. 즉 스크롤을 이동해도 동일한 위치에 계속 fixed 된 상태로 보이게 하려면 어떻게 할까요? 아래에서 알아보세요.# CSS를 사용하여 background 고정하는 방법하지만 백그라운드 이미지만 고정하길 원하면 사실 이처럼 레이어 전체를 고정(fixed)될 필요는 없겠죠. 이럴때 background-attachment 속성을 이용합니다.이 속성을 사용하면 아래와 같은 옵션값으로 백그라운드를 조정할 수 있습니다. 아래는 속성에 사용할 수 있는 값이니다. scroll과 fixed를 사용할 수 있습니다.scroll // 스크롤에 따라 이동하는 방법(Default)fixed // 항상 고정된 이미지로 동작사이트 내에서 스크롤을 통해 영역
Last Modified : 2019-08-21 12:22:33
css를 사용하여 백그라운드 위치를 조정하는 방법에 대하여 알아봅니다.# CSS의 background-position으로 백그라운드 위치 조정하기백그라운드 위치는 background-position이라는 css 속성을 사용해 위치 조정이 가능합니다. 간단한 문법은 아래와 같습니다.background-position: 좌우값 상하값;설정하는 값의 단위는 px 또는 % 등을 사용할 수 있습니다. 그리고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다.background-position: 0 0;background-position: 10px 50px;background-position: 50% 50%;background-position: center center;backgro
Last Modified : 2019-08-21 11:55:07웹사이트를 구축하는 경우 엘리먼트 요소에 원하는 배경을 추가할 수 있습니다. css를 사용하여 어떻게 백그라운드 배경을 설정하는지와 예제를 함께 알아보도록 하겠습니다. 추가적으로 그라데이션 효과(Gradient)를 만드는 방법도 함께 알아봅니다.# CSS를 사용하여 백그라운드(background) 지정하기특정 요소에 백그라운드를 추가하는 방법으로 CSS의 background 속성을 사용합니다. 백그라운드를 지정하는 경우 이미지 또는 배경색을 선택할 수 있습니다. 배경색의 경우 그라데이션 효과도 가능합니다.i. 백그라운드 이미지 설정ii. 백그라운드 색을 설정iii. 백그라운드에 그라데이션을 추가하기그럼 어떻게 사용하는지 간단한 문법부터 알아보겠습니다.! CSS의 background 속성 사용하기backgro
Last Modified : 2019-08-05 23:02:46
이미지 태그를 사용하지 않고 백그라운드를 사용한 이미지의 경우 이미지 경로를 확인하려면 아래의 함수를 사용해 불러올 수가 있습니다. 그 외에도 다른 속성들 예를 들어 display나 margin등의 속성이 가진 값을 확인할 때도 아래 함수를 사용해 어떤 값이 지정되었는지 알 수 있습니다.# 자바스크립트를 사용하여 백그라운드 정보, url 등을 불러오는 방법아래 함수는 적용된 백그라운드의 다양한 정보를 불러옵니다. window.getComputedStyle(해당 엘리먼트)적용된 엘리먼트는 아래의 함수를 사용하여 브라우저에 적용된 모든 CSS 스타일을 불러올 수 있습니다. 아래의 함수를 사용해야 원하는 스타일을 가져올 수 있죠.getPropertyValue(가져올 스타일 속성) 이제 해당요소에 적용된 특정 스타
Last Modified : 2017-11-19 07:17:10
CSS를 사용하여 배경 이미지와 다른 이미지 또는 배경색을 하나로 섞어 표현할 수 있는 방법을 알아봅니다. 쉽게 얘기해서 하늘에 구름이 떠 있는 이미지에 특별한 배경색을 혼합해 적용하려는 경우가 예가 될 수 있겠습니다.# CSS background-blend-mode 알아보기CSS에는 백그라운드 이미지에 다른 색을 적용할 수 있는 방법이 존재합니다. 바로 css의 background-blend-mode입니다. 해당 css 속성을 사용하면 위와 같이 이미지와 배경을 혼합하여 구현이 가능합니다. 이때 설정 값으로는 multiply가 사용되야 합니다.background-blend-mode: multiply;이 방법은 이미지 자체에 투명 효과가 없어도 사용 가능한 방법입니다. 즉 transparency를 가진 이미
Last Modified : 2022-01-20 23:27:22
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를 사용하여 배경, background에 gradient(그라데이션) 효과를 줄 수 있습니다. gradient는 2개 이상의 색이 서서히 적용되어 있는 상태의 모습을 가지게됩니다. 그럼 아래는 css를 사용한 그라데이션(gradient)효과를 적용하는 방법을 알아보고 이 효과를 사용하여 텍스트 그라디언트 효과를 적용하는 방법입니다.# backround에 gradient 적용하는 방법먼저 background에 linear gradient를 적용하는 방법을 알아봅니다. linear는 한 방향으로 스무스(Smooth)하게 색이 다른색으로 변하며 적용되는 css효과입니다. 이때 CSS에 적용방법은 아래와 같이 사용합니다.background: linear-gradient { 방향, 색상1, 색상2 ...}더 자
Last Modified : 2018-11-23 18:35:40제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# 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
자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.# 캔버스(Canvas)에 배경색 칠하기canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을 그리는 방법이 사용됩니다. 즉 캔버스 위에 색을 칠하는 것과 동일하게 구현할 수 있죠.구현 과정은 아래와 같습니다.1. 새로운 캔버스를 만들고 컨텍스트를 생성한다.2. 컨텍스트 내부에 원하는 색의 fillStyle 값을 설정한다.3. 캔버스와 동일한 크기로 fillRect()를 사용하여 그린다.매우 간단하죠 그럼 아래에서 간단한 예제를 만들어 적용해봅니다.! 캔버스(canvas) 배경색 예제보기아래는
Last Modified : 2020-12-22 06:09:52CSS에서 배경색을 사용하는 방법에 대하여 알아봅니다. 이 경우 CSS 프로퍼티인 background-color를 사용할 수 있습니다. background-color는 해당 엘리먼트에 배경색을 지정하여 보여줍니다. 사용방법은 아래와 같습니다.background-color { color | transparent | inherit | initial }@ background-color property- CSS 1# background-color 프로퍼티 값 지정하기설정 가능한 값으로 투명하게하는 transparent를 사용할 수 있습니다. color값으로는 HEX, RGB, RGBA, HSL, HSLA가 사용됩니다.div { background-color: #f00; }div { background-color:
Last Modified : 2019-08-05 12:53:20