TIL

🐥 배경 관련 CSS 속성들

• background-size : px, % 단위도 가능
• backround-size : cover : 빈공간 없이 배경으로 꽉 채우기
• backround-size : contain : 여백이 남아도 좋으니깐 배경이 짤리지 않게 꽉 채우기
• background-attachement : fixed : 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶을 때
• 폴더 위치 : ../ 상위폴더 이동하라는 뜻
• background-repeat : no-repeat;
• 배경 두개 겹치기 : url() , url ()
• backround-position : center : 배경위치 조정가능 가운데, 오른쪽, 왼쪽

🐥 배경에 검은색 틴트 주기

• linear-gradient : 색이 점전적으로 변하는 gradient를 줄 수 있는 키워드로 투명도 0.5의 검은색을 입힌 후에 배경 겹치기 스킬을 적용
• filter : brigthtness(..%) - 박스에 보정입히기 (인스타그램처럼 필터 입히기)

🐥 주의해야할 margin 버그

• div 박스 안에 p 태그 상단 margin을 주기 위해 margin-top 주면 div와 p 가 margin-top 생김
  => margin collapse effect 부르는 일종 버그!!!!!
  1) 마진을 하나로 합쳐주고
  2) 혹여나 둘 다 마진이 있으면 둘 중 더 큰 마진을 하나만 적용!!
  3) 싫으면 테두리 안 붙게 하시는거 추천.
  4) 위에 박스에 다가 마진 주고, padding 줄 것을.

🐥 Default breakpoints (MUI)

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

🐣 회고

기본강의 듣고 한 두시간 짬을 내어 로그인 및 회원가입 기능 구현 하고 있다.
아직 헷갈리고 응용이 안되지만, 자꾸 하다보면 익힐 거라고 생각이 든다..
멀고도 먼 개발자의 길~~ 오늘도 내일도 달리자...