|
|
|
12-06-05
|
조회 3,149
|
|
|
|
12-06-04
|
조회 3,185
|
|
|
|
12-06-02
|
조회 3,087
|
|
|
|
12-06-02
|
조회 3,829
|
|
|
|
12-06-01
|
조회 3,555
|
|
|
|
12-05-25
|
조회 3,535
|
|
|
|
12-05-25
|
조회 3,131
|
|
|
|
12-05-21
|
조회 3,467
|
|
|
|
12-05-19
|
조회 2,868
|
|
|
|
12-05-18
|
조회 3,331
|
|
|
|
12-05-16
|
조회 3,277
|
|
|
|
12-05-11
|
조회 2,828
|
|
|
|
12-05-07
|
조회 2,893
|
|
|
|
12-05-05
|
조회 3,106
|
|
|
|
12-05-05
|
조회 3,000
|
|
|
|
12-05-05
|
조회 2,893
|
|
|
|
12-05-04
|
조회 3,962
|
|
|
|
12-05-03
|
조회 3,051
|
|
|
 HARUNET
|
12-04-30
|
조회 3,152
|
|
|
|
12-04-26
|
조회 4,036
|
|
|
|
12-04-25
|
조회 2,935
|
|
|
|
12-04-23
|
조회 2,968
|
|
|
|
12-04-23
|
조회 2,899
|
|
|
|
12-04-20
|
조회 4,250
|
|
|
|
12-04-20
|
조회 3,202
|
|
|
|
12-04-18
|
조회 2,800
|
|
|
|
12-04-17
|
조회 3,470
|
|
|
|
12-04-17
|
조회 2,800
|
|
|
|
12-04-17
|
조회 3,296
|
|
|
|
12-04-16
|
조회 2,755
|
|
|
|
12-04-16
|
조회 3,054
|
|
|
|
12-04-13
|
조회 2,781
|
|
|
|
12-04-06
|
조회 3,531
|
|
|
|
12-04-05
|
조회 2,908
|
|
|
|
12-04-03
|
조회 3,164
|
|
|
|
12-04-03
|
조회 2,795
|
|
|
|
12-03-30
|
조회 2,780
|
|
|
|
12-03-30
|
조회 3,252
|
|
|
|
12-03-29
|
조회 3,807
|
|
|
|
12-03-27
|
조회 2,950
|
|
|
|
12-03-26
|
조회 4,025
|
|
|
|
12-03-24
|
조회 6,329
|
|
|
|
12-03-24
|
조회 3,788
|
|
|
|
12-03-23
|
조회 2,921
|
|
|
|
12-03-22
|
조회 3,158
|
|
|
|
12-03-22
|
조회 3,432
|
|
|
|
12-03-22
|
조회 3,622
|
|
|
|
12-03-22
|
조회 4,982
|
|
|
|
12-03-21
|
조회 3,073
|
|
|
|
12-03-21
|
조회 2,777
|
|
|
|
12-03-21
|
조회 4,800
|
|
|
|
12-03-20
|
조회 5,558
|
|
|
|
12-03-20
|
조회 2,739
|
|
|
|
12-03-17
|
조회 3,254
|
|
|
|
12-03-16
|
조회 3,283
|
|
|
|
12-03-15
|
조회 2,668
|
|
|
|
12-03-14
|
조회 2,869
|
|
|
|
12-03-13
|
조회 2,878
|
|
|
|
12-03-12
|
조회 3,923
|
|
|
|
12-03-09
|
조회 3,040
|
|
|
|
12-03-09
|
조회 4,017
|
|
|
|
12-03-07
|
조회 2,802
|
|
|
|
12-03-07
|
조회 2,974
|
|
|
|
12-03-07
|
조회 2,660
|
|
|
|
12-03-02
|
조회 3,027
|
|
|
|
12-03-02
|
조회 3,272
|
|
|
|
12-03-01
|
조회 5,053
|
|
|
|
12-02-29
|
조회 3,905
|
|
|
|
12-02-27
|
조회 4,309
|
|
|
|
12-02-27
|
조회 3,147
|
|
|
|
12-02-26
|
조회 2,869
|
|
|
|
12-02-26
|
조회 5,065
|
|
|
|
12-02-25
|
조회 2,606
|
|
|
|
12-02-23
|
조회 2,923
|
|
|
|
12-02-23
|
조회 2,688
|
|
|
|
12-02-22
|
조회 3,781
|
|
|
|
12-02-21
|
조회 2,808
|
|
|
|
12-02-20
|
조회 3,035
|
|
|
|
12-02-20
|
조회 2,895
|
|
|
|
12-02-20
|
조회 5,692
|
|
|
|
12-02-20
|
조회 3,499
|
|
|
 亞波治
|
12-02-19
|
조회 3,251
|
|
|
|
12-02-18
|
조회 2,980
|
|
|
亞波治
|
12-02-17
|
조회 3,473
|
|
|
|
12-02-15
|
조회 3,082
|
|
|
|
12-02-14
|
조회 2,968
|
|
|
|
12-02-11
|
조회 2,903
|
|
|
|
12-02-09
|
조회 6,343
|
|
|
|
12-02-09
|
조회 3,032
|
|
|
|
12-02-06
|
조회 2,889
|
|
|
|
12-02-05
|
조회 2,896
|
|
|
|
12-02-04
|
조회 6,647
|
|
|
 관리자
|
12-02-02
|
조회 5,346
|
|
|
|
12-01-31
|
조회 2,805
|
|
|
|
12-01-30
|
조회 2,744
|
|
|
|
12-01-30
|
조회 2,923
|
|
|
|
12-01-29
|
조회 3,116
|
|
|
|
12-01-27
|
조회 2,784
|
|
|
|
12-01-26
|
조회 2,904
|
|
|
|
12-01-25
|
조회 2,742
|
댓글 18개
float값을 주려면 넓이값이 필요하므로 <li>의 넓이값이 필요합니다
리스트 세로배열은 기본값이므로 값이 필요하지 않습니다.
그러고보니 li를 빼먹었네요..
어떻게해야할지 공부해야하게 너무 많네요 ㅠ.ㅠ
태클은 아니구요 하나 짚고 넘어가자면 li, listed item 이란건 한개 한개 뭘 리스트 할때 쓰는거거든요. 저 위에 예는 최신글해서 (예를 들자면 뭐 자유게시판을) 불러오는 섹션인건데 그게 li 는 아니죠. block 인거지. 그래서 이런 경우는 div 를 쓰는게 맞습니다.
.최신글 { padding: 20px;border: 1px solid grey; float: left}
#최신글1 { width:100px;}
#최신글2 { width: 200px;}
#최신글3 { width: 300px;}
</style>
<div id="최신글1" div class="최신글">echo 해주시고 </div>
<div id="최신글2" div class="최신글">echo 해주시고</div>
<div id="최신글3" div class="최신글">echo 하시고</div>
width, margin, padding 다 주시구요, float 같은 공통분모? 암튼 공통적인 요소는 클라스에서 주시면 되구요.
끝. 저대로 ctrl+c, v 하셔서 해보세요. ㅋㅋㅋ
참 쉽죠잉~ ^^ html 보다 css 가 훨씬 더 쉬운거에요. 한 5분만 공부? ㅋㅋㅋ 하시면 뭐든 다 됩니다.
*disply:inline 하는거랑 div horizontal 정렬하는거랑 아무런 상관도 없습니다. float left 를 해줘야 div 들이 왼쪽으로 쏠릴거 아니에요. 그러니까 정렬이 되는 겁니다. 영어가 힘든거지 알고 보면 css 정말 아무것도 아닙니다.
잘 보고 배워갑니다
왕계란님 말씀처럼 inline 요소가 되면서도 padding margin 넓이값 등을 가질 수 있어요.
css2.1 부터 추가된 걸로 알고 있습니다.
http://stackoverflow.com/questions/1323278/css-to-display-unordered-list-horizontally-in-ie-6-and-7
http://uncorkedstudios.com/2011/12/12/how-to-fix-the-ie7-and-inline-block-css-bug/
아마 엔터맨님은 모든 브라우저 (특히 IE에서) 수평정렬되는걸 원하실 겁니다.
<style type="text/css">
div.latest span{display:inline-block;width:100px;border:1px solid #eee}
</style>
<div class="latest">
<span>최신글1</span>
<span>최신글2</span>
<span>최신글3</span>
</div>
처럼 해도 될 겁니다.
테스트 해보니 <span>은 줄바꿈이 되면 띄워쓰기가 한번 되네요.
You cannot have a block-level element (H1) inside an inline element (SPAN). Remove the SPAN tags (there's no need for them).
http://www.1-script.com/forums/html/can-t-put-a-h1-inside-of-a-span-some-validation-errors-41142-.htm
지운엄마처럼 코딩을 하시면, css 의 가장 기본적 rule을 violate 하는 block level element 를 span 안에 넣게 되는 겁니다. 저 상태에서 최신글이 불러와지면
<span>
<div>
<h>
<span>
위에도 이부분에 대해 설명을 드렸었는데.....
W3 validation 을 꼭 해야 한다 이런 얘기가 아니고, css 는 최소한의 기본규칙은 존재합니다.
(이런건 단순 오류가 아니라 죄악이라네요. 쿨럭.)
I've heard that putting a block element inside a inline element is a HTML sin:
http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-a-anchor-ever-correct
http://css-validator.kldp.org/validator?uri=http://jikonglab.com/test.htm&profile=css21&usermedium=all&warning=1&vextwarning=
제가 부족해서 그런지 말씀하시는게 무슨 이야기인지 모르겠네요. ㅠ
최신글을 불러오세요. 그럼 이해가 되실거에요.
<style type="text/css">
div.latest span{display:inline-block;width:100px;border:1px solid #eee}
</style>
</head>
<body>
<div class="latest">
<span>
<? echo latest("basic", "notice", 5, 30); ?>
</span>
<span><? echo latest("basic", "notice", 5, 30); ?>
</span>
<span><? echo latest("basic", "notice", 5, 30); ?>
</span>
</div>
</body>
게시판 하나에서 뽑는 걸 말하는 줄 알았네요. ㅎㅎㅎ
node.js 배워보세요. 정말 재미있습니다. 지운엄마처럼 저도 php 무지 싫어하는데, node.js 이거 아주 괜찮아요. 마인드가 .js 는 OOP 잖아요. 그래서 어쩌면 지운엄마도 node.js 랑 코드가 맞으실거 같네요. css 나 .js 랑 비슷한 개념입니다.
.js 를 서버 사이드 에서도 돌려주는건데, 채팅, 게시판도 아주 쉽게 만들수 있고, 한번 꼭 check it out!!! 하세요.
가장 큰 메리트는 디자이너도 한방에 서버사이드 프로그래머를 앞설수 있다는!!!! 정말입니다. 이걸로 꼴도 보기 싫은 php 완전히 버려 버릴수 있습니다.