어제 오늘 내일

지난번에는 버튼의 배경색과 글자색을 바꾸는 방법을 알아보았습니다. 이번에는 테두리 색을 변경하거나, 테두리를 보이지 않도록 하는 방법을 정리하였습니다. 2022.12.10 - [IT/HTML&CSS] - [HTML/CSS] 버튼 배경색 지정하기 2022.12.11 - [IT/HTML&CSS] - [HTML/CSS] 버튼 글자색 변경하기 (color) 버튼 테두리 색 변경, 테두리 없애기 빨간 테두리 버튼 테두리 없는 버튼 노란 테두리 버튼 .outline_btn { background-color: yellow; border-color: red; } .no_outline_btn { background-color: yellow; border: none; } .yellow_outline_btn { backgr..

지난번에는 버튼의 배경색을 변경하는 방법을 알아보았습니다. [HTML/CSS] 버튼 배경색 지정하기 버튼에 기본적으로 적용된 글자색은 검정입니다. 만약, 버튼의 배경색을 어두운 색으로 변경한다면, 버튼의 글씨가 잘 보이지 않게 됩니다. 이때는, 버튼의 글자를 밝은 색으로 변경해주어야 합니다. 버튼 글자색 변경하기 (color) 버튼 .my_btn { background-color: black; color: white; } color: white; CSS의 color 속성을 사용하여 버튼의 글자색을 흰색으로 변경하였습니다.

지난번에는 버튼의 배경색을 변경하는 방법을 알아보았습니다. [HTML/CSS] 버튼 배경색 지정하기 그런데, 위 포스팅과 같이 배경색만 변경하면, 마우스 오버, 클릭 등의 액션이 발생해도 배경색이 그대로여서 마치 누를 수 없는 버튼처럼 느껴집니다. 이번에는 버튼에 마우스 오버, 클릭 등의 액션이 일어날 경우 버튼의 배경색을 변경하는 방법을 정리해보겠습니다. :hovor 마우스를 버튼에 올렸을 때, 지정한 스타일이 적용됩니다. :focus 버튼에 마우스가 올려지거나, Tab 키 등을 이용하여 버튼에 포커스가 간 경우에, 지정한 스타일이 적용됩니다. :active 버튼을 마우스로 클릭하고, 클릭을 해제 할 때까지, 지정한 스타일이 적용됩니다. 예제 버튼 .skyblue_btn { background-colo..

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 속성을 이용하여 버튼의 색깔을 변경하였습니다. 그런데, 배경색이 변경된 버튼은 기존의 버튼처럼, 마우스 오버가 되거나, 버튼이 클릭되었을 때 배경색이 변경되지 않아서, 마치 눌러지지 않는 버튼 처럼 보이고 있습니다. 다음 포스팅에서는 배경색이 변경된 버튼에 마우스 오버..

지난번 포스팅에서 배경 그라데이션, 무지개 그라데이션을 적용하는 방법을 알아보았습니다. [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) 지난번에는 단순하게 요소의 배경색을 지정하거나, 배경 이미지를 지정하는 방법을 알아보았습니다. [HTML/CSS] div 안의 배경색 지정하기 div 안의 배경색을 지정하기 위해서는 css의 background-color hianna.tistory.com [HTML/CSS] 무지개 그라데이션 (linear-gradient) [HTML/CSS] 무지개 그라데이션 (linear-gradient) 지난 번 포스팅에서는 CSS로 그라데이션을 만들 수 있는 linear-g..