이번에는 제가 2007년 11월 29일에 강의할때 알려드렸던 가상 선택자를 사용하지 않은 활용 방법입니다.
로 많이 들 사용하고 계십니다. 이렇게 사용하는
이유는 IE 구 버전에 수도 클래스인 “first-child”(IE6 미지원), last-child(미지원) 이 되기 때문에 일일히 클래스명을 삽입할 경우가 생깁니다.
고정인 경우 “first”같은 클래스를 넣어도 상관없지만 유동적인 부분에서 사용하면 개발에서 조건문을 한번더 사용해야하는 번거로움이 있습니다. 이를 해결하기 위해서 margin의 음수 값과 overflow:hidden; 을 이용하여 제작을 할수 있습니다.
단점 : div를 한번더 감싸고 overflow:hidden; 속성 때문에 외부로(클릭시 레이어) element가 빠져 나가지 않는다.
사용처 : 위의 조건이 아닌경우는 사용하여도 무방하다.
1. 최근 게시물 형태의 갤러리
디자인
HTML –
CSS –
1
2
3
4
5
6
7
8
| .gallery {width: 300px;position:relative; overflow: hidden; /* 레이아웃 넓이 */ }
.gallery ul {margin-left: -11px; /* 여백만큼 이동 */ width: 400px; /* 컨텐츠 총 넓이 */ }
.gallery ul li {
float: left;
width: 80px; height: 20px;
padding-left: 20px;
border-left: 1px solid #666;
} |
2. 상하로 디자인된 형태 입니다
디자인
보통은 아래의 코드와 같이 사용합니다.
HTML –
CSS –
1
2
3
4
5
6
7
8
| .gallery {width: 300px; /* 레이아웃 넓이 */ }
.gallery ul {border-bottom: 1px solid #000;}
.gallery ul li {
float: left;
width: 80px; height: 20px;
padding:10px;
}
.gallery ul.end {border-bottom:0;} |
변경된 형태
준비할 이미지
갤러리의 높이+라인과 같이 자른다 라인을 자를때 라인을 제외한 배경은 투명으로 처리하는게 좋습니다. (위에 이미지 있음)
HTML –
- 갤러리1
- 갤러리2
- 갤러리3
- 갤러리1
- 갤러리2
- 갤러리3
- 갤러리1
- 갤러리2
- 갤러리3
CSS –
1
2
3
4
5
6
7
8
9
10
11
12
| .gallery {
width: 300px;
position: relative;
overflow: hidden; /* 레이아웃 넓이 */ }
.gallery ul {background: url('이미지') 0 0 repeat; margin-top: -1px /* 라인만큼 위로 당겨줍니다. */}
.gallery ul li {
float: left;
width: 80px;
height: 31px; /* 라인을 포함한 높이를 줍니다. */
padding:10px;
}
.gallery ul.end {border-bottom:0;} |
이제 적용하시면 원하는 효과를 얻을 수 있습니다.
주의 : 소스에 overflow:hidden; 과 position: relative;를 같이 사용하였는데
position: relative;를 사용하지 않으면 컨텐츠가 밖으로 노출이 됩니다.
overflow:hidden과 margin음수값을 이용하면 보다 편리하게 퍼블리싱이 가능합니다.
하지만 너무 많은 남발의 경우 많은 버그 및 사용성의 불편함이 생길수 있습니다. 확실한 테스트후에 응용하세요
처음에 적은 글 처럼 컨텐츠가 확대 되거나 특정 이벤트 후 absolute로 동작되는 element가 있으면 overflow:hidden;때문에 컨텐츠가 사라지니
충분한 주의를 기울여서 사용하셔야 합니다.
다른 참고글 : http://blog.naver.com/skell83/150021523403
네이밍
오랜만에 포스팅이네요
다름이 아닌 이번포스팅은 네이밍에 관해서 입니다. 대부분 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명을 명시하면 더욱 더 활용 성이 높아 집니다. 네이밍은 안된다 된다가 없습니다 활용하기 나름 일뿐
html, css, javascript, web accessibility, Web Standarsd