span에 width 스타일이 적용이 안되네요

초보 · Post by 초보 » 2006 09 21 21:53 52

아직 웹표준 초보라 표준을 지키기가 힘드네요.. T.T

질문이 하나 있는데요..

원래 span은 스타일에서 width 가 적용이 안되는건가요?

IE에서는 되는데 불여우에서는 안되네요..

span 태그들을 일정한 간격으로 띄어놓으려고 하는데

불여우에서는 그냥 바로 옆에 붙어버립니다..

아시는 분 답변 부탁드립니다.

dece24 · Post by **dece24** » 2006 09 22 02:41 59

대부분의 태그는 크게 block 속성을 가지거나 또는 inline 속성을 지니고 있습니다.
block 속성은 div 와 같이 한줄에 하나의 요소만 있고 주변의 요소를 강제로 줄바꿈 시키는 성질이 있습니다. 한편 inline 요소로는 span 태그와 같은 것들이 있는데 이것들은 한 줄에 여러개의 inline 요소들이 함께 어울릴 수 있습니다.

span 태그는 inline 요소이므로 기본적으로 width 값을 갖지 않고 내부 콘텐츠의 너비가 곧 자신의 너비가 됩니다. span 태그에 width 값을 주려면 display:block 으로 span 의 기본 성질인 inline 속성값을 block 속성값으로 변경해 주면 됩니다. IE에서는 된다고 하셨지만 그것은 IE가 CSS를 잘못 렌더링 하고 있는 것입니다.

짐작컨데 '일정한 간격으로 띄우기 위함' 이라고 하셨다면 메뉴 또는 목록은 아닌지요? 그렇다면 span 태그가 아닌 li 태그로 마크업 하시는 것이 올바른 마크업 방식 입니다. 일단 마크업을 먼저 표준에 맞게 해주시는게 좋습니다. CSS 는 나중에 고쳐도 되지만 잘못된 마크업은 대형 공사를 불러오니까요. (X)HTML 태그들의 본래 용도를 확인하신 다음 본래의 목적과 의미에 맞게, 엄격하게 마크업 하시고 CSS 코딩은 나중에 처리하시는 것이 웹 표준 방법론 입니다.

makeittrue · Post by **makeittrue** » 2006 09 22 10:24 28

Jump table 하고나서, 맨 먼저 봉착하게 되는 문제이지요!
dece24님 말씀처럼, 무작성 CSS로 덤벼들지 마시고 구조화된 HTML를 잘 계획하셔서, 내용물을 위아래로 쭉 펼쳐본다음. CSS로 옷을 입혀보세요.

============
<ul id="hlist">
<li class="list1">list1</li>
<li class="list2">list2</li>
<li class="list3">list3</li>
</ul>
============
#hlist li {float:left;text-align:center;}
.list1 {width:100px;}
.list2 {width:200px;}
.list3 {width:300px;}
============
아마도 원하는 결과물을 얻을 수 있을 것입니다.

한가지 주의할 것은 무조건 table 태그를 배제할 필요는 없습니다.
가끔 보면, table 태그 않쓰려고 눈물날정도로 애절하기까지 한 시도를 합니다.
(table이 없어도 되도록 레이아웃을 바꾸든지, 차라리 table을 사용하든지)
데이터를 정형화되고 순차적으로 (좌에서 우로, 위에서 아래로) 표현할 때는, 결코 table 태그 만한게 없고, 그게 table 태그의 존재 목적이라고 할 수 있습니다.
W3에서 권장하는 것이 table 태그를 레이아웃 용으로 사용하는 것을 자제하라는 것이지, 적절한 곳에까지 사용하지 말라는 뜻은 절대 아니니, 적절히 사용하는 것도 무방합니다.
처음 공부할 때는 억지 시도도 해 보세요. 다만 끝까지 억지를 부리지만 마세요.

초보 · Post by 초보 » 2006 09 22 19:31 24

dece24 님, makeittrue 님 답글 감사합니다.

span 태그가 inline 요소라서 그랬었군요..

짐작하신 대로 게시판 목록때문이 맞구요..
li 태그 안에 span 태그들을 넣으려다 보니.. 잘 안돼서 질문글을 올렸습니다.. ^^;;

Code: Select all

<DOCTYPE>
<html>
<head>
<meta>
<title>리트스 테스트</title>

<style>
	ul, ul li {
		font-size: 9pt;
		list-style-type: none;
	}
	ul {
		width: 300px;
		margin: 0;
		padding: 0;
	}
	ul li {
		margin: 0;
		height: 14px;
		padding: 1px 2px 1px 12px;
		border-bottom: 1px dotted #cfcfcf;
		background: #fff url("../images/bullet.gif") no-repeat 0 50%;
	}
	ul li span {
		display: block;
		float: left;
	}
	ul li span.item1 {
		width: 50%;
	}
	ul li span.item2 {
		width: 25%;
	}
	ul li span.item3 {
		
	}
</style>

</head>

<body>
<ul>
  <li>
    <span>[제목]</span>
    <span>[글쓴이]</span>
    <span>[날짜]</span>
  </li>
  <li>
    <span>[제목]</span>
    <span>[글쓴이]</span>
    <span>[날짜]</span>
  </li>
  <li>
    <span>[제목]</span>
    <span>[글쓴이]</span>
    <span>[날짜]</span>
  </li>
</ul>
</body>
</html>

dece24님 말씀대로 span을 block 요소로 재설정한 후, float을 left로 하고,
li 태그에 height속성을 지정해서 일단 해결하기는 했는데요..

코딩 작업을 하다가 문득, 맞게 잘 하고 있는 건지.. 하는 생각이 드네요..
makeittrue님이 언급하신 것 처럼 억지 시도는 아닌지.. 뭐.. 그런.. 생각이요..

makeittrue · Post by **makeittrue** » 2006 09 22 20:14 07

이런 경우라면 중첩 리스트를 써도 됩니다.
<li> 태그 안에 <ul><li> 또 사용하는 것입니다.

그리고 <span> 태그를 사용하겠다고 하시니까 dece24님이 block 속성을 언급하신 것이구요. block 속성을 지정하였다면 결국은 <div>를 사용하는 것과 동일하게 됩니다.

초보 · Post by 초보 » 2006 09 23 22:50 07

span을 사용한 건 (경험적으로 막연히) 줄 안에서 사용하던 태그라서 였던 것
같습니다.. ^^;;

감사합니다.

Mozilla 한국 커뮤니티

span에 width 스타일이 적용이 안되네요

span에 width 스타일이 적용이 안되네요

Span 태그에 대하여 답변드립니다.

답글 감사합니다.

감사합니다.