네이밍
오랜만에 포스팅이네요
다름이 아닌 이번포스팅은 네이밍에 관해서 입니다. 대부분 class명이나 ID명을 지을 때 아래의 방법을 많이 사용합니다.
예시(1)
1 2 3 4 5 6 7 8 | <div class="news"> <h1 class="news_tit">뉴스</h1> <div class="news_con">내용</div> </div> <div class="notice"> <h1 class="notice_tit">공지</h1> <div class="notice_con">내용</div> </div> |
예시(2)
1 2 3 4 5 6 7 8 9 | <div class="news"> <h1 class="newsTit">뉴스</h1> <div class="newsCon">내용</div> </div> <div class="notice"> <h1 class="noticeTit">공지</h1> <div class="noticeCon">내용</div> </div> |
위의 방법으로 css를 제작하면
예시(1-1)
1 2 3 4 5 6 7 | .news {} .news .news_tit {} .news .news_con {} .notice {} .notice .notice_tit {} .notice .notice_con {} |
예시(1-2)
1 2 3 4 5 6 7 | .news {} .news_tit {} .news_con {} .notice {} .notice_tit {} .notice_con {} |
예시(2-1)
1 2 3 4 5 6 7 | .news {} .news .newsTit {} .news .newsCon {} .notice {} .notice .noticeTit {} .notice .noticeCon {} |
예시(2-2)
1 2 3 4 5 6 7 | .news {} .newsTit {} .newsCon {} .notice {} .noticeTit {} .noticeCon {} |
이런 형태를 띕니다.
위 상황에서 문제점
클래스명이 불필요하게 길어 질수 있고,
활용성이 떨어져서 매번 새로운 클래스명을 생각해야합니다.
위의 방법 같은 경우는 그나마 이름을 상속받아서 사용하는 경우이지만 그렇지 않은 경우는 더 네이밍 제작에 더 심각해지는것이죠
그럼 아래의 방법을 하나 제시 해보겠습니다.
1 2 3 4 5 6 7 8 9 | <div class="news"> <h1 class="tit"></h1> <div class="con"></div> </div> <div class="notice"> <h1 class="tit"></h1> <div class="con"></div> </div> |
보시다 시피 동일 한 클래스명을 사용하고 있습니다. 이러면 나중에 무엇이 무엇인지 알수 없다 라는 분들고 계실 수 있습니다.
하지만 css를 활용하면 충분히 관리가 된다는것이죠
1 2 3 4 5 6 7 | .news {} .news .tit {} .news .con {} .notice {} .notice .tit {} .notice .con {} |
위처럼 css를 관리 하고 제작한다면 가독성도 뛰어날 뿐더러 어디에 무엇이 사용되었는지 한번에 알수 있는 장점을 가집니다.
물론 css나 class명도 줄어 들어서 최적화도 약간(?)된다는거죠
템플릿
1 2 3 4 | .유니크_네임 .유니크_네임 .tit .유니크_네임 .con .유니크_네임 .more |
다음은 섹션에 관한 네이밍입니다. 이부분은 스스로의 규칙을 정하시는게 좋습니다.
| 대 wrap | “이름_container” 예) header_container |
|---|---|
| 소 wrap | “이름_content” 예) left_content, main_content |
| 소규모 wrap | “이름_wrap” 예) notice_wrap |
| 디자인필요에 의한 내부 wrap | “이름_inner” 예) header_inner, notice_inner |
| 필요에 따라서 | + 숫자 예) header_inner01, header_bg01 |
| wrap 내의 단순 좌우 정렬 | .rtl { float: left; } .ltr { float: right;} |
그럼 전체 적으로 퍼블리싱된 결과물을 한번 보겠습니다.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style> /* 레이아웃 */ #header_container {} #header_container .header_inner {} #body_container {} #body_container .body_inner {} #body_container .left_content {} #body_container .main_content {} #footer_container {} /* 메인 컨텐츠 */ /* 공지 사항 */ .notice_wrap {} .notice_wrap .tit {} .notice_wrap .con {} .notice_wrap .more {} /* 뉴스 */ .news_wrap {} .news_wrap .tit {} .news_wrap .con {} .news_wrap .more {} /* 갤러리 */ .gallery_wrap {} .gallery_wrap .tit {} .gallery_wrap .con {} .gallery_wrap .more {} </style> </head> <body> <!-- s: header --> <div id="header_container"> <div class="header_inner"> <h1 class="logo">네이밍 예제</h1> <ul class="gnb"> <li>메뉴</li> </ul> </div> </div> <!-- e: header --> <!-- s: body --> <div id="body_container"> <div class="body_inner"> <div class="left_content"> lnb 및 배너</div> <div class="main_content"> <!-- s: notice --> <div class="notice_wrap"> <h2 class="tit">공지사항</h2> <ul class="con"> <li><a href="#">어쩌구 저쩌구</a></li> </ul> <a href="#" class="more">공지 더보기</a> </div> <!-- e: notice --> <!-- s: news --> <div class="news_wrap"> <h2 class="tit">뉴스</h2> <ul class="con"> <li><a href="#">어쩌구 저쩌구</a></li> </ul> <a href="#" class="more">뉴스 더보기</a> </div> <!-- e: news --> <!-- s: gallery --> <div class="gallery_wrap"> <h2 class="tit">갤러리</h2> <ul class="con"> <li><a href="#">사진</a></li> </ul> <a href="#" class="more">갤러리 더보기</a> </div> <!-- e: gallery --> </div> </div> </div> <!-- e: body --> <!-- s: footer --> <div id="footer_container"></div> <!-- e: footer --> </body> </html> |
* 네이밍이 중요한 이유는 코드의 재활성, 가독성이 좋아 지고 유지보수가 좀더 편해지는데에 있습니다.
좀더 복잡한 케이스
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 | <div class="section_wrap"> <div class="section_inner"> <!-- 디자인요소를 위한 DIV inner혹은 숫자 혹은 bg명시 --> <!-- tit은 필요에 따라 사용 예)텝이나 여러개 추가 될경우 숫자등 이용 --> <hn>내용</hn> <!-- 주 설명 --> <p class="m_txt">아래의 내용은 예제 입니다.</p> <!-- 컨텐츠 왼쪽 정렬 동일한 컨텐츠의 영역 나누기일경우 단순 의미만 부과된 class명사용 --> <div class="rtl"> <p class="txt01">내용1</p> </div> <!-- 컨텐츠 우측 정렬 --> <div class="ltr"> <!-- 클래스 네임이 변경되는 이유는 동일한 센션의 내용이고 단분 좌우 배치일뿐 --> <p class="txt02">내용2</p> </div> </div> </div> <style> .section_wrap {} .section_wrap hn {} .section_wrap .m_txt {} .section_wrap .rtl {디자인요소} .section_wrap .ltr {디자인요소} .section_wrap .txt01 {} .section_wrap .txt02 {} </style> |
위의 예제 처럼 컨텐츠의 의미와 구조를 파악하고 class명을 명시하면 더욱 더 활용 성이 높아 집니다. 네이밍은 안된다 된다가 없습니다 활용하기 나름 일뿐