CSS에서 배경색을 사용하는 방법에 대하여 알아봅니다. 이 경우 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: ref; }div { background-color: rgb(200, 0, 0);div { background-color: hsl(50, 30%, 60%);div { backgro
2018-07-09 21:54:45css를 사용하여 배경, background에 gradient(그라데이션) 효과를 줄 수 있습니다. gradient는 2개 이상의 색이 서서히 적용되어 있는 상태의 모습을 가지게됩니다. 그럼 아래는 css를 사용한 그라데이션(gradient)효과를 적용하는 방법을 알아보고 이 효과를 사용하여 텍스트 그라디언트 효과를 적용하는 방법입니다.# backround에 gradient 적용하는 방법먼저 background에 linear gradient를 적용하는 방법을 알아봅니다. linear는 한 방향으로 스무스(Smooth)하게 색이 다른색으로 변하며 적용되는 css효과입니다. 이때 CSS에 적용방법은 아래와 같이 사용합니다.background: linear-gradient { 방향, 색상1, 색상2 ...}더 자세하게 아시려면 아래 링크를 클릭하세요! >http://webisfree.com/2014-09-04/[css]-background-속성-및-옵션값-그라데이션-사용법# CSS를 사용
2017-09-01 06:07:33제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 data-imgname의 값을 불러온 뒤 이를 해당 태그 안에 있는 thumbImg 클래스명안에 백그라운드 형태로 넣어 출력하는 방법입니다.* HTML 코드<body> <li data-imgname="test.jpg"> <div class="thumbImg"></div> </li></body>* 스크립트 코드// 이미지 배경으로 삽입하기thumbEles = $('li[data-imgname]');for (i=0; i < thumbEles.length ; i++) { thumbName = 'url(./images/' + thumbEles.eq(i).attr('d
2015-11-26 15:28:11만약 특정 영역 전체가 아닌 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>test# 사용 후...<body><div class='test'>test</div></body><style>.test {padding: 5px;width: 100px;height:
2015-09-24 09:49:49CSS를 사용하여 백그라운드 이미지를 고정하는 방법에 대하여 알아봅니다. 어떻게 하면 배경 이미지를 고정할 수 있을까요?# CSS를 사용하여 background 고정하는 방법일반적으로 가장 많이 사용되는 방법은 css가 아닌 레이어를 추가하여 해당 레이어를 고정시키는 방법입니다. position: fixed를 사용하면 해당 레이어를 고정할 수 있죠. 하지만 백그라운드 이미지만 고정하길 원하면 사실 이처럼 레이어 전체를 고정(fixed)될 필요는 없겠죠. 이럴때 background-attachment 속성을 이용합니다.이 속성을 사용하면 아래와 같은 옵션값으로 백그라운드를 조정할 수 있습니다.scroll // 스크롤에 따라 이동하는 방법(Default)fixed // 항상 고정된 이미지로 동작사이트 내에서 스크롤을 통해 영역을 이동할때 뒤에 위치한 배경화면인 background-image가 고정된 형태로 나타나는 것을 볼 수 있습니다. 간단하게 생각했을때 고정된 요소가 하나 있
2015-09-23 15:12:06배경색 그리고 배경으로 사용된 이미지를 섞어서(?) 함께 사용하는 방법이 가능하냐는 물음에 대하여 아래 속성을 통해 구현이 가능하다 할 수 있습니다.background-blend-mode: multiply;간단하게 설명하면 배경이미지와 배경색을 함께 사용할 경우 png 파일처럼 transparency 효과가 없는 경우 배경색은 무시됩니다. 하지만 둘 다 혼합하려는 경우 background-blend-mode를 사용할 경우에 가능합니다. 이에 대한 예제는 아래를 참고해주세요.# 예제소스 코드보기<div class="test"></div><style type="text/css">.test {background-color: #f00;background-image: url('/testimage.jpg');background-blend-mode: multiply;</style>background-blend-mode 속성이 없는 경우 사용된 testimage.jpg의 이미지만 배경으로 보여지
2015-09-23 14:33:51background-position 속성을 사용해 지정된 백그라운드의 위치 조정이 가능합니다.background-position: 좌우값 상하값;여기에 들어갈 값은 px 또는 % 단위로 입력할 수 있고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다. 또한, inherit를 사용해 부모값을 상속 받을 수도 있죠... 그럼 예를 들어 알어보도록 하겠습니다.#1. 백그라운드 이미지를 좌우 50% 상하 30% 조정해야하는경우...<style type="text/css">background-position: 50% 30%;</style>위와 같이 사용할 수 있습니다. 또한 위 속성은 아래처럼 나누어 쓸 수도 있죠<style type="text/css">background-position-x: 50%;background-position-y: 30%;</style>하지만 위에 있는 background-position-x와 background-positio
2015-03-09 11:23:05웹사이트를 구축하는 경우 엘리먼트 요소에 원하는 배경을 추가할 수 있습니다. css를 사용하여 어떻게 백그라운드 배경을 설정하는지와 예제를 함께 알아보도록 하겠습니다. 추가적으로 그라데이션 효과(Gradient)를 만드는 방법도 함께 알아봅니다.# CSS를 사용하여 백그라운드(background) 지정하기특정 요소에 백그라운드를 추가하는 방법으로 CSS의 background 속성을 사용합니다. 백그라운드를 지정하는 경우 이미지 또는 배경색을 선택할 수 있습니다. 배경색의 경우 그라데이션 효과도 가능합니다.i. 백그라운드 이미지 설정ii. 백그라운드 색을 설정iii. 백그라운드에 그라데이션을 추가하기그럼 어떻게 사용하는지 간단한 문법부터 알아보겠습니다.! CSS의 background 속성 사용하기background를 사용할때 다음과 같이 6가지 값을 설정합니다. 아래를 봐주세요.A. 색상(color)B. 이미지 위치 / url 주소C. 반복(repeat) 여부D. 첨부 // scro
2014-09-04 18:12:06이미지 태그를 사용하지 않고 백그라운드를 사용한 이미지의 경우 이미지 경로를 확인하려면 아래의 함수를 사용해 불러올 수가 있습니다. 그 외에도 다른 속성들 예를 들어 display나 margin등의 속성이 가진 값을 확인할 때도 아래 함수를 사용해 어떤 값이 지정되었는지 알 수 있습니다.# 자바스크립트를 사용하여 백그라운드 정보, url 등을 불러오는 방법아래 함수는 적용된 백그라운드의 다양한 정보를 불러옵니다. window.getComputedStyle(해당 엘리먼트)적용된 엘리먼트는 아래의 함수를 사용하여 브라우저에 적용된 모든 CSS 스타일을 불러올 수 있습니다. 아래의 함수를 사용해야 원하는 스타일을 가져올 수 있죠.getPropertyValue(가져올 스타일 속성) 이제 해당요소에 적용된 특정 스타일 값만 불러올 수 있습니다. 아래의 예제에서 더 자세히 알아보세요.# Background 정보 불러오기 예제보기간단한 예제로 알아봅니다. 만약 브라우저에 적용된 스타일 중 dis
2014-01-12 15:56:28
