TIL (Today I Learned)

CSS

• 동일한 이름 Class 중 필요한 선택자 지정방법
  
  
  • &:first-child, &:last-child, &nth-child(n) 차이
    • 속성값 even, odd, 2n-1 등
      
      
• p span{} 부모안의 span, p>spanp의 바로 밑자식 spans, p+spanp바로 다음으로 오는 span
  
  
• 특정 선택자만 통제 할수 있는 방법 연구
  
  
  • <input type="text" require placeholder="edit">
    • input:require { } 으로 통제
    • input[placeholder="edit"] { } 로 통제
    
    
• States 가상 선택자
  
  
  • &:active, &:hover, &:focus, &:visited 등
  • MDN 공식문서 참조
    
    
• CSS 전역 변수
  
  
  • :root { } 변수 지정 하여 사용
    • :root { --font-color: blue } 선언
    • h1 { color: var(--font-color) } 사용
      
      
• transition 개념, ease-in-out
  
  
• transform 개념, 요소의 회전, 기울이기 등 조절
  
  
• 애니메이션 필히 복습
  
  
  • @keyframe 이름 { from { } to { } }
    
    
• @media screen and ( ) { } CSS를 이용하여 화면크기에 따른 스크린조절, 미디어 쿼리