HTML,CSS

박스 꾸미는 몇가지 방법

열곰탱 2021. 7. 21. 13:21

border-radius: 50px;

요소의 모소리를 둥글 만들 수 있습니다. 더 큰 값을 입력하면 더 둥글게 된다.

 

 

개별 설정

각 모서리를 개별 설정할 수도 있습니다.

 

 

 

배경색

background-color 

이 속성을 이용하면 배경색을 설정할 수 있습니다. 폰트 색을 설정할 때처럼 색 이름, RGB 코드, HEX 코드 중 하나를 입력하면 됩니다.

 

페이지 변경색

페이지 전체의 배경색을 설정하고 싶으면 body 태그에 background-color 속성을 입혀주면 됩니다.

-->배경색을 투명하게 두고 싶으면 transparent 값으로 설정해주면 되는데, 따로 설정을 해주지 않으면 transparent가 기본값으로 설정됩니다!

 

 

 

box-shadow

이 코드는 그림자를 입혀주는 속성입니다. 기본값은 none이고, 그림자가 없다는 뜻입니다.

색깔을 따로 설정해주지 않으면 그림자는 검은색입니다. 만약 다른 색으로 바꾸고 싶으면 box-shadow속성에 추가로 색을 써주면 됩니다.

 

코드 잇 코드참조