<프론트엔드 웹 개발의 모든 것 초격차 패키지 Online> 수강 중...
~오버워치 캐릭터 선택 예제 클론 코딩 중 속성 메모~
block 요소에 width 가 있는 경우, margin에 auto를 주면 가운데로 자리 잡는다.
transform: skewX(-14deg) -14도 만큼 (우측으로) 기울이게 함.
box-sizing: border-box => 보더나 패딩이 들어가도 요소의 px를 정확히 지키고 싶을때!
transform: skew, scale 등. 기울이고 확대하고. x,y축 이동시키고...
z-index: transform 효과 적용시 다른 요소에 가려지지 않게 우선순위 1로 준다.
transition: 움직임을 자연스럽게 만들어줌. 기본값은 all. 특정 요소 선택 가능.
background-image: 크기를 지정해줘야 이미지가 나옴. 100%를 준다면 부모 요소 크기만큼!
overflow: hidden => 넘치는 영역을 자르겠다.
background-position: center => 이미지를 정 가운데로 배치하겠다.
background-size: 배경 이미지 크기 조정. cover: 늘려서 채운다 (더 넓은 너비에 맞게 이미지 맞춰줌)
background-attachment: fixed => 베경의 스크롤 특성을 명시. 스크롤 내려도 고정!
클론 코딩한거 git에 올리면 여기 추가하기.
강사님이 올린 데모 사이트
https://practical-bartik-a2000a.netlify.app/
기록은 기억이 된다