Alen Grakalic이 자신이 가장 많이 사용하는 Class 이름 10개(My Top 10 Most Used CSS Class Names)를 소개하고 있습니다. Class 이름은 요소(Element)가 어떻게 보이든지 어느 자리에 위치하는지보다위치하는지보다 무엇으로 표현되는지(어떤 의미로 사용되는지)가 중요하다는 것을 강조하면서 자신의 Class 이름들이 도움이도움이 되기를 바란다고 쓰고 있습니다.
- class="fixedfixed "
자신의 모든 스타일 스트에서 사용되고 있고, <li> 요소요소 안에 <img> 요소가 간격이 벌어지는 버그를 해결하기 위해 사용한다고 합니다.
- class="alt"
(대체텍스트로 오해될 수 있는데) Alen Grakalic은 특정한 방법으로 스타일된 그룹그룹 요소들 중 차이를 가지는 요소를 대체(Alternative)한다는 의미로 'alt' Class 이름을 사용한다고사용한다고 합니다.
- class="selected""
선택된 자식 요소를 위해서 사용합니다.
- class="first", class="last"
IE 6, 7등 일부 브라우저는 CSS의 유사 클래스인 :first-child와 :last-child를 지원하지지원하지 않습니다. 때문에 Class 이름으로 직접 'first'와 'last'를 사용합니다. (저 역서역서 'first-child', 'last-child'와 같이 사용하곤 합니다.)
- class="image"
뉴스 목록과 같이 제목만 있는있는 경우, 제목과 이미지가 함께 있는 경우에 이미지가 있는 요소에 지정한다고 합니다.합니다.
- class="inner"
화면 표현(디자인)을 위해서 사용되는 중첩 div에 사용합니다. (주로(주로 라운드 박스를 표현하는데 중첩 div를 많이 사용하죠. 제 경우에도 'inner-box'와 같은같은 형태로 자주 사용하곤 합니다.)
- class="class=" link"
앵커 요소에 스타일을 적용하는 경우에 PP 태그로 감싸고, P 태그에 .link Class 이름을 부여한다고 합니다.
- class="one", class="twotwo ", class="three"...
<li>와 같이 요소가요소가 나열될 때 각각의 요소가 개별적으로 적용될 때 사용한다고 합니다. (저는(저는 이 경우 불편하더라고 의미에 맞게 직접 이름을 지어주곤 하는데... 글쎄요 이렇게이렇게 순차적인 작명법은...)
- class="eveneven ", class="odd"
게시판 목록에서 홀수홀수 행과 짝수 행의 배경 색 등을 다르게 적용할 때 사용합니다.(개인적으로(개인적으로 이 Class 이름의 적용은 자바스크립트를 이용하곤 합니다. 행마다 다른 스타일을 적용하는적용하는 목적은 가독성을 조금 더 높이기 위함인데, 반드시 적용되지 않더라도 접근성을 크게크게 떨어뜨리지는 않기 때문에 자바스크립트를 지원하는 표준 브라우저에서는 자바스크립트를 이용해서 간편하게 처리하도록처리하도록 하고 있습니다.)
- class="sectionsection "
특별한 스타일링이 요구되는 특정 섹션을 위해서 사용합니다. (제 경우에는 특별한 경우에서라기 보다 일반적으로 Contents 영역 아래에서 .article >> .section > .item 과 같은 순서로 적용하곤 합니다.)
반응형
'Web story > CSS' 카테고리의 다른 글
IE6 png 배경시 링크 해결 (0) | 2009.02.17 |
---|---|
IE6 스타핵 관한.. (0) | 2009.02.17 |
구조적인 CSS 만들기. 정리. (0) | 2009.01.02 |
border-collapse에 관한 버그 (0) | 2008.12.24 |
IE6 : CSS Multi Selector Bug. (0) | 2008.12.23 |