티스토리 뷰

728x90
반응형
원문 : My Top 10 Most Used CSS Class Names


조금 재미있는 내용의 포스팅입니다.

내가 가장 많이 사용하는 CSS 클래스명 10개 라는 포스팅인데요.

front-end 개발과 디자인을 하고 있는 alen 이라는 블로거의 포스팅입니다.


간혹 표현된 이탤릭체는 원문 포스팅에서 alen이 말한 내용이며, 그 외의 설명은 제 경험을 섞은 내용입니다.



class="fixed"


.fixed:after{
 content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
 }
.fixed{
 display:block;
 }
/*  \*/
.fixed{
 min-height:1%;
 }
* html .fixed{
 height:1%;
 }




fixed라고 쓰이는 이 css 선언은 float된 엘리먼트를 clear 시켜주는 역할을 합니다.

float된 엘리먼트 다음에 나오는 엘리먼트가 이 float의 영향을 받지 않게 하기 위해서는 clear를 시켜줘야하는데

float된 엘리먼트에 이 fixed 클래스를 적용하면 자동적으로 clear가 됩니다.

워낙 많이 쓰이는 클래스입니다.




class="alt"

#content img{
 float:left;
 display:inline;
 margin-right:10px;
 border:1px solid #ccc;
 padding:1em 0;
 background:#fff;
 }
#content img.alt{
 float:right;
 margin-right:0;
 margin-left:10px;
 }



alen은 어떠한 이미지가 이미지에 대한 설명과 함께 나올경우 이미지에 대한 설명에 alt라는 클래스를 적용시켜

예를 들면 이미지는 왼쪽으로 설명은 오른쪽으로 float 시키는 용으로 사용한다고 하는군요.




class="selected"


<li class="selected"><a href="/about">About Us</a></li>



네비게이션에 많이 쓰이는 selected 네이밍입니다.

선택된 메뉴를 표시할때 selected라는 네이밍을 많이 사용하죠.

저는 selected 또는 on 클래스명을 사용하기도 합니다.





class="first", class="last"


alen도 저와 같이 이 클래스를 사용함에 있어서 울분을 토하고 있습니다.

CSS에서 :first-child 와 :last-child  라는 수도클래스가 있는데

이 수도 클래스는 아쉽게도 IE6에서 정상적으로 지원이 되지 않습니다.

이 수도클래스를 사용하면

엘리먼트중에서 가장 첫번째 나오는 엘리먼트, 가장 마지막으로 나오는 엘리먼트에 적당한 스타일을 입힐 수 있는데

그렇게 할 수 없어 첫번째 엘리먼트라는 의미의 class="first", 마지막 엘리먼트라는 의미의 class="last"를 씁니다.





class="image"


<p class="image">
 <img src="/images/img_me.jpg" alt="my funny face" />
 This is me trying to look cool!
</p>
<p>
 The rest of the content here
 ...
</p>



뉴스 같은 경우, 캡션과 함께 이미지가 먼저 왼쪽에 나타나고 그 아래로 본문이 나오는 그런 경우 이러한 마크업을 종종 사용하고 class 네이밍을 한다고 소개하고 있네요.





class="inner"


<div id="container">
 <div class="inner">
 
 </div>
</div>



저도 inner 클래스명은 무척이나 많이 사용합니다.

특히 배경이 라운드 박스형태 같은 경우

백그라운드 이미지가 2개 필요한경우에 inner 클래스를 적용한 div 엘리먼트를 마크업해서 적용하곤합니다.





class="link"

<p class="link"><a href="#">Read more...</a></p>


링크를 블록엘리먼트로 마크업해야할 필요가 있을때 사용한다고 합니다.

저는 특히 하나의 링크에 2개의 백그라운드 이미지가 필요한경우 이런식의 마크업을 합니다.

예) 링크 앞에 불릿있고 배경에 백그라운드 이미지 있을때





class="one", class="two", class="three"...

<ul>
 <li class="one"><a href="#">Home</a></li>
 <li class="two"><a href="#">About</a></li>
 ...
</ul>



갯수를 세어 각각의 스타일을 적용할때 사용한다고 하는군요.




class="even", class="odd"

<ul>
 <li class="even">Content</li>
 <li class="odd">Content</li>
 <li class="even">Content</li>
 <li class="odd">Content</li>
</ul>



또는


<table>
 <tr class="even">
  <td>Content</td>
  <td>Content</td>
 </tr>
 <tr class="odd">
  <td>Content</td>
  <td>Content</td>
 </tr>
 <tr class="even">
  <td>Content</td>
  <td>Content</td>
 </tr>
 <tr class="odd">
  <td>Content</td>
  <td>Content</td>
 </tr>
</table>



even은 짝수, odd는 홀수의 의미를 가지고 있습니다.

리스트나 표의 내용이 서로 번갈아 가면서 가독성을 위해 다른 색으로 표시한다던가 하는 경우에 쓰입니다.

css3의 선택자중에서 :nth-child 라는 선택자가 있는데 n번째의 엘리먼트에만 반복적으로 해당 스타일을 적용시키는 선택자입니다.

이러한 유용한 선택자가 있지만 아직 사용이 불가능한 브라우저(특히 IE6)가 있기에 odd, even 클래스를 사용해야 합니다.

nth-child 라는 선택자가 널리 퍼지면 odd와 even 클래스명도 슬슬 사라지겠죠.




class="section"


<div class="section">
 content here...
</div>



box 라고도 마크업하는 일반적인 콘텐츠를 담은 엘리먼트를 마크업할때 사용한다고 합니다.

저도 box, section 네이밍은 반복적으로 비슷한 형태로 나타나는 박스가 있을때 사용합니다.





alen이 말한 10개의 CSS의 클래스명은 alen 뿐만 아니라 저도 너무나 자주 써먹는 네이밍입니다.

아마 이 포스팅을 읽고 있는 다른 웹퍼블리셔분들도 끄덕끄덕 하실부분이라 생각합니다.




추가로 많이들 사용하는 클래스명을 하나 더 언급하자면


홈 > 회사소개 > 연혁

과 같이 현재 위치해 있는 페이지를 가리키는 이런 콘텐츠에는

breadcrumbs(빵부스러기 : 길을 잃어버리지 않기 위해 길에 떨어뜨리는 빵부스러기와 같은 역할) 라는 네이밍을 사용하기도 합니다.





점차 웹표준이 널리 알려지고, 많은 front-end 개발자들에게 전파되다 보니,

우리나라의 웹표준 실력도 향상되고 있는것 같습니다.

그리고 여러 부분에서  조금씩 표준화(?)가 되어가는것 같고요.



몇몇 클래스명이나 id, 마크업구조는 특별히 얘기 안해도 관례에 따라 비슷한 구조를 따라가고 있습니다.

점점 개발방법론이랄까요. 이런것이 안정적이어지는 느낌입니다.
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함