CSS를 사용해서 중앙정렬을 하려면 여러 팁들이 있습니다. 

제가 사용하는 방법은 크게 두 가지 입니다. 

1. 고정된 width, height 값을 가지는 element 의 정렬. 
2. 가변폭을 가지는 element 의 정렬. 

1번의 경우는 아주 쉽습니다. 

.element{ 
  width: 100px; 
  height: 100px; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  margin-left: -50px; 
  margin-top: -50px; 


쉽게 이해되시죠? 
마이너스 마진값을 가지고, 결국 자신의 폭의 절반을 빼주는 겁니다. 
이렇게 하면, 언제나 화면 중앙에 요소배치가 가능합니다. 

2번의 경우는 좀 더 복잡합니다. 마컵이 여러 단계로 필요한데요. 

<!-- HTML MARKUP --> 
<div class="to_this"> 
  <div> 
      <div> 
        <div class="align_me"></div> 
      </div> 
  </div> 
</div> 

무려 네 단계의 마컵을 거칩니다. 

CSS 를 less.css 기준으로 보여드리면 이렇습니다. (이해하기 쉬우시라고) 

.to_this{ 
  position:absolute; 
  top:0; left:0; bottom:0; right:0; 
  z-index:10; 
  >div{      
      display:table; 
      width:100%; 
      height:100%; 
      >div{ 
          display:table-cell; 
          vertical-align: middle;          
          .align_me{          
          padding:10px; 
          } 
      } 
  } 


1) 결국 window 를 기준하려면 기준점이 필요하기 때문에, div.to_this 가 절대포지셔닝으로 전체화면을 채웁니다. 
2) 그 바로밑의 div 는 table 역할을 해야하기 때문에 역시 전체화면을 꽉 채우는 table 로서의 역할 
3) 그 바로 아래가 table-cell 로서 중앙정렬자 역할을 해주고요. 
4) 마지막 div.align_me 가 가변폭을 가지는 그 무엇이 될 수 있습니다. 


쉽게말해, table / table-cell 관계를 가지고 중앙정렬을 하는 것인데, 늘 화면 중앙에 두기 위해서 여러 꼼수를 쓴 겁니다. 

AND

http://css-tricks.com/myth-busting-css-animations-vs-javascript/


나도 웹 애니메이션 쓸때, javascript 로 해야할지 css animation 으로 해야할지 고민 많이 하다가, 사용하기 쉽고 퍼포먼스도 좋다길래(자동으로 gpu 쓴다길래) css animation 을 썼다.


근데 모바일 기기에서 확인해보면 아무래도 버벅이는게, 이게 과연 gpu 를 썼다 할 수 있나 의심했더랬다.


오늘 알고보니, css animation 중에서 GPU 를 사용하는 것은 opacity 랑 transform 밖에 없다고 ㅠㅠ

height, width 뭐 이런거 animation 값으로 쓰면 이건 cpu 에서 처리한다. 당연 버벅일 수밖에.


transform 으로 애니메이션 모두 바꾸고 났더니 모바일에서도 아주 부드럽게 애니메이션된다. 굿!!!


AND

보통 폰트 라이선스가 폰트 자체에 박혀있는 경우가 있다.


일러스트에서 저장하면 폰트는 같이 저장 안 된다고 하는 경우들 있다.


ttfpatch 라는 이 툴을 사용하면 ttf 파일에 박혀있는 라이선스를 변경시킬 수 있다.


http://www.derwok.de/downloads/ttfpatch/


없던 라이선스를 붙일 수도 있으니,


폰트 제작자, 디자이너들은 자신의 폰트를 보호하기 위해서도 사용 가능하다.


옵션은 아래와 같다.


0: embedding for permanent installation
1: reserved - do not use!
2: embedding restricted (not allowed!)
4: embedding for preview & printing allowed
8: embedding for editing allowed


AND

이건 뭐 case by case 이긴 한데...


export 옵션에서 progressive / upper first / lower first 를 잘 선택해야한다.


progressive 가 무조건 좋다고 생각하고 계속 밀어붙였는데, 확인해보니 lower first 가 가장 고화질이었다.



--->


다시 살펴보니, 맨 첨에 sequence 만들 때 progressive / upper first / lower first 를 셋팅한다. 이 셋팅과 같도록 해서 export 해줘야 깨끗함.

AND

http://stackoverflow.com/questions/8554043/what-is-clearfix


그동안 계속 <div class="clearfix"></div> 같은 군더더기를 모든 셀에 반복시켜서 썼는데, 역시 사람은 머리를 써야했어.

AND

내 스스로가 자꾸 잊어버려서 여기 적도록 한다.


1. node.js 를 설치한다.


2. 서버를 돌리고 싶은 폴더로 가서 두 파일을 만든다.


server.js

var connect = require('connect');

connect.createServer(

    connect.static(__dirname)

).listen(8080);


runserver.bat

node server.js


3. 해당 폴더에서 커멘드라인을 통해 connect 모듈을 설치한다.


c:\targetfolder> npm install connect


4. 이제 runserver.bat 를 돌리고 브라우저를 열어서 http://your_ip:8080/index.html 로 들어간다.

AND

낚시제목 말고 정확한 제목을 굳이 적자면
‘디더링된 그라디언트를 그대로 나인패치로 쓰지마세요’ 임.

포토샵에서는 그라디언트툴에 기본적으로 dithering 옵션이 있는데, 켜져있는 경우가 간혹 있음.

image

▲ dither 옵션이 켜져있을 때

 

이 옵션이 켜져있을 때의 그라데이션은 아래 그림의 왼쪽과 같고, 옵션이 없을때는 오른쪽과 같다.

image

쉽게 말하자면 좀 더 눈에 자연스러운 계조를 만들기 위해서 각각의 색과 색 사이를 병치혼합으로 표현하는 걸 말하는데, 특히 그라디언트 양쪽 색상의 차이가 별로 없을 경우 dithering 의 힘이 크게 나타난다.

문제는 이게 눈에 쉽게 보이지 않기 때문에, 나인패치로 따올 때 별 생각없이 따오는 경우가 많다. 하지만 dithering 된 그라데이션은 사실 확대해보면 위 그림의 왼쪽같이 되어 있으므로, 이걸 나인패치로 만들면 이상한 줄무늬가 생기게 된다. (눈이 민감한 사람에게만 ㅡ,.ㅡ)

 

image 

▲ dithering 먹은 그라데이션으로 만든 나인패치

image

▲  나인패치가 적용되었을때.

image

▲  이 나인패치를 고대비로 효과를 줘보면 뭐가 문제인지 보이기 시작…

 

사실상 왠만큼 눈으로 봐서는 모를 일이지만… 거슬리는 사람들을 위해서.

이 문제를 해결하는 방법은 1) dithering 끄고 그냥 만든 그라데이션으로 나인패치를 만들거나 2) dithering 들어간 그라데이션을 나인패치로 만들게 아니라 그냥 타일링 해버리는 것.

AND

요즘 페이스북 ‘좋아요’ 버튼을 여기저기 많이들 사용하는데, 이게 facebook 에 있는 social plugin 을 활용한 거라, 맘대로 크기조정이 잘 안 된다. 특히, 안드로이드나 iOS 모두 버튼이라면 7mm~10mm 사이의 physical dimension 을 요구하고 있는데, 실제 facebook 에서 제공하는 ‘좋아요’ 버튼은 모바일에 올려놓으면 3~4mm 수준으로 밖에 안 나오게 되는 경우가 많다.

image

 

iframe 안에 들어가 있는 놈이라 css 건드린다고 width 나 height 조절이 안 된다.

image

▲ 누르기가 좀 답답한 facebook 좋아요 버튼.

 

방법 1 – viewport 에서 target-densitydpi 조정하기 (비추)

처음엔 이 방법을 썼는데, target-densitydpi 를 low – medium – high 로 조정함에 따라, 좋아요 버튼의 크기를 크게 3가지로 조정하는 것이다. 보통 모바일웹이 medium-density 를 다들 쓰고 있으니, 더 크게 하고 싶으면 천상 low-density 를 쓰던가 initial-scale 을 조정해야 하는데, 이건 작업 픽셀과 실제 구현 픽셀이 다르게 계산되는 거다보니 건드리면 복잡해진다.

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" target-densitydpi=medium-dpi">

암튼, 별로 추천하지 않는 방법.

image image image

▲ 왼쪽부터 low-medium-high density 뷰포트에 따른 좋아요 버튼의 크기 변화.
이미 작업 다 해놓고 좋아요 버튼 하나 키우자고, 다른 것들을 죄다 조정한다? 에… 별로

 

방법 2 – CSS에서 transfrom:scale() 사용하기 (추천)

두 번째 방법은 좋아요 버튼을 감싸는 div 에 transform 을 먹여서 scale 을 불려버리는 방법이다. 이렇게 작업하면, 좋아요 버튼만 내 맘대로 키웠다 줄였다 할 수 있으니 편리하다.

.like_button{
transform: scale(2);                
-moz-transform: scale(2);        /* firefox 용 */
-webkit-transform: scale(2);     /* webkit 브라우저 */
-o-transform: scale(2);            /* opera용 */
-ms-transform: scale(2);          /* IE용 */
}

▲ 좀 큰가? 아무튼, 누르기 큼지막한 ‘좋아요’ 버튼

AND

SNIPPING.jsx


안드로이드 이미지 작업을 하다보면 반복적으로 해야하는 작업들이 있는데, 이를 좀더 편하게 해주는 스크립트를 만들어봤습니다. action 으로 만든 것을 script 로 변환해주는 action to script 를 활용하였고, (첨엔 자바로 좀 짜다가 코딩 미스가 자꾸 생겨서… ㅠㅠ) CS5, CS6 에서 제대로 작동하는 것을 확인했습니다.

이 스크립트는

1) 활성 layer 혹은 layer group 만을 트리밍해내고,
2) 이를 hdpi 용 이미지로 한벌 더 만들어주는 작업을 합니다.

 

이 때, 안드로이드 이미지 특성상, dp 단위와의 충돌을 피하기 위해서, 애매한 픽셀수의 canvas 가 되지 않도록 조정해주는 작업이 스크립트 내에 포함되어 있습니다. (이론상으로는 canvas 사이즈가 숫자 ‘4’의 배수가 되도록 조금씩 확장합니다. 자세한 내용은 이 포스트를 참조하세요.)

 

사용방법은 File > Scripts > Browse 하셔서 첨부파일을 실행하셔도 되고, 아니면SNIPPING.jsx파일을 포토샵의 작업화면으로 드래그&드랍 하셔도 바로 쓰실 수 있습니다.

 

* 참고
- canvas를 안드로이드 최적화 할 때, 이미지는 좌상단에 고정한 채로 canvas 만 늘어납니다.
- vector 로 구성된 이미지의 경우 hdpi 로 축소하고 난 다음에는 pixel 에 정확하게 fit 하지 않을 수 있습니다. 이 부분은 수동으로 움직여 주시면 되고, CS6에서는 transform 상태에서 좌우로 한픽셀씩만 왔다 갔다하면 정확하게 pixel 에 들어맞게 됩니다. (이 tip 은 나중에 따로 포스팅…하도록…)

AND

인터넷 아무리 뒤져도 이 문제에 대해 제대로 답을 주는 데가 없었다.

그러다가 어느 어느 쓰레드의 댓글 댓글에 겨우 적혀있는

‘시간대를 미국 시간대로 바꾸어 보세요’

덕분에 이 미궁에서 겨우 빠져나옴.

 

안드로이드 SDK 이거저거 다운 받을 때는 ‘미국 시간대’ 로 시스템 시간을 바꿔놓으면,

다운로드 하다가 멈춰버리는 현상이 잘 생기지 않습니다.

참고하세요.

AND