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 관계를 가지고 중앙정렬을 하는 것인데, 늘 화면 중앙에 두기 위해서 여러 꼼수를 쓴 겁니다. 

저작자 표시 비영리 변경 금지
신고

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 으로 애니메이션 모두 바꾸고 났더니 모바일에서도 아주 부드럽게 애니메이션된다. 굿!!!


저작자 표시 비영리 변경 금지
신고

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


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

저작자 표시 비영리 변경 금지
신고

앱디자인의 한계

mobile 2013.09.26 10:55

현재의 앱디자인은 과거 웹디자인을 테이블로 짜던 시절과 거의 비슷하다. 모든 이미지의 shadow 를 포토샵에서 잘라내서 나인패치 형태의 테이블에 한 귀퉁이씩 짜넣던 그 시절. 이 답답함때문에 모바일웹 디자인이 차라리 편한 것 같다. 적어도 레이아웃에서 shadow를 고민하지 않아도 되니까. 

언제쯤이면 앱디자인에서도 CSS가 구현하는 수준의 언어기반 렌더링이 가능해질지....

저작자 표시 비영리 변경 금지
신고

요즘 페이스북 ‘좋아요’ 버튼을 여기저기 많이들 사용하는데, 이게 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용 */
}

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

신고

design by logos

생각 2012.10.26 21:38
요즘 css작업을 거의 맨날 하면서 여러가지 생각이 드는데, 무엇보다도 '재미'를 느끼는 작업이라 즐겁다. 이게 소위 말하는 design by numbers 에 제법 근사한 작업인데, processing 이나 flash AS 만큼의 visual expression을 목표로 하는 것은 아니지만, 원하는 것들을 그려내는데 큰 무리가 없다.

사실 웹이라는 것은 상당부분 정보를 전달하고, 사용자와 인터랙션을 하는데 목적이 있기 때문에 디테일한 그래픽에 꼭 의존할 필요는 없다. 되려, 웹표준에 의거하자면, 이미지가 하나도 없어도 웹을 사용하는데 문제가 없도록 만들어야 한다. 적당히 영역을 긋고, 그 위에 정보(글자)를 올리고, 버튼을 만들고, 그걸 누름직하게 만들어주고 하는 작업들은 이제 css만으로도 충분하다.

과거 포토샵에서 해야만 가능했던 온갖 shadow 효과, gradation 같은 것들이 이제 코딩으로 모두 해결이 되니까, 포토샵 없이도 상당부분의 이미지는 만들어낼 수가 있다. 또 코딩은 언제라도 그 수치를 조절할 수 있기 때문에, 픽셀 기반의 노동이 가져오는 비가역성으로부터 자유할 수 있어서 좋다. 또, 복제와 재사용이 용이하다는 점도, 이미지 소스 의존도를 최대한 낮추고 싶게 만드는 매력이 있다. (이것은 또 하나의 문제를 초래하게 될테지만, 그건 나중에 얘기하기로 하고)

둘째로, 이 작업이 재밌는 이유는 '상대값에 의한 관계적 디자인' 이 가능하기 때문이다. 이건 꼭 css라서 라기보다는 html + CSS 의 조합이라고 봐야하겠다.
parametric design 이란 용어자체는 사실 design by numbers 와 거의 동일한 얘기지만, 이 용어를 많이 쓰던 곳은 제품디자이너들의 3D modeling 툴에서다. 내가 애용하는 rhino 3d 같은 디자인 툴이 이런 parametric design 을 지원하지 못하는 ㅠㅠ 싼 툴이고, 고급 툴로 갈수록 이런 parametric design 을 철저하게 지원하고 있다. parametric design이 가능한 툴을 썼을 때, 비로소 이러한 '상대값 기반의 관계적 디자인' 이 가능해지는데, 예를 들면 이런거다.

휴대폰을 디자인 한다고 했을때, 가로 60mm, 세로 120mm 에 두께가 9mm 인 형상을 만든다고 치자. (보통 실무에서는 왠 종일 걸려야 형상을 만들어낼 수 있다.) 그런데 최종 결정권자가 와서는 "이거 두께를 0.5mm만 줄이지" 라고 얘기하면, 과연 이 작업을 다시 시작해야 할까?

▲ 이런 느낌?


내가 rhino 3d 로 작업을 했다면, 아마 n 시간을 들인 만큼 처음부터 n 시간을 투입해야 하겠지만, pro-e 나 solidworks 를 썼으면 (그리고 관계적 디자인을 매우 잘 설계했다면) 수치하나만 조절하면 모든 형상들이 re-generated 된다. 


css작업도 마찬가지다. 워낙에 사용자가 마주할 환경이 다이나믹 한 것이 웹이다보니, 그 예측못할 수 많은 상황에 responsive 하게 디자인되려면, 이런 관계적 설계를 디자인에 많이 도입해야 한다. 가령 화면은 가로폭이 1024px이 될 수도, 700px 이 될 수도 있기 때문에, 어떠한 상황에서도 이상하게 보이지 않을만큼의 flexibility 가 요구된다. 글상자의 폭을 무작정 700px로 맞춰놓아버리면 이런 상황에 대처하기가 어렵다. 여백이 남거나, 화면이 잘리게 된다.
그러니 화면폭에 맞추어서 몇% 수준으로 설정한다던지, 폭을 꽉 채운 상태로 가장자리로부터 얼마간의 padding 을 준다는 식의 관계적 설계를 해놓는것이다. 이렇게 하면 글상자의 크기는 언제나 화면에 종속되게 되므로, 내가 원하는 모양새를 유지하기가 쉽다.

마지막으로 이게 재미있는 이유는 내가 좋아하는 'high-effectiveness'를 추구할 수 있기 때문이다. 다만 몇 kb의 용량을 줄이려고 이미지 사용이 꺼려지는 웹디자인에서 css는 축복이다. 글자 몇 줄이면 몇 kb에 달하는 그라데이션도 해결할 수 있고, animation 도 가능하다. 물론 이걸 다 rendering해주는 브라우저가 있으니 감사한 일이지만, 디자이너는 이미지 용량 줄인다고 고생 안 해서 좋고, 또 아무리 확대를 해도 깨지지 않을 robust한 visual 을 가지게 되니 좋다. 애니메이션 만든다고 플래시 삽질을 안 해서 좋고, 다 만들어놓고 수정한다고 그래픽 툴 버벅대며 열 필요도 없다. 결국 시간을 버는 셈이다.

물론, 이 작업이 가지는 여러 어려움들이 여전히 산재해 있는 것은 사실이고, 개선의 여지도 무지하게 많다는 것을 인정하지만.
결국 디자인이 logos(말)로 다 가능하다는 것이, 조금씩이나마 증명되는 것 아닌가 하는 생각이 든다.



신고

웹을 떠난 지 한참 있다가 근 10년 만에 돌아왔더니, CSS가 눈부시게 발전해버렸다.
어제는 미로니에 들어갈 버튼 하나를 디자인하면서, 포토샵에서 만든 이미지를 끼워 맞춰보다가, CSS3를 심층적으로 탐구하게 되었는데, 오… 이 것이 물건이로세.

아무튼, 그 결과는 아래와 같다.

위 이미지는 온전히 <div>에 CSS3로 스타일만 먹여서 만든 버튼이다. 이미지 파일은 1px 도 들어가지 않았으며, 그라데이션부터 외곽선, drop shadow 와 inner shadow, inner glow 모두를 CSS로만 완성한 것이다. 굳이 캡쳐를 한 것은 이 코드가 일부 브라우저(아마도 IE)에서는 위와 같이 렌더링 되지 않을 수도 있기 때문. 실제 코드로 만든 <div>는 아래와 같다.
 

POST
▲ html 과 css 로만 만든 버튼


물론, 아직까지는 포토샵으로 만질 수 있는 시각적 효과가 훨씬 엄청난 것이지만, 요 정도의 버튼 이미지 구현은 웹을 하든 앱을 하든 자주 있는 일이다 보니, 아래와 같은 장점이 있다.

1. 같은 스타일의 (대량의) 버튼들을 코드 한 두줄로 색이나 shadow 등을 바꿀 수 있어 효율적
2. vector 이미지와 같이 사용자 브라우저의 확대 축소에 전혀 문제가 되지 않는다.
3. 비트맵 이미지보다 훨씬 적은 용량으로 버튼 이미지 구현 가능

 

 

그럼 각 단계별로 포토샵 effect 와 CSS 가 어떻게 같은 역할을 하는지 살펴보자.

 

1. Rounded Box

포토샵에서는 아예 처음부터 박스의 round 값을 정하고 들어가야 해서, 나중에 고치기가 애매한 부분인데, CSS에서는 이마저도 얼마든지 조정 가능하다. <div> 의 외곽을 얼마나 round 처리하는지를 정한다.

border-radius:10px;



2. Gradient Overay 

각 브라우저마다 그라데이션은 명령어가 다르다. 해서, 세 줄 다 써놓아야 한다.

<!-- chrome, safari -->
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #a6cd2f), color-stop(1, #6e9102) );

<!-- mozilla --> 

background:-moz-linear-gradient(top, #a6cd2f, #6e9102);

<!-- IE -->
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a6cd2f', EndColorStr='#6e9102', GradientType=0);

 

3. Stroke 

포토샵의 stroke는 <div> 의 border 에 해당한다. 해서, 이 border 에 아래와 같은 효과들을 주면 됨.

border-style: solid;

border-width: 1px;

border-color: #555;


(이거 다 합쳐서 한 줄로도 쓸 수 있다. border: 1px solid #555; )

 


4. Inner Shadow 

여기서 포토샵보다 CSS가 더 좋은 한 가지는 multiple shadow 가 적용 가능하다는 점. 포토샵에서는 외곽 번짐효과라고 볼 수 있는 네 가지 - drop shadow, outer glow, inner glow, inner shadow 외에는 추가로 쓸 수 있는 shadow 가 없지만, CSS에서는 무한정 추가 가능하다.
사실상 outer glow 나 inner glow 도 distance 0 인 shadow와 마찬가지이기 때문에, shadow 라는 개념 하나만으로도 이 모든 효과를 표현할 수 있다.

box-shadow:inset 0px 2px 0px rgba(255, 255, 255, .75)


inset : 그림자를 <div> 안 쪽에 적용하겠다는 얘기
0px : 우측으로 distance
2px : 하단으로 distance
0px : blur 먹는 정도
rgba(255, 255, 255, .75) : 각각 R, G, B, alpha 값을 이야기함




5. Inner Glow 

inner glow 의 경우, 앞에서 말한 바와 같이, distance 0 인 inner shadow 와 같다고 보면 된다. 추가로 shadow 를 지정할 때에는 앞서 작성한 box-shadow 값 옆에 콤마(,)를 찍고 추가해줘야 중복 적용이 된다. 

box-shadow:inset 0px 2px 0px rgba(255, 255, 255, .75), inset 0px 0px 2px rgba(255, 255, 255, .75);




6. Drop Shadow 

Box-shadow 스타일이 사실 여기서부터 출발한 것이다. 역시 추가로 지정해줘야 하며, 이 때에는 inset 을 빼주면 <div> 바깥쪽으로 그림자가 생긴다.

box-shadow: inset 0px 2px 0px rgba(255, 255, 255, .75), inset 0px 0px 2px rgba(255, 255, 255, .7), 0px 3px 3px rgba(0,0,0, .3);


0px : 우측으로 distance
3px : 하단으로 distance
3px : blur 먹는 정도
rgba(0,0,0, .3) : 투명도 30%를 가지는 black 컬러


신고