728x90 반응형 CSS127 [CSS3] background - 배경이미지가 고정되거나 스크롤과 같이 움직이도록 만들기 background-attachment 를 이용해 배경화면이 스크롤에따라 어떻게 반응할 것인지 지정합니다. background-attachment:scroll; 배경이 들어가는 영역의 컨텐츠를 스크롤하면 배경이미지는 움직이지 않습니다. 상위영역이 스크롤이 되어 영역이 움직이더라도 배경이미지는 그대로 입니다. background-attachment:fixed; 배경이 들어가는 영역의 컨텐츠가 스크롤 되더라도 배경이미지는 고정되어있습니다. 상위영역이 스크롤되어 영역이 움직이면 해당위치의 이미지가 들어납니다. scroll값과 다른점은 scroll값은 배경이 들어가는 영역에 고정되어있지만 fixed는 이미지 자체가 고정됩니다. 영역이 스크롤 되어 위쪽으로 밀리면 배경이미지는 그대로고 영역만 움직이기 때문에 보여.. 2019. 4. 19. [CSS3] 그라디언트 linear-gradient 를 이용해 선형으로 그라디언트를 나타낼수 있습니다. 기본으로 위에서 아래 방향의 그라디언트가 생성됩니다. to left 를 통해 오른쪽에서 왼쪽방향으로 향하는 그라디언트를 생성하거나 45deg등 값을 통해 45도 틀어진 방향으로 향하는 그라디언트를 생성할 수 있습니다. radial-gradient 는 원형 그라디언트로 가운데부터 바깥쪽으로 향하는 그라디언트가 생성됩니다. 그라디언트 시작 중심이 at top left 등의 값으로 그라디언트 중심의 위치를 설정할 수있습니다. See the Pen KYRVBa by gahyun (@gahyun) on CodePen. 2019. 4. 19. [CSS3] 그림자 - box-shadow을 이용해 그림자 또는 glowing 효과 만들기 어두운색으로 설정시 그림자가 생기고 밝은색설정시 빛이나는것과 같은 효과를 줄 수 있다. See the Pen box-shadow by gahyun (@gahyun) on CodePen. 2019. 4. 19. [CSS3] transform(rotate, translate, scale 등등..)의 기준점 변경하기 css의 transform을 이용해 다양한 효과나 애니메이션을 구현합니다. scale, rotate, skew 등등 transform을 이용해 모양을 변형시킬 때 기준이되는 기준점을 지정해 줄 수 있는 속성이 transform-origin입니다. center, top left , bottom right 등을 이용해 지정할 수도 있고, px을 이용해 원하는 위치를 지정할 수 있습니다. See the Pen OGvXGY by gahyun (@gahyun) on CodePen. 2019. 4. 19. 이전 1 ··· 25 26 27 28 29 30 31 32 다음 728x90 반응형