어제 오늘 내일

background-color 버튼의 배경색은 CSS의 background-color 속성으로 지정할 수 있습니다. 예제 Default 버튼 하늘색 오렌지색 보라색 .skyblue_btn { background-color: skyblue; } .orange_btn { background-color: #FFA500; } .purple_btn { background-color: rgb(128, 0, 128); } background-color 속성을 이용하여 버튼의 색깔을 변경하였습니다. 그런데, 배경색이 변경된 버튼은 기존의 버튼처럼, 마우스 오버가 되거나, 버튼이 클릭되었을 때 배경색이 변경되지 않아서, 마치 눌러지지 않는 버튼 처럼 보이고 있습니다. 다음 포스팅에서는 배경색이 변경된 버튼에 마우스 오버..

CSS를 사용하여 텍스트의 색과 배경색을 지정할 수 있습니다. CSS로 텍스트 배경색 지정하기 (background-color) 텍스트의 배경색을 지정하기 위해서 CSS의 background-color 속성을 사용할 수 있습니다. background-color: yellow; background-color: #ffff00; 예제 배경색은 노랑, 초록, 파랑입니다. .y { background-color: yellow; } .g { background-color: #00FF00; } .b { background-color: blue; } CSS로 텍스트 색 지정하기 (color) 위 예제를 보면, 배경색을 파란색과 같이 진한 색으로 지정한 경우 텍스트가 검정색이라서 잘 눈에 띄지 않습니다. 텍스트의 색도 ..

이미지를 어둡게 하기 filter: brightness() opacity, background-color linear-gradient() 1. filter: brightness() CSS의 filter에 적용되는 brightness 함수는 주어진 이미지의 밝기를 조절합니다. 허용값 숫자 1은 100%입니다. 퍼센트 100% 미만은 이미지를 어둡게 합니다. 100% 초과는 이미지를 밝게 합니다. 0%는 이미지를 검은색으로 만듭니다. brightness(100%); /* 원본 이미지 */ brightness(0%); /* 검은색 */ brightness(200%); /* 밝기 2배 */ brightness(0.4); /* 40% */ brightness() 예제 my_brightness.html bright..

div 안의 배경색을 지정하기 위해서는 css의 background-color 속성을 지정합니다. background-color 예제 div { height : 20px; width : 200px; } CSS에서 색깔을 지정하는 방법은 다음과 같습니다. 이름 16진수 RGB(A) HSL(A) 위 예제는 각각 4가지 방법을 이용하여 div의 배경색을 지정한 예제입니다. CSS에서 색깔을 지정하는 위 4가지 방법에 대해서는 지난 포스팅을 참조하세요. [CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA)) 이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을..