[CSS] background-image 가운데 정렬, 어둡기 조절

 

background 이미지 size 맞춤 설정 3종 세트 

background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;

 

marign과 padding

margin : 요소의 바깥 여백 ex) margin: 20px -> 양방향으로 20px씩 띄어라

padding: 요소의 안쪽 여백 

 

- 위에서 부터 시계방향으로 여백 지정가능

 

 

요소의 가운데 정렬방법

1) margin 으로 정렬하는 방법

( 양쪽 여백이 같다 => 가운데 정렬 )

div의 size 를 조절해서 margin으로 정렬하는 방법 

margin: auto; 양쪽 여백을 쫙 민다.

 

2) 내용물을 자체를 정렬하는 코드

display: flex;

flex-direction: column;  // row형태로 하면 옆으로 정렬한다.

justify-content: center;

align-item: center;

 

 

사진 어둡게 조절 background-image:

linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))