⭐⭐ 자주쓰이는 복.붙용 CSS 코드 정리 ⭐⭐
background-image: url("#");
background-position : center;
background-size: cover;
* 이미지 어둡게
background-image: **linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),** url("#");
** 배경 이미지를 어둡게 하기 위해 이미지 url 앞에 아래 코드 추가해주는 것임
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("#");
* 일괄 정렬
display: flex;
flex-direction: column; = row(행)으로 변경가능
justify-content: center;
align-items: center;
* 해당 항목 가운데정렬 margin 이용해서도 가능함
margin : auto
혹은 위아래로 여백도 필요한 경우
margin : 10px 10px 10px 10px
상 우 하 좌
↓ 주고싶은 강도 설정
border-radius: 50px; = 둥글게
border: 1px solid white; = 굵기 부드러움정도 색상 설정
* 줄 만들기
border-top : 1px solid black;
* 응용해서 칸 만들기
padding : 12px 24px;
border-top : 1px solid black;
↓ top,bottom,left,right 등 여백 주고싶은 부분 입력
margin-# : 10px = 바깥 여백
padding-# : 10px = 안쪽 여백
↑ 주고싶은 여백 설정
margin : 10px 10px 10px 10px 와 같이 4면을 지정해줄 수 있다.
상 우 하 좌
.설정한 클래스이름 > button:hover {
수정될 모습 }
box-shadow: 0px 0px 3px 0px gray;
** 이모티콘 모음
https://kr.piliapp.com/facebook-symbols/
** 모바일처리(확대,축소 제한)
기존) width: 500px;
변경) max-width: 500px;
width: 95%;