728x90 반응형 분류 전체보기298 [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. [CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지) white-space: normal; 기본값, 공백, 줄바꿈, 연속되는 여러개의 공백을 모두 하나의 공백으로 처리합니다. 또한 크기에 맞게 자동 줄바꿈 됩니다. white-space: nowrap; normal과 같은 처리를 하지만, 자동 줄바꿈 되지 않습니다. white-space: pre; pre 태그처럼 줄바꿈 공백 연속공백이 그대로 보존된다. 그러나 줄바꿈한 곳에서만 줄바꿈이 일어나고 자동줄바꿈 되지 않는다. white-space: pre-wrap; 줄바꿈 공백 연속공백이 보존되면서 크기에 따라 자동줄바꿈이 일어난다. white-space: pre-line; 연속된 공백은 하나의 공백으로 처리하고, 줄바꿈은 보존된다. 또한 크기에 맞게 자동 줄바꿈된다. See the Pen white-space .. 2019. 4. 18. 이전 1 ··· 62 63 64 65 66 67 68 ··· 75 다음 728x90 반응형