프론트엔드 공부/html css (17) 썸네일형 리스트형 7가지 css 단위 em/ rem/ inch/ vw /vmin /vmax /ch **참고 : https://www.codingfactory.net/10748 1.em 상위요소 기준의 font-size 값 ex) dif{font-size:16px;} div{ font-size:1.5em /*24px*/; padding: 2em /*32px*/ } 2.rem(root em) html 기준으로 font-size를 정의 em과 헷갈리지 않도록 주의 rem은 그리드시스템이나 보다 정확한 사이즈나 크기 조정을 위해 사용 html { font-size: 16px; } body { font-size: 2em; } /*32px*/ div.container { font-size: 2em; } /*64px*/ div.content1 { font-size: 2rem; } /*32px*/ div.conte.. css 애니메이션 : 타이핑 텍스트효과(sprite animation,steps) codepen.io/fangmin/pen/gOmaxzw animation 의 steps 를 활용한 타이핑 텍스트 효과입니다. 하단 mozilla site 참고하였습니다. CSS TYPING ANIMATION ... codepen.io developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function animation-timing-function - CSS: Cascading Style Sheets | MDN The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle. developer.mozilla.org css animation fill-mode(애니메이션상태조정) none: 애니메이션이 끝난 후 상태를 설정하지x forwards: 애니메이션이 끝난 후 그 지점 그대로 backwards: 애니메이션 끝난 후 시작점으로 돌아옴. both: 애니메이션의 앞 뒤 결과를 조합 inherit: 애니메이션 상태를 상위 요소에서 상속 svg dash-array와 stroke 활용하여 움직이는 글자 만들기 codepen.io/fangmin/pen/GRWKevq codepen.io/fangmin/pen/ZEezZQd svg 를 활용한 글자곡선 만들기 : 그래픽, 마스크 , 그래디언트 등의 요소들을 담아두는 태그 참조할 태그를 태그로 감싸준 후 id값 설정 > 하단에 참조할 태그의 위치를 잡아주고 path를 연결해줄 태그를 내부에 위치시킴 >에 앞서 설정한 태그의 id 값 설정 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, natus obcaecati maxime volt numquam! Reprehenderit suscipit quam aliquam harum! body{ margin:0; padding:0; box-sizing:border-box; } .svg{ position:absolute; width:100%; height:100%; background:#ccc; } t.. overflow:hidden 이외에 iframe scroll 없애는 방법 ! 다음과 같이 scrolling ="no" 옵션을 설정해주면 됩니다 ! 추후 iframe 스크롤 문제가 추가되면 수정하겠습니다:) css rotate , transform-origin으로 중심축 잡기 라인을 원의 중심축 기준으로 시계모양으로 돌리는 css 구문입니다. animation 속성에 일정시간 반복되는 linear, infinite(무한)을 추가하고 keyframe값으로 초기값 0% ~ 100% 각도를 360deg로 설정해주면 완성 :) ! .sec1 .circle .line { position: absolute; top: 51%; left: 75%; width: 27.775vh; height: 1px; background: #fff; animation:rot 3s linear infinite; transform-origin:bottom left; } @keyframes rot{ 0%{ transform: translate(-50%, -50%) rotate(0deg); } 100%{ trans.. css grid 반응형 예제 grid 사용방법 .content_inner{ width:90%; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr;/*자연스럽게 500이하의 css 값이됨*/ grid-template-rows:auto; grid-gap:20px; } /*500이상일때는 2등분*/ @media screen and (min-width:500px){ .content_inner{ grid-template-columns:1fr 1fr; } .desc.first{ /*500이상일때 첫번째 아이템이 첫번째 컬럼부터 세번째 컬럼까지(2칸)사용*/ grid-column:1/3; } } /*800이상일때는 4등분*/ @media screen and (min.. 이전 1 2 3 다음
