[설문] CSS Generator / Tools 사용하시나요?

CSS Geerator는 레이아웃이나 타이포그라피 등을 사용자가 쉽게 디자인대로 속성과 값을 일치시킬 수 있도록 도와주는 '마법사 도구'와 같은 서비스 또는 프로그램을 말합니다. 검색을 하다 보면 생각보다 굉장히 많은 Generator나 Tools이 만들어저 있음을 확인할 수 있고, 본 블로그를 통해서도 몇번 소개를 드렸던 서비스도 있었습니다. 그런데 문득 이런 도구들을 정말 실무에서 활용해서 적용하는 분들이 얼마나 되는지 의구심이 들었습니다. 그래서 간단히 다음과 같은 질문을 담은 설문을 실시해 보고자 합니다. 기왕에 제 블로그에 찾아주신 분들이라면 아래 질문에 대한 의견을 댓글로 남겨주시면 감사하겠습니다.

다양한 CSS Generator

1. CSS Generator / Tools 를 들어보셨나요?
  a. 네
  b. 아니오

2. 들어보셨다면 사용해 보신 적은 있나요?
  a. 네
  b. 아니오

3. 어떤 것들을 사용해 보셨나요?
   a. Layout (Frameset, 100% Height Layout, Roundbox ... )
   b. Navigation (Tab Menu, Rollover, List Menu ... )
   c. Font (Typograph, Em Calculator ... )
   d. Forms
   f. Scrollbar
   g. Etc. (                                )

4. 지속적으로 사용하시나요?
  a. 네
  b. 아니오

5. 지속적으로 사용하지 않다면, 그 이유는?
  (                                                 )

em 크기를 찾아주는 차트

'em 계산을 쉽게 하세요'라는 글을 통해서 계산기 방식으로 em 값을 알아내는 사이트를 알려드렸었는데요. 오늘은 Aloe studios 에서 em(글꼴 단위) 차트를 만들어서 공개한 em 차트를 소개해 드립니다.

현재의 px 사이즈에서 원하는 px 사이즈 값을 찾아가면 화면과 같이 em 값을 쉽게 찾아낼 수 있도록 고안된 차트입니다.

em 계산을 쉽게 하세요

em은 폰트 크기의 상대적인 단위로 % 단위와 함께 많이 사용되고 있습니다. 하지만 px 단위와 달리 적용하기가 쉽지 않은데 px 단위를 em 단위로 쉽게 변화해 주는 사이트가 있어 소개해 드립니다.

PXtoEM.com 은 px 단위를 em 단위로 쉽게 계산해 줄 뿐 아니라 바로 사용할 수 있는 css로도 만들어 주고 있습니다. 아울러 Learn 메뉴를 통해서 em 단위에 대한 메뉴얼을 함께 제공하고 있어 em 단위에 대한 학습을 필요로 하는 사용자들에게 매우 유용한 사이트가 될 것 같습니다.

Body 폰트 크기를 고르거나, 직접 입력할 수 있습니다.

사용자가 설정한 크기로 CSS를 작성해줍니다.

em 단위에 대한 메뉴얼을 제공하고 있습니다.

<b>와 <strong>의 차이

HTML문서를 작성할 때 가장 많이 표현하게 되는 양식이 글자를 굵게하는 것입니다. 그리고 이 문제를 해결하기 위해서 <b> 앨리먼트를 너무나 당연하게, 그리고 쉽게 사용합니다. 하지만 웹접근성을 높이고자 한다면, 웹표준을 이해하고 준수하고자 한다면 <b>앨리먼트보다는 <strong>앨리먼트가 좋습니다.

<strong>앨리먼트는 의미적으로 강조를 가리킵니다. 반면에 <b>앨리먼트는 글자를 단순히 굵게 표시하여 표현하는데 목적을 둡니다. 표현상으로 두 앨리먼트의 차이는 없지만, 스크린리더와 같이 앨리먼트 의미를 해석해서 내용을 읽어주는 경우 <strong>앨리먼트가 적용된 텍스트를 강조해서 읽어줄 수 있습니다.

더불어 강조된 글자 표현을 위해서 스타일을 이용하는 경우가 많은데, 이럴 경우 스크린리더에서는 display, visibility등 몇몇 경우를 제외하고는 스타일을 참조하지 않으므로(신현석님 도움말씀) 강조의 의미를 살릴수가 없는것 같습니다. 특별히 의미를 고려해서 텍스트를 강조해야만 한다면 <strong>앨리먼트를 이용하는 것이 좋을것 같습니다. 그런데 <b> 앨리먼트를 <strong>앨리먼트로 교체해야한다는 논리 때문에 무수하게 많이 사용된 모든 <b>앨리먼트를 <strong>앨리먼트로 바꾼다면 오히려 문제가 생기지 않을까 싶습니다. 첫째로 글자수가 늘어나 시간이 늘고, 용량이 늘어나게 됩니다. 둘째로 습관적인 굵은 글씨가 모두 의미적으로 "강조"였는가 하는 것입니다. 무분별하게 <strong>앨리먼트를 사용한다면 정말로 중요한 것과 우선순위를 낮출수 있는 것들과의 구분이 모호해질 수 있게 됩니다. 따라서, <b>와 <strong>앨리먼트를 사용할 곳을 잘 판단하여야 할 것이고, <strong>과 같이 강조 의미를 가지고 있는 <em>앨리먼트를 지정한 후에 스타일을 이용해서 기본 스타일속성을 없애고, <strong>과 같이 굴게 표시(이 경우 본래의 em 속성을 사용할 일이 없어야 한다)하는 스타일을 지정해볼수도 있을것 같습니다.