⭐자주쓰이는 CSS 코드 정리⭐

⭐⭐ 자주쓰이는 복.붙용 CSS 코드 정리 ⭐⭐

1. 백그라운드 이미지 정렬 3총사

	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("#");

2. 내용물 가운데 정렬

* 일괄 정렬

 	display: flex;
    flex-direction: column;   = row(행)으로 변경가능
    justify-content: center;
    align-items: center;
    
* 해당 항목 가운데정렬 margin 이용해서도 가능함

	margin : auto

  혹은 위아래로 여백도 필요한 경우 

	margin : 10px 10px 10px 10px
        	  상   우   하   좌

3. 줄, 테두리 설정

                    ↓ 주고싶은 강도 설정
	border-radius: 50px;   = 둥글게
	border: 1px solid white;   = 굵기 부드러움정도 색상 설정
    
    
   *  줄 만들기
    border-top : 1px solid black;
    
   * 응용해서 칸 만들기 
   padding : 12px 24px;
   border-top : 1px solid black;
    

4. 여백 설정

           ↓ top,bottom,left,right 등 여백 주고싶은 부분 입력
	margin-# : 10px   =  바깥 여백
    padding-# : 10px  =  안쪽 여백
    			↑ 주고싶은 여백 설정
    margin : 10px 10px 10px 10px 와 같이 4면을 지정해줄 수 있다.
              상   우   하   좌

5. 버튼에 커서 올려두면 변하도록 설정

.설정한 클래스이름 > button:hover {
				수정될 모습 }

6. 그림자 효과

box-shadow: 0px 0px 3px 0px gray;

• 꿀팁 !!
  
  

** 이모티콘 모음

https://kr.piliapp.com/facebook-symbols/

** 모바일처리(확대,축소 제한)

기존)  width: 500px;

변경)  max-width: 500px;
      width: 95%;