|
|
|
13-03-03
|
조회 6,259
|
|
|
|
13-03-01
|
조회 5,588
|
|
|
|
13-03-01
|
조회 8,328
|
|
|
|
13-03-01
|
조회 6,327
|
|
|
|
13-02-26
|
조회 3,933
|
|
|
|
13-02-26
|
조회 3,889
|
|
|
|
13-02-26
|
조회 4,774
|
|
|
|
13-02-24
|
조회 8,187
|
|
|
|
13-02-24
|
조회 4,263
|
|
|
|
13-02-24
|
조회 3,514
|
|
|
|
13-02-24
|
조회 5,326
|
|
|
|
13-02-24
|
조회 5,320
|
|
|
|
13-02-24
|
조회 4,382
|
|
|
|
13-02-24
|
조회 5,721
|
|
|
|
13-02-24
|
조회 9,408
|
|
|
|
13-02-14
|
조회 5,135
|
|
|
|
13-02-13
|
조회 9,065
|
|
|
|
13-01-29
|
조회 7,705
|
|
|
|
13-01-24
|
조회 5,044
|
|
|
|
13-01-24
|
조회 4,923
|
|
|
|
13-01-17
|
조회 4,341
|
|
|
|
13-01-16
|
조회 4,367
|
|
|
|
13-01-08
|
조회 4,414
|
|
|
|
12-12-27
|
조회 4,082
|
|
|
|
12-12-20
|
조회 1.1만
|
|
|
|
12-12-20
|
조회 3,397
|
|
|
|
12-12-06
|
조회 4,394
|
|
|
|
12-12-01
|
조회 4,162
|
|
|
|
12-11-28
|
조회 5,716
|
|
|
|
12-11-25
|
조회 5,426
|
|
|
|
12-10-20
|
조회 4,679
|
|
|
|
12-10-03
|
조회 4,841
|
|
|
|
12-09-26
|
조회 5,007
|
|
|
|
12-09-15
|
조회 8,454
|
|
|
|
12-09-14
|
조회 5,468
|
|
|
|
12-09-11
|
조회 3,980
|
|
|
|
12-09-10
|
조회 3,987
|
|
|
|
12-09-05
|
조회 8,867
|
|
|
|
12-08-29
|
조회 4,677
|
|
|
|
12-08-26
|
조회 3,811
|
|
|
|
12-08-23
|
조회 3,506
|
|
|
|
12-08-22
|
조회 3,593
|
|
|
|
12-08-22
|
조회 4,403
|
|
|
 복스리
|
12-08-21
|
조회 3,551
|
|
|
|
12-08-20
|
조회 3,471
|
|
|
|
12-08-20
|
조회 9,281
|
|
|
|
12-08-15
|
조회 4,396
|
|
|
|
12-08-13
|
조회 3,309
|
|
|
|
12-08-11
|
조회 4,729
|
|
|
|
12-08-05
|
조회 4,584
|
|
|
|
12-08-03
|
조회 3,360
|
|
|
|
12-08-03
|
조회 4,049
|
|
|
|
12-08-02
|
조회 5,032
|
|
|
|
12-07-29
|
조회 4,153
|
|
|
|
12-07-26
|
조회 3,726
|
|
|
|
12-07-26
|
조회 3,593
|
|
|
|
12-07-22
|
조회 3,507
|
|
|
|
12-07-20
|
조회 3,346
|
|
|
|
12-07-19
|
조회 4,206
|
|
|
|
12-07-19
|
조회 3,462
|
|
|
|
12-07-16
|
조회 3,573
|
|
|
|
12-07-16
|
조회 4,499
|
|
|
|
12-07-15
|
조회 3,573
|
|
|
|
12-07-12
|
조회 7,400
|
|
|
|
12-07-12
|
조회 5,044
|
|
|
|
12-07-11
|
조회 3,088
|
|
|
|
12-07-09
|
조회 3,246
|
|
|
|
12-07-05
|
조회 3,865
|
|
|
|
12-07-04
|
조회 4,443
|
|
|
|
12-07-04
|
조회 3,838
|
|
|
|
12-07-04
|
조회 4,369
|
|
|
|
12-06-29
|
조회 3,833
|
|
|
|
12-06-27
|
조회 3,418
|
|
|
|
12-06-24
|
조회 3,894
|
|
|
|
12-06-22
|
조회 4,207
|
|
|
|
12-06-22
|
조회 8,615
|
|
|
|
12-06-22
|
조회 3,273
|
|
|
|
12-06-21
|
조회 3,302
|
|
|
|
12-06-17
|
조회 3,932
|
|
|
|
12-06-14
|
조회 4,031
|
|
|
|
12-06-14
|
조회 3,318
|
|
|
|
12-06-08
|
조회 4,458
|
|
|
|
12-06-06
|
조회 3,424
|
|
|
|
12-06-04
|
조회 4,185
|
|
|
|
12-05-26
|
조회 4,995
|
|
|
|
12-05-26
|
조회 3,945
|
|
|
|
12-05-25
|
조회 3,242
|
|
|
|
12-05-24
|
조회 3,347
|
|
|
|
12-05-22
|
조회 3,397
|
|
|
|
12-05-20
|
조회 3,021
|
|
|
|
12-05-16
|
조회 3,155
|
|
|
|
12-05-15
|
조회 3,546
|
|
|
|
12-05-10
|
조회 3,972
|
|
|
|
12-05-08
|
조회 3,504
|
|
|
|
12-05-04
|
조회 3,354
|
|
|
|
12-05-03
|
조회 4,306
|
|
|
|
12-05-02
|
조회 3,442
|
|
|
|
12-05-02
|
조회 3,210
|
|
|
|
12-05-02
|
조회 3,312
|
|
|
|
12-04-26
|
조회 3,463
|
댓글 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 완전히 버려 버릴수 있습니다.