배경

[CSS] 스크롤에 따라 움직이는 배경 이미지

코드 background-attachment: fixed; /* background-image에만 적용 */ background-attachment 속성은 background-image에 적용되며, 배경 이미지를 스크롤 시에도 고정시켜서 마치 따라오는 듯한 효과를 줄 수 있습니다. - scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성입니다. - fixed : 스크롤 시 보이는 페이지(viewport)와는 다르게 배경 이미지는 고정됩니다. 예제 코드 See the Pen CSS Background Image attachment by hyukson (@hyukson) on CodePen. 배경을 채운 디자인 요소와 그 사이에 배경 이미지로 쓰일 요소를 추가해줍니다. div { width:..

[JS] 밤하늘의 별 배경 만들기

여름이 시작되기도 하고 별이 가득한 밤하늘을 웹으로 나마 보고 싶어 제작해보았습니다. JavaScript로는 오로지 별을 랜덤 한 위치에 배치시키는 작업만 해주고, 스타일은 CSS 코드로 작성하였습니다. See the Pen stars Background by hyukson (@hyukson) on CodePen. 코드 HTML 태그 구성으로는 밤하늘 배경을 만들 부모 태그와 별들을 감쌀 태그를 만들어줍니다. 저는 Circle 태그를 사용하기 위해서 SVG를 사용하였습니다. (position 속성을 이용하여 div로도 가능) /* 배경 */ .backSky { width: 100vw; height: 100vh; position: relative; background: linear-gradient(to r..