본문 바로가기
반응형

분류 전체보기126

계산기 만들기 기본적인 계산기를 만들었습니다. 계산기 caption { font-size: 32px; } table { width: 320px; border-collapse: collapse; } table, th { background: #333; } th { padding: 0 10px 0 0; height: 80px; } td { padding: 0; height: 75px; border: 1px solid #333; text-align: center; } th>input { padding: 0; width: 100%; border: none; background: #333; color: #fff; text-align: right; font-size: 48px; } td>input[type='button'] { .. 2019. 10. 2.
TweenMax 텍스트 애니메이션 TweenMax로 텍스트가 순차적으로 보이는 애니메이션을 만들었습니다. 한글자씩 제어하기 위해 lettering.js 도 같이 사용했습니다. Hello, Tweenmax Splittext animation test! #wrap { max-width: 300px; } #cont { font-size: 30px; font-weight: bold; color: #333; } #cont .txt { display: block; float: left; } #cont .txt1 { color:#6271fd; } #cont .txt2 { color:#8b72fa; } #cont .txt3 { color:#121280; } #cont .txt span { display: block; float: left; positi.. 2019. 10. 2.
서버 사이드 렌더링, 클라이언트 사이드 렌더링 모바일의 시대가 도래하면서, 모바일 환경에 맞춰진 웹페이지 즉 모바일 웹에 대한 니즈가 폭발적으로 증가했고 그에 따른 성능 이슈도 함께 거론되었다. 데스크탑에 비해 성능이 낮은 모바일, 스마트폰을 통해 웹페이지를 출력하기 위해서는 기존에 있었던 방식과는 다른 접근이 필요했고 그에 따라서 Single Page web Application 기법(SPA)이 등장했다. SPA는 브라우저에서 로드되고 난 뒤에 페이지 전체를 서버에서 요청하는 것이 아니라 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. 전통적인 웹 방식(서버 사이드 렌더링)은 이 SPA 방식에 비해 성능 문제를 보였다. 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리.. 2019. 9. 29.
익스에서 scale 떨림 ie에서 scale효과가 떨려보이는 걸 rotate로 개선한 방법입니다. .bg { padding-top: 56.25%; background: url('https://picsum.photos/300/300') no-repeat 0 0 / cover; transform: scale(.9); transition: all .2s; } .before { width: 300px; } .before:hover .bg { transform: scale(1.1); transition: all 2s; } .after { width: 300px; } .after:hover .bg { transform: scale(1.1) rotate(.001deg); transition: all 2s; } jsfiddle에서 보기 htt.. 2019. 9. 29.
flex를 이용한 반응형 레이아웃 display: flex 를 이용한 레이아웃입니다. Header Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aside 1 Aside 2 Footer .wrapper { display: flex; flex-flow: row wrap; font-weight: .. 2019. 9. 29.
TweenMax 눈내리는 효과 트윈맥스를 사용하여 눈내리는거 같은 효과를 만들어봤습니다. * { margin:0; padding:0; box-sizing:border-box; } section { position:relative; background:#333; height:500px; overflow:hidden; } .circle { position:absolute; width:8px; height:8px; border-radius:50%; } .circle1 { background:green; } .circle2 { background:snow; } .circle3 { background:salmon; } $(function(){ var $win = $(window), $section = $('section'), $hei = $s.. 2019. 9. 28.
반응형

티스토리툴바