본문 바로가기

HTML,CSS

박스 꾸미는 몇가지 방법

border-radius: 50px;

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

 

 

개별 설정

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

 

 

 

배경색

background-color 

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

 

페이지 변경색

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

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

 

 

 

box-shadow

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

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

 

코드 잇 코드참조

 

 

 

 

 

 

 

 

'HTML,CSS' 카테고리의 다른 글

배경 이미지  (0) 2021.07.21
box-sizing  (0) 2021.07.21
Box Model  (0) 2021.07.20
margin auto auto; 와 text-align: center; 비교  (0) 2021.07.20
나의 두번째 웹사이트  (0) 2021.07.20