들어가며 아직도 css 레이아웃을 float를 사용해서 정리하고 있으신가요? 오늘은 이름도 Flexible-box!! 레이아웃을 정말 간단하게, 유연하게 정리할 수 있는 display:flex에 대해 알아보겠습니다. flexbox의 구성 flex box의 구성은 크게 2가지! flex-container와 그의 자식 요소인 flex-item으로 구성되어 있습니다. flex-container를 먼저 만들어 볼까요?? flex-container를 만드는 방법은 매우 간단합니다! 정렬하려는 요소들의 상위 요소에 display:flex 속성을 선언해 주시면 끝! /* 원하는 요소에 display:flex 속성값을 추가 */ div { display: flex; } 선언해 주시게 되면 자동으로 flex-contai..

웹에서 UI를 구성하다보면 별 작은 디테일까지 신경이 쓰일 때가 많다. 브라우저들마다 다 다른 행동을 하는 건 너무 짜증나는 일이지만 어느 정도는 마음을 비운 채로 대하게 되는데, 내가 직접 무언가를 설계하려면 드는 다음과 같은 작은 생각들은, 아 어떤 때는 내가 세상에서 가장 쪼잔한 질문을 하는 사람은 아닌가?하는 생각이 들게 한다. 버튼의 커서 예를 들어, Quiz 1: 웹 브라우저 상에서 버튼 위에 마우스가 올라가면, 커서는 어떻게 바뀌어야 하는가? (이 글은 PC에서 마우스 포인터로 읽어야 제대로 이해가 될 듯) 1) 화살표 모양(arrow)일 것이다. 2) 손 모양(pointer)일 것이다. 3) I자 모양(text or caret)일 것이다. 난 링크! 마우스를 올려보면 정답은 1) 화살표 모..

이전에 블로그에서 Youri Kim님이 '재미있는 로딩 애니메이션' 포스트를 통해 로딩 애니메이션에 대한 설명과 사례를 소개해주셨죠. 이번 글에서는 웹디자인/개발을 할 때 바로 사용할 수 있는 로딩 애니메이션을 공유하려고 합니다. 아마 웹디자인을 주로 하시는 분들은 더 많이 아실 것 같은데요, 최근 CSSDeck이나 CodePen같은 곳들을 자주 들어가서 구경을 하고 있습니다. 거기에 올라오는 여러 인터랙션 예제들이 재미있거든요. 전문 분야가 아니라 확실히는 모르지만, HTML, CSS, JavaScript등을 사용하는 웹 환경이 성숙해지면서 예전에 Flash, Animation GIF로 처리했던 것들을 이제 CSS, JavaScript를 이용하여 구현하는 것 같습니다. 그러다보니 글자로 된 코드만 공유..

iOS 5.1 로 업데이트 하고 세상이 달라졌습니다. 비스타의 맑은고딕이 나왔을때랑 네이버의 나눔고딕이 나왔을때 처럼 너무 설레였습니다. (세가지 폰트 모두 산돌에서 만들었네요.) 그런데 몇몇 사이트들은 5.0 이전 보다 더 심각하게 나빠보이는 경우가 있습니다. 테블릿 버전 네이버 검색결과 이나 티스토리 페이지들이 어딘지 모르게 너무 더 이상해 보여서 살펴보니 5.1에 포함된 애플고딕은 이전 버전에 포함된 애플고딕과 다른 폰트였습니다. 친절하게 macos나 ios를 고려하여 css 서체 속성에서 AppleGothic을 포함한 사이트들은 오히려 가독성도 안좋고 못 생긴 페이지가 되었습니다. 간단히 테스트 페이지를 만들어서 폰트를 비교해보았는데요. http://informationredesign.com/te..