CSS span 태그에 가로 사이즈를 주기 2007/06/17 21:40
display: block 없이도, 네이버의 실시간 인기검색어 같은 표현방식을 DIV가 아닌 span 으로 처리를 할 수 있다는 사실!
저런씩으로 표현을 하기 위해서 기본적으로 세로로 표시가 되는 div 를 쓸필요없이,
기본적으로 가로로 엘리먼트가 나열되는 span 을 쓰는편이 편리하겠지요^^
위 처럼 코딩을 하고 출력을 해봤습니다. 아래처럼 브라우저에서 출력이 되는군요~
인기키워드 부분을 가로 크기를 넓혀서 ↑ 부분과 떨어뜨려보겠습니다.
브라우저로 결과를 확인해 보겠습니다~~~
오잉? 그런데 변화가 없네요...! span 은 width 가 안 먹는 다는 사실!
하지만 항상 꽁수는 있는 법입니다..
그럼 어떤 방법으로 span 에 가로를 주는지 알려드릴게요~
이렇게 하면 됩니다.
클래스명을 호출하는 .t10 앞에 span 을 붙여줍니다.
그리고 float 를 주면 span 에 가로값을 줄 수 있는 꽁수가 완성됩니다.
결과를 확인해볼까요^^
span 가로 값을 넓혀서 인기키워드 부분을 화살표와 벌린 모습입니다.
span 가로값이 안 먹어서 실전에서 고생하는 경우가 많으니
css 디자이너 분들께서는 필히 이 꽁수를 익히시면 도움되리라 생각합니다^^
검색을 통해서 오신분들~ 퍼 가실때는 출처를 남겨주세요
저런씩으로 표현을 하기 위해서 기본적으로 세로로 표시가 되는 div 를 쓸필요없이,
기본적으로 가로로 엘리먼트가 나열되는 span 을 쓰는편이 편리하겠지요^^
위 처럼 코딩을 하고 출력을 해봤습니다. 아래처럼 브라우저에서 출력이 되는군요~
인기키워드 부분을 가로 크기를 넓혀서 ↑ 부분과 떨어뜨려보겠습니다.
브라우저로 결과를 확인해 보겠습니다~~~
오잉? 그런데 변화가 없네요...! span 은 width 가 안 먹는 다는 사실!
하지만 항상 꽁수는 있는 법입니다..
그럼 어떤 방법으로 span 에 가로를 주는지 알려드릴게요~
이렇게 하면 됩니다.
클래스명을 호출하는 .t10 앞에 span 을 붙여줍니다.
그리고 float 를 주면 span 에 가로값을 줄 수 있는 꽁수가 완성됩니다.
결과를 확인해볼까요^^
span 가로 값을 넓혀서 인기키워드 부분을 화살표와 벌린 모습입니다.
span 가로값이 안 먹어서 실전에서 고생하는 경우가 많으니
css 디자이너 분들께서는 필히 이 꽁수를 익히시면 도움되리라 생각합니다^^
검색을 통해서 오신분들~ 퍼 가실때는 출처를 남겨주세요
http://monoeyes.com/trackback/217
