어제 오늘 내일

박스에 그림자를 그리기 위해서는 CSS의 box-shadow 속성을 사용합니다. box-shadow 이 속성은 CSS 요소에 그림자를 추가해줍니다. box-shadow : 5px 5px 5px 5px red inset; 허용 값 offset-x, offset-y 그림자의 위치를 지정합니다. offset-x : 양수를 입력하면 그림자가 오른쪽으로, 음수를 입력하면 그림자가 왼쪽으로 만들어집니다. offset-y : 양수를 입력하면 그림자가 아래쪽으로, 음수를 입력하면 그립자가 위쪽으로 만들어집니다. blur-radius 숫자가 커질수록, 그림자가 블러 처리되어 흐려집니다. spread-radius 숫자가 커질수록, 그림자의 크기가 커집니다. color 그림자의 색깔을 지정할 수 있습니다. inset ins..

, , 태그를 사용하여 생성된 목록 앞에는 목록을 구분하는 점, 숫자 등이 표시됩니다. 이 때, 앞에 붙는 점을 없애는 방법입니다. 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..