어제 오늘 내일

, , 태그를 사용하여 생성된 목록 앞에는 목록을 구분하는 점, 숫자 등이 표시됩니다. 이 때, 앞에 붙는 점을 없애는 방법입니다. list-style-type 또는 list-style 목록 사과 바나나 오렌지 점 없는 목록 사과 바나나 오렌지 .no_dot { list-style-type: none; } list-style-type: none; 리스트 앞에 붙은 점을 제거 하기 위해서 list-style-type의 값을 'none'으로 설정하였습니다. list-style-type 대신 list-style 속성을 사용해도 됩니다. list-style-type: none; list-style: none; (list-style 속성은, list-style-image, list-style-position, l..

버튼의 크기를 지정하기 위해서 width, height 속성을 사용할 수도 있지만, padding 속성을 사용할 수도 있습니다. 버튼 크기 조정하기 (width, height) 먼저 width, height로 버튼의 크기를 조정해보았습니다. 기본 버튼 큰 버튼 내용이 길어지면 .my_btn { background-color: skyblue; color: white; border: none; width: 100px; height: 30px; } 예제에서 보는 것과 같이, width, height를 고정하여 버튼의 크기를 지정하면 버튼 안에 들어가는 내용이 길어지면, 내용이 버튼의 크기를 벗어나게 됩니다. 버튼 크기 조정하기 (padding) 기본 버튼 큰 버튼 내용이 길어져도 괜찮아요 .my_btn { b..

border-radius 버튼의 테두리를 둥글게 하기 위해서는 border-radius 속성을 사용합니다. 이 속성은 요소의 각 테두리를 둥글게 하는 속성으로, 1개~8개까지의 값을 지정할 수 있습니다. border-radius 속성에 대한 자세한 설명 및 사용방법은 아래의 지난 포스팅을 참조하세요. [HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius) 버튼 테두리 둥글게 만들기 예제 둥근 테두리 버튼 .my_btn { font-size: 30px; background-color: skyblue; color: white; border: none; border-radius: 20px; } border-radius: 20px; border-radius에 1개 값을 지정하면, 모..

지난번에는 버튼의 배경색과 글자색을 바꾸는 방법을 알아보았습니다. 이번에는 테두리 색을 변경하거나, 테두리를 보이지 않도록 하는 방법을 정리하였습니다. 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..

지난 번에는 텍스트의 줄높이, 즉 행간격을 조정하는 방법을 알아보았습니다. [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..