jeongah story 알고 싶은 코드가 있으시면,
게시글 아무대나 댓글주세요!

Border-Radius border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius border01 border02 border03 border04 border05 border06 border07 border08 border09 border10 .block {width: 140px; height: 140px; margin: 40px; text-align: center; line-height: 140px; color: #fff; float: left;} .block > div {transition: all 0.3s ease-in-out} .block..

Transform 변환은 엘리먼트의 좌표를 조작하여 위치나 크기, 회적 각도 등을 변경하는 기법입니다. 변환함수는 이동(translate), 확대(scale), 회전(rotate), 기울이기(skew) 등의 주용 4가지 함수와 행렬변환, 원근변환이 있습니다. 이동(translate) 확대(scale) 회전(rotate) 기울이기(skew) 2d변환 translate(x,y) scale(x,y) rotate(angle) skew(x-angle,y-angle) 3d변환 translate3d(x,y,z) scale3d(x,y,z) rotate3d(ax,y,z,angle) x축 변환 translateX(x) scaleX(x) rotateX(angle) skewX(angle) y축 변환 translateY(y) ..

Blend Efect Background-blend-mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity ..

Animation Sample Animation - Bar See the Pen Animation-bar by jeongahlee (@jeongahlee) on CodePen. Animation - Loading Circle 1 See the Pen Animation-Circle by jeongahlee (@jeongahlee) on CodePen. Animation - Loading Circle 2 See the Pen Animation - Circle Loading by jeongahlee (@jeongahlee) on CodePen. image 출처 : https://cdn.dribbble.com/users/46302/screenshots/4208056/cover.png

Animation animation : {name} {duration} {timing-fuction} {delay} {iteraction} {direction} {fill-mode} {play-state} Property Description animation-name @keyframes에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-fuction 애니메이션이 키프레임 움직임을 설정합니다. animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 설정합니다. animation-iteraction 애니메이션 반복 횟수를 설정합니다. animation-direction 애니메이션 방향을 설정합니다...

Box-Shadow box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; Property Description h-shadow 그림자의 수평(X)축 거리를 나타냅니다. v-shadow 그림자의 수직(Y)축 거리를 나타냅니다. blur 그림자의 흐림정도를 나타냅니다. spread 그림자의 거리를 나타냅니다. color 그림자의 색을 나타냅니다. inset 그림자의 효과를 내부로 나타냅니다. Box-shadow shadow01 shadow02 shadow03 shadow04 shadow05 shadow06 shadow07 shadow08 shadow09 shadow10 .shadow01 {box-shadow: 0px 0px 5p..

Font Awesome Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. 인라인 요소와 함께 사용하도록 설계되었습니다. the ⁢i>및 ⁢span> 요소는 아이콘에 널리 사용됩니다. 큰 아이콘 : fa-lg(33 % 증가), fa-2x, fa-3x, fa-4x또는 fa-5x클래스 아이콘들이 컨테이너 상대적인 크기 증가 시키는데 사용된다. 목록 아이콘 : fa-ul및 fa-li클래스는 정렬되지 않은 목록에 기본 총알을 대체하는 데 사용됩니다. 경계가 있고 당겨진 아이콘 : fa-border, fa-pull-right또는 fa-pull-left 클래스는 풀 따옴표 또는 문서 아이콘에 사용됩니다. 애니메이션..

파비콘 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫습니다. 파비콘(favicon) 실전 정리 적어도 아래의 ICO 파일은 준비합니다./p> 크기 파일명 용도 16x16 & 32x32 favicon.ico IE를 위해 필요한 기본입니다. 조금 느려지더라도 iOS와 Android를 고려하겠다면 아래와 같은 PNG 파일을 준비합니다. 크기 파일명 용도 152x152 favicon-152.png 일반적으로 iOS와 Android에서 사용하는 아이콘, 기기에 따라 자동으로 크기가 줄여집니다. 좀 더 완벽한 파비콘을 설정하기 원한다면 아래의 표를 참고하여 PNG 파일을 준비하도록 합니다. 크기 파일명 용도 32x32 favicon-32.png 일부 오래된 하지만 너무 오래된 Chrome은 ICO를 제대..