[ DEV Ed ] glass webpage 중간중간 메모

# www.youtube.com/watch?v=O7WbVj5apxU&t=568s

 

 

## CSS
  # 우측 위를 향하는 배경 그라데이션 
  background: linear-gradient(to right top, #65dfc9, #6cddeb);  

  # div 중앙에 띄우기 
  display: flex;
  align-items: center; //가로
  justify-content: center; //세로

  # rgba 투명도까지 처리할수 있는 색상 코드
  rgba(255, 255, 255, 0.7)
  
  # 모서리 둥글게
  border-radius: 2rem;
  
  # 완전히 둥글게
  border-radius: 50%;
  
  # 블러 처리
 backdrop-filter: blur(2rem);
 
 # 가로로 놓기
     display: flex;
     
 # 가로로 공간 잡아줌
 .dashboard{
    flex: 1;
}

# 태그내 항목들을 세로로 세워줌
flex-direction: column;

# 배경을 텍스트뒤에만 잡히게 해줌
    -webkit-background-clip: text;

# 텍스트 색 투명 처리
  -webkit-text-fill-color: transparent;
  
  

 

## HTML
      # viewport 설정
      <meta name="viewport" content="width=device-width, initial">

 

# CSS 단위 : urakasumi.tistory.com/143