어제 오늘 내일

border-color table/tr/td 태그에 border-color 속성을 이용하여 테이블의 테두리 색상을 지정할 수 있습니다. border border는 테두리의 너비, 스타일, 색상을 지정할 수 있는 단축 속성입니다. border 속성 안에 다음과 같은 속성을 한번에 지정할 수 있습니다. border-width border-style border-color border 속성으로 border-color로 지정할 수 있으므로, border 속성을 이용해도 테이블의 테두리 색상을 변경할 수 있습니다. border-color 속성 사용해서 테두리 생상 지정하기 이름 나이 Anna 20 Tina 22 table, td, th { border-width: 1px; border-style: solid; b..

input 필드에 대한 스타일을 변경하는 방법을 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) [HTML/CSS] input 커서 없애기 [HTML/CSS] input 테두리 아래만 남기기, 없애기 (border, outline) 이번에는 input 필드를 클릭했을 때 테두리의 색상을 변경하는 방법을 알아보도록 하겠습니다. input 클릭 시, 테두리 색상 변경 필드 클릭 시, 테두리 색상을 변경하기 위해서, 다음의 두 속성을 이용할 수 있습니다. border-color outline 이 두 속성의 지난번 포스팅에서 input 필드의 테두리를 없앨 때도 사용했습니다. [HTML/CSS] input 테두..

input 필드를 스타일링하는 방법을 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) [HTML/CSS] input 커서 없애기 이번에는 input 필드의 테두리를 없애는 방법, 아래쪽에만 테두리를 남기는 방법을 알아보겠습니다. 또한, input 필드에 마우스를 가져가면 나타나는 테두리도 같이 없애보도록 하겠습니다. border-width input 필드의 테두리를 없애기 위해 border 속성을 이용할 수 있습니다. 예제 input { background-color: #FFF8DC; } .no-border { border-width: 0; } .bottom-border { border-width: 0 ..

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

border-radius 30px 30% 30px, 10px 30px, 10px, 50px 10px, 20px, 30px, 40px #ex1 { background-color : green; border-radius: 30px; } #ex2 { background-color : red; border-radius: 30%; } #ex3 { background-color : gray; border-radius: 30px 10px; } #ex4 { background-color : lightpink; border-radius: 30px 10px 50px; } #ex5 { background-color : purple; border-radius: 10px 20px 30px 40px; } #ex1, #ex2, #..

기본 테이블 그리기 HTML에 아무런 스타일을 지정하지 않고, 태그만 사용해서 테이블을 그리면 테두리가 표시되지 않습니다. Product Price Apple 3000 Banana 2000 테이블에 테두리 표시하기 테이블의 테두리를 표시하기 위해서 HTML과 CSS의 border 속성을 사용할 수 있습니다. HTML의 border 속성 Product Price Apple 3000 Banana 2000 태그에 border 속성값을 1로 지정하였습니다. CSS의 border 속성 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; }; CSS의 border 속성을 '1px solid black'으로 정의하였습니다. 이때..

CSS의 속성을 이용하여 div의 테두리를 그리는 방법을 정리하였습니다. 1. border 2. border-style, border-width, border-color 3. border-top, border-right, border-bottom, border-left 4. outline 5. outline과 border의 차이점 1. border border 속성 사용하기 1 안녕하세요? div { width : 100px; height: 100px; background-color: #f5d682; border: 1px solid red; } CSS의 border속성을 정의하여 div의 테두리를 그려주었습니다. border 속성 사용하기 2 dotted red solid 6px solid div { w..