1-9 CSS 속성(이미지 어둡게 / border/가운정렬)

이미지 어둡게

CSS 에 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url(””)

                                                                                                                                                           ↑

                                                                                                                                                  이미지 주소 입력

Border

순서: border: 사이즈 스타일 색상;

border: 1px solid white;

 

 

내용 가운데 정렬

CSS에

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

 

 

 

⭐️ display(화면에 어떻게 나타낼지/ 요소크기 결정) 속성  display:~~;

1. None - 화면에서 사라짐. 크기차지도 하지 않음
2. block- 태그의 기본값. width가 자신의 컨테이너의 100%가 됨.
3. inline- 컨테이너 내용만큼의 길이. 줄바꿈이 되지 않고 CSS로 크기를 변화시킬수 없음.
4. inline-block - 인라인의 속성과 같지만 CSS로 크기를 바꾸어 줄수 있음.
5. flex- 부모요소에 적용하여야함. 컨테이너의 위피를 자유롭게 배치.
   • flex-direction
     • row: 아이템을 왼쪽에서 오른쪽으로 표시
     • row-reverse: 아이템을 오른쪽에서 왼쪽으로 표시
     • column: 아이템을 위에서 아래로
     • column-reverse: 아이템을 아래서 위로 표시.
   • align-content: 교차축의 정렬방법 설정
   • align-items: 교차축에서 아이템의 정렬방법 설정
   • justify-content: 주축의 정렬방법 설정