|
|
|
12-08-29
|
조회 4,177
|
|
|
|
12-08-07
|
조회 3,835
|
|
|
|
12-08-03
|
조회 3,647
|
|
|
|
12-07-31
|
조회 3,754
|
|
|
|
12-07-30
|
조회 3,706
|
|
|
|
12-07-16
|
조회 3,903
|
|
|
|
12-07-15
|
조회 3,736
|
|
|
|
12-07-07
|
조회 3,602
|
|
|
|
12-07-06
|
조회 3,805
|
|
|
|
12-07-03
|
조회 3,762
|
|
|
|
12-06-29
|
조회 3,374
|
|
|
|
12-06-22
|
조회 3,744
|
|
|
|
12-06-17
|
조회 4,005
|
|
|
|
12-05-21
|
조회 3,929
|
|
|
|
12-05-02
|
조회 3,450
|
|
|
|
12-05-02
|
조회 4,246
|
|
|
|
12-05-02
|
조회 3,368
|
|
|
|
12-04-30
|
조회 3,568
|
|
|
|
12-04-30
|
조회 3,246
|
|
|
|
12-03-17
|
조회 4,114
|
|
|
|
12-03-10
|
조회 3,443
|
|
|
|
12-03-08
|
조회 3,967
|
|
|
|
12-03-03
|
조회 3,681
|
|
|
|
12-02-27
|
조회 5,099
|
|
|
|
12-02-17
|
조회 4,387
|
|
|
|
12-02-16
|
조회 4,673
|
|
|
|
12-02-03
|
조회 3,336
|
|
|
|
12-01-31
|
조회 3,248
|
|
|
|
12-01-24
|
조회 3,244
|
|
|
|
12-01-17
|
조회 3,951
|
|
|
|
12-01-05
|
조회 3,496
|
|
|
|
11-12-30
|
조회 3,226
|
|
|
|
11-12-23
|
조회 4,782
|
|
|
|
11-12-08
|
조회 3,549
|
|
|
|
11-12-07
|
조회 4,507
|
|
|
 선택이란
|
11-11-27
|
조회 3,936
|
|
|
|
11-11-25
|
조회 4,263
|
|
|
|
11-11-23
|
조회 3,707
|
|
|
|
11-11-22
|
조회 3,564
|
|
|
|
11-11-09
|
조회 3,275
|
|
|
|
11-10-23
|
조회 3,218
|
|
|
|
11-10-19
|
조회 3,169
|
|
|
 복스리
|
11-10-08
|
조회 2,853
|
|
|
|
11-10-04
|
조회 2,852
|
|
|
|
11-10-04
|
조회 5,310
|
|
|
|
11-09-01
|
조회 4,389
|
|
|
|
11-08-13
|
조회 2,564
|
|
|
|
11-08-06
|
조회 3,247
|
|
|
|
11-07-11
|
조회 3,640
|
|
|
|
11-06-27
|
조회 2,999
|
|
|
|
11-06-21
|
조회 2,662
|
|
|
|
11-06-13
|
조회 2,475
|
|
|
|
11-06-07
|
조회 2,483
|
|
|
|
11-05-26
|
조회 2,439
|
|
|
|
11-04-20
|
조회 2,767
|
|
|
|
11-03-21
|
조회 2,865
|
|
|
|
11-03-18
|
조회 2,560
|
|
|
|
11-03-11
|
조회 2,579
|
|
|
|
11-02-07
|
조회 2,407
|
|
|
|
11-01-18
|
조회 2,728
|
|
|
|
11-01-12
|
조회 2,451
|
|
|
|
11-01-06
|
조회 2,543
|
|
|
|
10-12-10
|
조회 2,803
|
|
|
|
10-12-09
|
조회 2,653
|
|
|
|
10-12-08
|
조회 5,084
|
|
|
|
10-11-29
|
조회 2,920
|
|
|
|
10-11-28
|
조회 2,828
|
|
|
|
10-11-28
|
조회 2,657
|
|
|
|
10-11-19
|
조회 2,849
|
|
|
|
10-11-04
|
조회 2,726
|
|
|
|
10-10-21
|
조회 2,449
|
|
|
|
10-10-19
|
조회 3,410
|
|
|
|
10-10-12
|
조회 2,731
|
|
|
|
10-10-07
|
조회 2,570
|
|
|
 관리자
|
10-09-30
|
조회 3,523
|
|
|
|
10-09-17
|
조회 3,936
|
|
|
|
10-09-17
|
조회 3,878
|
|
|
|
10-05-31
|
조회 3,585
|
|
|
|
09-12-31
|
조회 3,724
|
|
|
|
09-07-23
|
조회 5,049
|
|
|
|
08-09-16
|
조회 3,251
|
|
|
|
08-09-06
|
조회 2,994
|
|
|
|
08-09-04
|
조회 3,416
|
|
|
|
08-08-16
|
조회 4,443
|
|
|
|
08-08-15
|
조회 3,315
|
|
|
 헌이
|
08-08-14
|
조회 4,532
|
|
|
헌이
|
08-08-12
|
조회 3,999
|
|
|
|
08-07-23
|
조회 2,816
|
|
|
|
08-07-10
|
조회 3,763
|
|
|
|
08-07-04
|
조회 2,992
|
|
|
헌이
|
08-06-27
|
조회 7,632
|
|
|
관리자
|
08-06-19
|
조회 4,941
|
|
|
헌이
|
08-05-27
|
조회 5,544
|
|
|
|
08-05-25
|
조회 5,380
|
|
|
|
08-05-23
|
조회 3,458
|
|
|
관리자
|
08-05-23
|
조회 4,621
|
|
|
|
08-05-21
|
조회 4,974
|
|
|
|
08-05-20
|
조회 4,085
|
|
|
|
08-05-20
|
조회 3,313
|
|
|
관리자
|
08-04-18
|
조회 4,384
|
댓글 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 완전히 버려 버릴수 있습니다.