이번에는 제가 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 –

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