디자인 학습 일기

0001

Header, Footer, Contents 채팅 중 발생한 문제

콘텐츠의 max-height:500px를overflow scroll로 설정한 후 이동 중 Scroll이 움직이지 않습니다.

솔루션: JS에 이벤트리스트 설치, 재제작

// with mobile just add listener to 'touchmove' and also
// think about using 'touchstart'

document.getElement.addEventListener('mousewheel', function(e){
    var event = e.originalEvent,
    d = event.wheelDelta || -event.detail;
    // this.scrollTop += -d / 10;
    this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
})

모바일 브라우저 키보드로 조작

disable keyboard show up


<input readonly='true'></input>

Number input only


<input pattern='\d*'>

이니셜 작업

:first-letter 등 속성이 존재

우리를 위해 만든 예쁜 샘플Drop Caps

0002

미디어 사용

@media screen and ( condition ){}

e.g
@media screen and (min-width: 992px){}
widthが992より大きい時に適用できるルール
max-width: 992pxだと逆

PDF.js

사용 이유

페이지 변환 없음, Redirection 없음

- 이동 중에도 PDF를 읽고 읽을 수 있음

문제점

중단 또는 메모리 부족으로 드랍

Canvas 사용 시

크롬에서 줌인이 안 되는 이유가 불분명하고, 사파리면 OK

JS vs CSS

CSS의 향상된 미디어 제어에 의한 동적 변환

때때로 CSS에서 JS에서 생성된 규칙을 변경할 수 없음

0003

JS에 HTML 그리기

var html = '<div />'

다선

var html = ' <div class... \
        .....  \
        .....  \
        </div> \
    '

Buton에서 onclick에서 bind event

<button onclick = 'func(event)' />

0004

SEO 대책

Cannonical 태그

동일한 내용의 페이지가 여러 개 존재하면 중요성이 분산된다

<domain>.com
<domain>.com/index.*
www.<domain>.com
www.<domain>.com/index.*
#どれが重要かわからなくなるためまとめるのがcanonicalタグ

<link rel="canonical" href="http://○○○○○.com/"/>
を加える

#　httpsは.htaccessでなんとかする

UI 설계

사용하기 쉬운 프로그램 라이브러리, 플랫폼
* Semantic UI
* Slide out

0004

유형 effect

Typewriter Effect

Dots 입력 대기 중

<p class="is-inputting">Saving<span>.</span><span>.</span><span>.</span></p>

@keyframes blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}
.is-inputting{
  font-size: 40px;
  margin-bottom: 10px;
  text-align: center;
  margin: 0px;
}
.is-inputting span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.is-inputting span:nth-child(2) {
  animation-delay: .2s;
}

.is-inputting span:nth-child(3) {
  animation-delay: .4s;
}

Pure CSS saving/loading dots animation

0005

아이콘 로드 성능 향상

CSS Sprite
//간단한 설명 후 한 이미지에 사용할 이미지를 모두 모아서position을 바꾸면서 사용합니다

.class{
    background-url: url();
    background-repeat: no-repeat;
    background-size: 200%; //resize image to value if 800 * 800 -> 1600 * 1600
    background-position: 0px 0px;
}