차근차근 읽고 공부하기 (이 포스팅은 공부를 위해 원문사이트를 정리한 것 입니다.) 원문 사이트 : 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(); // 현재 스크롤 값 ..
IR (Image Replacement) 기법 "의미가 포함되어 있는 이미지"를 배경으로 처리하고 전경에 상응하는 텍스트를 넣는 방법. "접근성을 떨어트리지 않고" 검색엔진으로부터 높은 가중치를 받을 수 있다. 의미가 포함된 이미지는 전경으로 처리한다. IS (Image Sprite) 기법 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement)기법을 함께 사용해야 함. *좋아요와 댓글은 힘이 됩니다.
px, em, rem을 넘어서서 요새 많이 쓰이는 단위를 정리해보겠습니다. 사용함에 있어서 굉장히 편리하고! 게다가 IE9부터 지원을 하기 때문에 앞으로의 쓰임이 더욱 기대되는 단위입니다. 1. vw, vh width:100vw; height:100vh; width 에는 vw를 height에는 vh 를 사용하는데. 이부분은 반응형웹과 같은 곳에서 쓰일수록 더욱 편리함이 높아집니다. 이 단위는 요소의 뷰포트값의 100분의 1을 하는 값을 뜻합니다. 즉 값에 해당하는 숫자는 1부터 100이 됩니다. (1vh - 100vh) 가령 브라우저의 전체 넓이가 1000px이 된다면 1vh 는 10px이 되는 것을 뜻합니다. 위의 단위를 쓴 저의 구체적 사례로는, 브라우저의 전체화면에 풀 이미지를 넣어야하는 경우였..
제목 그대로, 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를..
css상으로 만드는 말줄임표는 한줄까진 다양한 브라우저에서 사용가능하나, 멀티라인, 즉 두줄 이상의 글에서는 사용할 수가 없다. 그러나, webkit 엔진을 쓰는 브라우저(크롬, 모바일 사파리 등)는 멀티라인 말줄임이 가능하다. display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; // 2줄 이상이 될때 말줄임표 등장. 여기서 문제는 모바일에선 큰 문제가 없을 듯 하나, pc 크로스브라우징의 경우 어찌해야하나 이다. 그럴경우 상호간 합의(기획과 퍼블..?)에 의해 2줄이상에서 보여지지 않는정도로 합의를 본다면 아래 폴백 css로 대체할 수 있다. height..
- Total
- Today
- Yesterday
- css3
- 수영전후기
- jQuery
- 퍼블리셔
- 이론공부
- 포세이돈되기까지
- ES5
- Issue
- javascript
- Aria
- 웹접근성
- curring
- 퍼블리싱
- js
- 웹퍼블리셔
- WAI-ARIA
- API
- 웹퍼블리싱
- 환경설정
- props
- vue
- 리액트생명주기
- jeonst
- frontend
- 수영하기전후기
- component
- youtube
- 커리패턴
- vue.js
- 자바스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |