어제 오늘 내일

지난번에는 버튼의 배경색을 변경하는 방법을 알아보았습니다. [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..

지난 번에는 텍스트의 줄높이, 즉 행간격을 조정하는 방법을 알아보았습니다. [HTML/CSS] 텍스트 줄간격 설정하기 (line-height) [HTML/CSS] 텍스트 줄간격 설정하기 (line-height) CSS의 line-height 속성을 지정하여 텍스트의 줄간격(줄 높이)을 지정할 수 있습니다. line-height CSS의 line-height 속성은 텍스트 라인의 높이를 지정합니다. 주로, 줄간격을 지정하는데 많이 사용됩니다. hianna.tistory.com 자간 간격 설정하기 자간(글자 간격) 또는 단어 간격을 조정하기 위해서 CSS의 letter-spacing, word-spacing 속성을 사용할 수 있습니다. letter-spacing 글자 사이의 간격을 조정합니다. 양수 값을 사..

CSS의 line-height 속성을 지정하여 텍스트의 줄간격(줄 높이)을 지정할 수 있습니다. line-height CSS의 line-height 속성은 텍스트 라인의 높이를 지정합니다. 주로, 줄간격을 지정하는데 많이 사용됩니다. 허용 값 number - 해당 element의 폰트 사이즈를 기준으로 계산됩니다. ex) 폰트 사이즈 * number length - px, em 등의 단위를 사용합니다. percentage - 폰트 사이즈를 기준으로 계산됩니다. ex) 폰트사이즈 * percentage / 100 keyword "normal" - 브라우저에 지정된 값으로 설정됩니다. 위 허용 값들 중 'number'를 사용하기를 추천합니다. 줄간격 설정하기 default 기본값 default 기본값 def..

CSS의 text-indent 속성을 사용하면 텍스트 단락의 들여쓰기와 내어쓰기의 정도를 설정할 수 있습니다. text-indent 속성 CSS의 text-indent 속성을 사용하면, 블록에서 텍스트 앞에 놓이는 공간의 길이를 설정할 수 있습니다. 기본값 : 0 허용값 length : px, em 등 percentage : ex) 10% 등 값이 양수일 경우, 들여쓰기가 됩니다. 값이 음수일 경우, 내어쓰기가 됩니다. 단락 들여쓰기 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나..

cursor 웹에서 마우스 커서의 모양은 자동으로 변경됩니다. 링크가 있을 경우 손가락 모양으로, 텍스트를 입력하는 란에서는 텍스트 입력 커서로 자동으로 변경됩니다. 마우스 커서를 사용자 임의로 변경할 수도 있습니다. 이때, CSS의 cursor 속성을 사용합니다. 예제 손모양 로딩중 돋보기 .pointer { cursor: pointer; } .wait { cursor: wait; } .zoomin { cursor: zoom-in; } 위 예제는 각 텍스트에 마우스 포인터를 가져가면 cursor 속성에 정의된 값에 따라 커서의 모양이 변경됩니다. (pointer, wait, zoom-in) 좀 더 많은, 커서의 모양은 다음의 MSDN 문서를 참고하세요. https://developer.mozilla.o..

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) 위 예제를 보면, 배경색을 파란색과 같이 진한 색으로 지정한 경우 텍스트가 검정색이라서 잘 눈에 띄지 않습니다. 텍스트의 색도 ..

지난 번에는 CSS의 linear-gradient() 함수를 이용하여 배경색에 그라데이션을 주는 방법을 알아보았습니다. [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) 또한, 이를 활용하여 무지개 색으로 배경을 지정하는 방법도 알아보았습니다. [HTML/CSS] 무지개 그라데이션 (linear-gradient) 이를 응용하면 배경색을 2가지 색으로 반반 나누어 지정하는 것은 더 쉽겠죠? 배경색 두개로 반반 나누어 지정하기 (그라데이션) 배경색 두개로 반반 나누어 지정하기 (Solid) 두 배경색의 경계선 위치 조정하기 (Solid) 1. 배경색 두개로 반반 나누어 지정하기 (그라데이션) my_gradient_half_1.html my_gradient_half_1.css #h..