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 클래스는 풀 따옴표 또는 문서 아이콘에 사용됩니다. 애니메이션..

CSS 단위 부모나 기타 요소들에 영향을 받지 않고 항상 일정한 크기를 유지하는 단위이다. % : 기본크기에 대한 비율 em : 글꼴 높이의 배수 ex : 소문자 높이의 배수 px : 픽셀 단위를 생략할 때의 디폴트이다. pt : 포인트 pc : 파이카(12포인트와 같음) in : 인치 cm : 센티미터 mm : 밀리미터 CSS 색상 색상값을 표현하는 여러가지 색상 모델을 지원한다. #RRGGBB : 빨강, 초록, 파랑의 강도를 16진수 두 자리로 지정한다. 각 요소별로 256단계를 표현할 수 있으며 총 1600만 가지 색을 사용할 수 있다. #RGB : 빨강, 초록, 파랑의 16진수 한자리로 지정한다. 색상 요소별로 16단계밖에 강도를 지정할 수 없어 잘 사용되지 않는다. rgb(r, g, b) : 빨..