drexqqa 이성희

Animation animation: {name} {duration} {timing-function} {delay} {iteration} {direction} {fill-mode} {play-state} Property Description animation-name @keyframes에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-iteration 애니메이션이 반복되는 횟수를 설정합니다. animation-direction 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션이 시간되기 전이나 끝나고 어떤 값을 적용할 ..

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) ..

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 밝기를/ 통해 색상을 ..

Background Reference Property Sample Description background background : #000 url(background.gif) no-repeat top center 배경 속성 단축형 background-image background-image : url(이미지 경로) 배경 이미지 설정 background-attachment background-attachment : fixed 배경 고정 여부 설정 background-color background-color : #fff 배경색 설정 background-position background-position : top 배경 이미지 위치 설정 background-origin background-origin : co..

Border-Radius Reference 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 .border01 {border-radius: 0;} .border02 {border-radius: 5px;} .border03 {border-radius: 10px;} .border04 {border-radius: 15px;} .border05 {border-radius: 20px;}..

Box-Shadow Reference 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: ..

Git Hub / GitHub Desktop 오픈 소스와 비공개 프로젝트를 위한 강력한 협업, 코드 분석, 그리고 코드 관리. 공개 프로젝트는 항상 무료입니다. 월 7$면 비공개 프로젝트를 제한 없이 생성할 수 있습니다. 사용법 Git Hub 사이트와 GitHub Desktop에 로그인을 합니다. New repository를 클릭해 새로운 저장소를 만들어줍니다. Creat repository를 눌러줍니다. Git Hub 사이트에 들어가서 Set up in Desktop을 누른뒤에 GitHub Desktop에서 열어줍니다. Clone을 클릭하면 GitHub Desktop에 이런 화면이 나타난다면 성공 GitHub -> 폴더에 들어가면 자신이 정한 저장소이름의 폴더가 있을겁니다 그 폴더에 자신이 코딩한 파일..

Fontawesome(폰트어썸) 가장 유명한 대표적인 아이콘폰트 제공 사이트 FontAwesome 바로가기 설치법 CDN을 통해서 설치하는 방법 CDN설치는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용 웹사이트의 태그영역 안에 아래의 코드를 삽입합니다. 아이콘 폰트를 다운로드받아서 설치하는 방법 다운로드하여 약간의 커스터마이징을 하거나 오프라인상태에서도 사용하기 위해서는 아이콘 폰트를 다운로드 받아서 설치 해당 URL에서 DOWNLOAD 버튼을 클릭합니다. 팝업창에서 가장 아래에 있는 No thanks, just download Font Awesome 4를 클릭 다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장 웹사이트의 태그영역 안에 font-awesome.min.css 파일 위치를 아래와..