웹퍼블리싱17 숫자 카운팅 모션 (정한 숫자와 시간에 맞게 올라가는 모션) 가끔 UI 작업을 하다보면 정해져있는 숫자만큼 0부터 숫자를 올리고 싶을 때가 있는데 이때를 위해 만들어둔 함수이다. function numberCount(element, num, time) { var element = $(element), maxNumber = Number(num), startNumber = 0, spd = time; element.animate({val : maxNumber}, { duration: spd, step: function() { var currentNum = parseInt(this.val); element.text(currentNum); }, complete : function() { var completeNum = parseInt(this.val); element.te.. 2021. 7. 5. 페럴렉스 스크롤링(Parallax Scrolling) 차근차근 읽고 공부하기 (이 포스팅은 공부를 위해 원문사이트를 정리한 것 입니다.) 원문 사이트 : https://dev.classmethod.jp/articles/html5-x-css3-x-jquery-6-parallax/ 페럴렉스(Parallax)란? 영어 단어 그대로 "시차" 를 뜻한다. 시차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것. UX-UI 적인 말이 많지만, 개인적인 소견으로는 UX적으로 짧은시간 가장 큰 효과를 주는 UI 인 것 같다. 1. JavaScript - jQuery 에서 페럴렉스 효과 첫번째 단계. 가장 기본이 되는 함수 알기 $(window).scroll(function(){}) var value = $(this).scrollTop(); // 현재 스크롤 값 .. 2021. 6. 30. IR(Image Replacement) 기법 & IS(Image Sprite) 기법 IR (Image Replacement) 기법 "의미가 포함되어 있는 이미지"를 배경으로 처리하고 전경에 상응하는 텍스트를 넣는 방법. "접근성을 떨어트리지 않고" 검색엔진으로부터 높은 가중치를 받을 수 있다. 의미가 포함된 이미지는 전경으로 처리한다. IS (Image Sprite) 기법 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement)기법을 함께 사용해야 함. *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. IOS 에서의 스크롤링 CSS 아이폰 사파리의 경우, webkit 엔진을 쓰기 때문에 스크롤시 webkit css를 하나 더 추가 해주어야 한다. -webkit-overflow-scrolling:touch; 이렇게 해야 스크롤이 자연스럽게 내려갈 수 있다. 아니면 모바일에서 뚝뚝 끊어진다. *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. 스크롤시 background 고정 스크롤시 백그라운드의 위치를 고정하고자 할때, background-attachment : fixed /* 기본값은 inherit 이다.*/ *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. 안드로이드 모바일 자동 조절 폰트 ios와 안드로이드 동시 작업 중, ios에서는 정상적으로 폰트가 출력되는데 안드로이드에서 자동조절되서 폰트가 크게 나오는 경우. * {-webkit-text-size-adjust:none;} *update 저 속성을 썼는데도 안먹어서 해당 부분에 고정 height를 줬더니 제대로 잡힌다. *댓글과 좋아요는 힘이 됩니다. 2021. 6. 30. 요새 많이 쓰이는 단위 정리 (vh/vw/calc) px, em, rem을 넘어서서 요새 많이 쓰이는 단위를 정리해보겠습니다. 사용함에 있어서 굉장히 편리하고! 게다가 IE9부터 지원을 하기 때문에 앞으로의 쓰임이 더욱 기대되는 단위입니다. 1. vw, vh width:100vw; height:100vh; width 에는 vw를 height에는 vh 를 사용하는데. 이부분은 반응형웹과 같은 곳에서 쓰일수록 더욱 편리함이 높아집니다. 이 단위는 요소의 뷰포트값의 100분의 1을 하는 값을 뜻합니다. 즉 값에 해당하는 숫자는 1부터 100이 됩니다. (1vh - 100vh) 가령 브라우저의 전체 넓이가 1000px이 된다면 1vh 는 10px이 되는 것을 뜻합니다. 위의 단위를 쓴 저의 구체적 사례로는, 브라우저의 전체화면에 풀 이미지를 넣어야하는 경우였.. 2021. 6. 30. css만으로 탭 구성 하기 제목 그대로, css만으로 탭 구성하기에 대해서 포스팅을 해봅니다. 아래와 같은 형태로 만들 예정인데 이는 css3의 선택자로 하여금 간단하게 css만으로 만들 수가 있습니다. 하지만 ie 8,7 과 같은 하위 버전의 브라우저에서는 css3가 안된다는 것을 알고 계시기 바랍니다. 방법은 두가지로 나뉠 수 있습니다. 기본적으로 아래의 html을 가지고 작업을 하도록 하겠습니다. 제목 제목 제목 제목 1. flex를 이용한 탭 구성 첫 번째로는 flex를 이용한 탭 구성입니다. .tab {display:-ms-flexbox; display:flex;} .tab li {-ms-flex:1; -webkit-flex:1; -moz-flex:1;} .tab li+li {margin-left:10px} 해당 css를.. 2021. 6. 30. 멀티라인 말줄임과 폴백(fallback) CSS css상으로 만드는 말줄임표는 한줄까진 다양한 브라우저에서 사용가능하나, 멀티라인, 즉 두줄 이상의 글에서는 사용할 수가 없다. 그러나, webkit 엔진을 쓰는 브라우저(크롬, 모바일 사파리 등)는 멀티라인 말줄임이 가능하다. display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; // 2줄 이상이 될때 말줄임표 등장. 여기서 문제는 모바일에선 큰 문제가 없을 듯 하나, pc 크로스브라우징의 경우 어찌해야하나 이다. 그럴경우 상호간 합의(기획과 퍼블..?)에 의해 2줄이상에서 보여지지 않는정도로 합의를 본다면 아래 폴백 css로 대체할 수 있다. height.. 2021. 6. 30. 이전 1 2 다음
