Monthly Archives: May 2009

webkit계열 브라우저의 입력폼 outline, resize제어

미투데이 서비스는 글쓰기를 개편하면서 처음 글을 쓰려는 사용자의 사용성을 더 편하게 하고, 접근성을 높이기 위해 노력중이다.
개선사항 중 입력폼의 비쥬얼 적이면서도 실용도를 높일 수 있는 기능들을 탑제하다 보니 작게 만들어 놓거나 기능이 사용되고 실체는 드러나지 않게 배경색 위에 위장해 놓은 부분이 Webkit 계열(safari, chrome)브라우저 에서는 포커스가 위치하면서 실체가 들어나 버리게 된다…
(이런 테두리의 압박이…)

outline 예제

그래서 뭔가 저런 시스템 적인 기본기능처럼 보이지만 없앨 방법이 있지 않나해서 찾아보니 이런 경우엔 css2 스팩에도 있지만 IE에서는 지원하고 있지 않는 속성인 outline 속성으로 간단히 없앨 수 있었다.
코드는 아래와 같다.

textarea, input {
outline-color:-moz-use-text-color; outline-style:none; outline-width:medium;
}

참고로 위 속성을 사용하면 outline 속성이 firefox 에서도 적용되기 때문에 outline-color:-moz-use-text-color; 속성으로 색상을 지정해 줘야 한다.

그리고 추가로 사파리나 크롬에서 textarea 의 사이즈를 사용자가 마음대로 조절할 수 있는데 만약 이 기능을 막으려면 아래 코드를 넣어 간단히 제어할 수 있다.

textarea {
resize:none;
}

입력 폼 컨트롤러에 대한 제어는 일부 사용자의 입장에서는 다소 민감한 부분일 수 있다. 어떤 곳에서는 오히려 좋은 기능이 될 수 있으니 서비스에 맞게 사용하면 좋을 것 같다.

객체지향CSS가 무엇인고…?

갑자기 CSS에서 객체지향 이라는 말을 붙이니 뭔가 어색하다.
웹 표준이 대두되고 CSS의 활용 범위가 전에 없던 개발, 디자인 까지 도움을 줄 정도가 되면서 이제는 객체지향적인 기법(?) 내지는 객체지향 이라는 말까지 붙일 수 있게 된 것이라 생각되지만, 아직까지 객체지향CSS가 뭔지 정확히는 잘 모르겠다.
프로그래밍에서 말하는 클래스, 메소드, 상속, 오버로딩, 오버라이딩, 다형성, 추상화 등을 CSS에서도 찾는 것일까? 확실히 알 수 있는 것은 프로그래밍에서 말하는 그 정도의 개념은 아닐 것이라는 거다.
어쩌면 이미 우리가 CSS를 활용하는 방법이 객체지향CSS였을 수도 있고 그러한 방식이 올바른 CSS 사용법으로 적합하다고 알고 있는지도 모르겠지만 stubbornella의 OOCSS(객체지향CSS) 에서 강조하는 몇 가지 사항은 이렇다.

OOCSS를 위해 권장하는 것들

  • 재사용을 위한 component library를 만들어라
  • 스타일을 정의할 때 의미있고 일관되게(모순없이) 정의해라
  • grid를 활용해라
  • 유연하게 만들어라
  • 구조와 표현을 분리해라
  • 박스와 내용을 분리해라
  • 다수의 class를 사용하되 속성의 중복은 피하고 속성의 종류는 확장해라

OOCSS를 하기에 적합하지 않는 것들

  • 위치에 독립적인 스타일은 피해라
  • div.style01과 같이 tag에 class를 지정하는 방식을 피해라
  • 본문안쪽 영역은 ID로 style 하는 것을 피해라
  • 불규칙한 배경(불규칙무늬, 그라데이션)이라면 그림자나 라운드코너 박스를 피해라
  • 높이를 이용한 줄맞춤(간격설정)은 피해라
  • 원본은 언제나 텍스트라는 것을 잊지 말아라(이미지만으로 표현하지 마라)
  • CSS 설정이 중복되지 않게 해야 한다
  • 성급한 최적화는 피해라(충분한 테스트가 필요하다. 장담할 수 있는가?)

이런 내용만 봐도 객체지향CSS가 무엇을 말하려고 하는지 대충 짐작은 된다.
하지만 짐작만으로는 뭔가 시원하게 풀리지 않기에 위 사이트에서 말하는 CSS를 보다 완벽하게 구축하기 위한 상세한 내용을 살펴보면 아래와 같은 내용이 있다.
(사실 내용을 살펴보면 CSS에 대한 그리고 웹 개발에 대한 올바른 인식과 소통법에 대한 충고이거나 격언을 말해주는 부분 이기도 했다.)

CSS에 대한 인식
CSS는 전문적이여야 한다는 것을 말 하고자 한다.
(그렇다고 완벽함을 바라는 것은 아닐 것이다.)
웹 개발 실무자들 사이에서 CSS에 대한 인식이 얼마나 있을까? 현재까지 전문적인 직업으로 여기는 사람들이 그리 많지 않고 개발, 디자인 사이에서 아직까지 애매한 역할을 하고 있는 것이 사실이다.
그렇기 때문에 더욱 명료하고 전문적인 코드가 될 수 있을 법한 CSS가 대충 아무렇게나의 코드가 되는 것은 아닐까? 라는 생각이 든다.

분리
웹 표준에서 항상 강조하는 것이 구조와 표현을 분리하는 것이라고 말하고 있다. 그러나 객체지향 CSS를 위해서는 내용과 내용을 담는 컨테이너도 분리하는 것이 좋다고 말하고 있다.
내용과 컨테이너를 분리하므로 해서 내용이 특정 위치에 있을 때만 스타일링 되는 것이 아니라 페이지의 어느 곳에서도 표현(위치)하기에 자연스러울 수 있도록 하기 위한 규칙이 아닐까 생각된다.

재사용
디자인에 필요한 component library를 만들어 놓아야 한다.
다양한 페이지를 만들기위해서는 미리 만들어진 구성요소들을 이용해서 조합할 수 있는 것이 가장 중요할 것이다.
어쩌면 이것이 핵심이라 생각된다. YUI를 보자면 객체지향CSS가 무얼 말하는 것인지 단번에 떠오르지 않을까? 일단 모든 구성요소가 정의되면 필요한 디자인은 페이지 마다 필요한 구성요소를 가져다 쓰기만 하면 된다.
(준비된 Lego를 이용해서 다양한 모형을 만드는 것을 비유하고 있는데 꾀나 적절해 보인다. :D)
그러나 재 사용할 수 있는 코드가 있더라도 현실적으로 재 사용이 잘 이루어 지고 있지 않다.
왜냐하면 대부분의 개발자들은 다른 개발자의 코드를 잘 신뢰하지 않기 때문이다.
물론 그로 인해 CSS 코드가 추가되지만 실제로 이런 추가코드는 대부분 별 문제가 없겠지 라고 느끼는게 대부분이다.
하지만 지속적인 CSS의 추가는 그 만큼 파일 사이즈도 증가한 다는 것을 알아야 한다.

곤란할 수 있을 요소를 없애라
만약 h3선언과 h5선언이 똑같은 역할을 하고 있다면? 만약 가변적인 박스에 수직,수평의 변화되는 배경이 깔리거나 라운드 박스 뒤 배경이 변화되는 이미지라면?
웹페이지를 구성하면서 가장 불필요한 시간을 잡아먹는 것이 있다면 이런 곤란한 요소들 때문에 고뇌하고 또 고뇌하는 게 아닐까 생각된다.
정말 필요한 경우가 아니라면 미리 자주 일어날 법한 곤란한 일들은 미리 체크하고 피하는 것이 좋다. 이런 일들은 주로 경험에서 많이 나온다. 그럴때 마다 체크하고 다음 프로젝트를 위해 유용하게 사용될 수 있도록 기록하는 것은 중요한 정보가 될 수 있다.
여기서 말해주는 몇 가지 리스트도 참고할 만 하다.

  • 중복되는 스타일 설정을 피해야 한다.(규칙을 겹쳐쓰지 마라)
  • 표제는 순서대로 선언해야 한다. 잘 못 측정 하면 처음부터 끝까지 계속 잘 못 된다.
  • 어림짐작을 피해라.
  • 일관적인 의미의 스타일을 사용해야한다.
  • 표제가 페이지의 다른곳에 위치하면 안된다.

사실 위 내용을 읽으면서도 어떻게 해야할 지 대략적인 그림이 머리에 그려는 지지만 실현되지 않는 현실때문에 항상 이상으로 남는 것이 대부분이라 생각된다.
하지만 이런 내용들을 CSS를 제작하는 사람들만 알고 있다면 아무것도 해결 되진 않는다.
CSS는 아직 완벽하지 않기 때문에 Grid를 이용하여 레이아웃과 구성요소의 범위 구성을 미리 디자이너, 기획자와 함께 맞춰보고, 디자이너와 개발자에게 CSS에 대한 정보도 공유된다면 유연한 CSS개발에 한걸음 더 올라설 수 있지 않을까 생각해본다.

참고