Source : http://monoeyes.com/217

 

display: block 없이도, 네이버의 실시간 인기검색어 같은 표현방식을 DIV가 아닌 span 으로 처리를 할 수 있다는 사실!

clip_image001

저런씩으로 표현을 하기 위해서 기본적으로 세로로 표시가 되는 div 를 쓸필요없이,
기본적으로 가로로 엘리먼트가 나열되는 span 을 쓰는편이 편리하겠지요^^

clip_image002

위 처럼 코딩을 하고 출력을 해봤습니다. 아래처럼 브라우저에서 출력이 되는군요~

clip_image003

인기키워드 부분을 가로 크기를 넓혀서 ↑ 부분과 떨어뜨려보겠습니다.

clip_image004

브라우저로 결과를 확인해 보겠습니다~~~

Array

오잉? 그런데 변화가 없네요...! span 은 width 가 안 먹는 다는 사실!
하지만 항상 꽁수는 있는 법입니다.. 
그럼 어떤 방법으로 span 에 가로를 주는지 알려드릴게요~

clip_image005

이렇게 하면 됩니다. 
클래스명을 호출하는 .t10 앞에 span 을 붙여줍니다.
그리고 float 를 주면 span 에 가로값을 줄 수 있는 꽁수가 완성됩니다.
결과를 확인해볼까요^^

clip_image006

span 가로 값을 넓혀서 인기키워드 부분을 화살표와 벌린 모습입니다.
span 가로값이 안 먹어서 실전에서 고생하는 경우가 많으니
css 디자이너 분들께서는 필히 이 꽁수를 익히시면 도움되리라 생각합니다^^

'Network > Web' 카테고리의 다른 글

[style.css] div와 span, id와 class 어떤 차이가 있을까?  (0) 2011.02.06
span, div  (0) 2011.02.06
CSS span 태그에 가로 사이즈를 주기  (0) 2011.02.06
프레임인가? 노프레임인가?  (0) 2008.07.30
PORT NUMBERS  (0) 2008.05.22
아파치 버추얼 호스트  (0) 2008.04.22

+ Recent posts