display: block 없이도, 네이버의 실시간 인기검색어 같은 표현방식을 DIV가 아닌 span 으로 처리를 할 수 있다는 사실!
저런씩으로 표현을 하기 위해서 기본적으로 세로로 표시가 되는 div 를 쓸필요없이,
기본적으로 가로로 엘리먼트가 나열되는 span 을 쓰는편이 편리하겠지요^^
위 처럼 코딩을 하고 출력을 해봤습니다. 아래처럼 브라우저에서 출력이 되는군요~
인기키워드 부분을 가로 크기를 넓혀서 ↑ 부분과 떨어뜨려보겠습니다.
브라우저로 결과를 확인해 보겠습니다~~~
오잉? 그런데 변화가 없네요...! span 은 width 가 안 먹는 다는 사실!
하지만 항상 꽁수는 있는 법입니다..
그럼 어떤 방법으로 span 에 가로를 주는지 알려드릴게요~
이렇게 하면 됩니다.
클래스명을 호출하는 .t10 앞에 span 을 붙여줍니다.
그리고 float 를 주면 span 에 가로값을 줄 수 있는 꽁수가 완성됩니다.
결과를 확인해볼까요^^
span 가로 값을 넓혀서 인기키워드 부분을 화살표와 벌린 모습입니다.
span 가로값이 안 먹어서 실전에서 고생하는 경우가 많으니
css 디자이너 분들께서는 필히 이 꽁수를 익히시면 도움되리라 생각합니다^^
검색을 통해서 오신분들~ 퍼 가실때는 출처를 남겨주세요
2007/06/17 21:40
Tweet
저런씩으로 표현을 하기 위해서 기본적으로 세로로 표시가 되는 div 를 쓸필요없이,
기본적으로 가로로 엘리먼트가 나열되는 span 을 쓰는편이 편리하겠지요^^
위 처럼 코딩을 하고 출력을 해봤습니다. 아래처럼 브라우저에서 출력이 되는군요~
인기키워드 부분을 가로 크기를 넓혀서 ↑ 부분과 떨어뜨려보겠습니다.
브라우저로 결과를 확인해 보겠습니다~~~
오잉? 그런데 변화가 없네요...! span 은 width 가 안 먹는 다는 사실!
하지만 항상 꽁수는 있는 법입니다..
그럼 어떤 방법으로 span 에 가로를 주는지 알려드릴게요~
이렇게 하면 됩니다.
클래스명을 호출하는 .t10 앞에 span 을 붙여줍니다.
그리고 float 를 주면 span 에 가로값을 줄 수 있는 꽁수가 완성됩니다.
결과를 확인해볼까요^^
span 가로 값을 넓혀서 인기키워드 부분을 화살표와 벌린 모습입니다.
span 가로값이 안 먹어서 실전에서 고생하는 경우가 많으니
css 디자이너 분들께서는 필히 이 꽁수를 익히시면 도움되리라 생각합니다^^
검색을 통해서 오신분들~ 퍼 가실때는 출처를 남겨주세요
쏭군은 주말에도 열심히고나~ 저는 -_- 주말내 뭘했는지 기억이 안나요 ㅎㅎ; ㅜ.ㅜ
이 야심한 시간에 안 주무시고 머하세염^^;
a무한 감동..^^ 감사합니다!!
도움이 되셨는지 모르겠습니다^^
하코사에서 보고 왔어요 읽다보니 궁금한게 생겨서요 ㅋ
인라인 엘리먼트 span 같은걸 float으로 블록화 시키는거하고
display로 블럭화 시키는거하고 차이가 있나요? display와 float자체가 틀리긴 하지만
span에 float으로 width height값주는건 알았는데
dispaly:block으로도 주는 방법이 있었네요 ;;;
display: block 없이도, 네이버의 실시간 인기검색어 같은 표현방식을 DIV가 아닌 span 으로 처리를 할 수 있다는 사실!
에서 display:block 없이도가 어떤 의미인지 궁금해서 적어봅니다
나그네님 안녕하세요.
엄밀히 말하면 위의 방법은 inline 태그인 span을 블록레벨 속성의 태그로 바꿔주는 것은 아닙니다.
span 태그가 인라인 태그다 보니 width, height 조정이 불가능하고, span안에 다른 요소가 들어가는 것도 불가능합니다. 그래서 정석대로 하려면 span에 display: block;을 줘서 블록레벨 속성을 부여하고, width, height를 정해주고 float를 주는 방법으로 해야합니다.
헌데, display: block 없이 float만으로도 위 예시와 같은 소스가 만들어 지기에 여러분들께 소개를 해드린 것 입니다.
요약하면 inline 태그인 span에 블록레벨 속성을 부여하려면 display: block;을 주어야 하는 것이 정석입니다. 즉, 위의 예시는 꽁수인셈이죠;;