우당탕탕 코딩생활

css css 부분입니다. 주의깊게 살펴볼 부분은 .mouse__cursor부분입니다. background image로 이미지를 넣고 background attachment로 고정을 시켜줍니다. attachment라는 속성은 주로 웹 페이지에서 배경 이미지가 스크롤되는 방식을 제어하는 데 사용됩니다. 사용하는 방법은 두 가지로 나뉘게 됩니다. scroll : 배경 이미지가 요소와 함께 스크롤됩니다. 웹 페이지를 스크롤할 때 배경 이미지도 같이 스크롤됩니다. fixed : 배경 이미지가 요소에 고정되어 있으며 스크롤되지 않습니다. 웹 페이지를 스크롤할 때 배경 이미지는 고정된 위치에 유지됩니다. 여기서는 fixed방식이 사용되었고 배경 이미지가 고정되어 있기 때문에 조명효과처럼 보이게 됩니다. script..

CSS CSS 부분입니다. .mouse__wrap의 cursor: none; 은 효과를 강조하기 위하여 마우스 커서를 가렸습니다. .mouse__text는 화면의 가운데에 오는 글귀입니다. display : flex; : 부모 요소를 flex container로 지정합니다. 자식 요소(flex item)들에게 속성을 지정 할 수 있습니다. align-itmes : center; justify-content : center;: flex container 의 모든 flex item들을 세로로 가운데로 정렬합니다. flex-direction: column; flex container의 주 축(main axis)을 세로 방향(column)으로 설정합니다. overflow: hidden; 부모 요소의 내용이 넘칠..

간단한 마우스 효과 style 부분 HTML style mouse__wrap에는 cursor:none을 적용하여 마우스 커서를 가립니다. position: absolute로 위치를 고정합니다. left, top, width, height 속성을 통해 크기와 위치를 설정합니다. border-radius 속성으로 둥근 모양을 만들어주고 border 속성으로 테두리를 설정합니다. background-color 속성으로 배경 색상과 투명도를 설정합니다. user-select: none;과 pointer-events: none; 속성으로 마우스 이벤트를 무시합니다. transition 속성으로 변화하는 스타일의 전환효과를 설정합니다. mouse__cusor의 s1 s2 s3 s4 s5 s6는 각 마우스 커서의 상..