본문 바로가기
SMALL

프론트엔드 개발자/CSS40

Html Css 애니메이션 사용하기 움직이는 동작법 완벽정리!!! // css keyframe rule key + frame css keyframe사용하기 1)ketframe rule 정의하기 - 애니메이션정의 @ketframes 애니메이션이름 { } 2)키프레임 정의하기 애니메이션 패턴을 작성 - % 0 ~ 100% 범위안에서 작성 - from, to을 이용하여 작성 @keyframe 애니메이션이름 { 0% { width:100px; } 50% { width:100px; } 100% { width:100px; } } 3) 선택자에서 정의한 애니메이션이름을 호출 애니메이션을 적용하고 싶은 요소에서 애니를 호출 animation-name : 애니메이션이름 animation-duration: 애니메이션 지속시간 animation-iteration-count: 반복횟수 무한.. 2023. 3. 31.
css reset폴더 만들기 @charset 'UTF-8'; /* 여백초기화 */ html, body , h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, table, tr, td, th, caption, div, span, form, fieldset, legend, input, select, textarea, button, img, a, header, main, footer, nav, section, article { margin:0; padding:0; } /* 리스트타입 초기화 */ ol, li { list-style: none; } /* 이미지, 필드셋 테두리 제거 */ fieldset, img { border:0 none; } /* 타이포 설정 */ body, h1, h2, h3, .. 2023. 3. 29.
클론코딩 레이아웃 만들기3 기업뱅킹 조회 조회 조회 조회 조회 부가서비스 부가서비스 부가서비스 부가서비스 부가서비스 인.. 2023. 3. 29.
html css 레이아웃 구성하기 1 HTML 삽입 미리보기할 수 없는 소스 @charset 'UTF-8'; /* main layout */ .nps-wrapper { width: 100%; } /* header */ .h-wrap .h-top { border-bottom: 1px solid #e8e8e8; } .h-wrap .h-top .h-inner { width: 1220px; height: 88px; margin: 0 auto; background-color: #fc0; } .h-wrap .h-bottom { height: 59px; border-bottom: 1px solid #e8e8e8; } .h-wrap .h-bottom .gnb-inner { width: 1220px; height: 58px; margin: 0 auto; b.. 2023. 3. 28.
LIST