|
|
|
13년 전
|
조회 4,373
|
|
|
|
13년 전
|
조회 3,249
|
|
|
|
13년 전
|
조회 1,799
|
|
|
|
13년 전
|
조회 1,979
|
|
|
|
13년 전
|
조회 3,378
|
|
|
|
13년 전
|
조회 2,377
|
|
|
|
13년 전
|
조회 1,521
|
|
|
|
13년 전
|
조회 1,642
|
|
|
|
13년 전
|
조회 2,971
|
|
|
|
13년 전
|
조회 1,494
|
|
|
|
13년 전
|
조회 1,781
|
|
|
|
13년 전
|
조회 1,217
|
|
|
|
13년 전
|
조회 1,358
|
|
|
|
13년 전
|
조회 2,127
|
|
|
|
13년 전
|
조회 3,668
|
|
|
|
13년 전
|
조회 1,438
|
|
|
|
13년 전
|
조회 1,685
|
|
|
|
13년 전
|
조회 2,105
|
|
|
|
13년 전
|
조회 1,503
|
|
|
|
13년 전
|
조회 3,129
|
|
|
|
13년 전
|
조회 1,693
|
|
|
 관리자
|
13년 전
|
조회 2,384
|
|
|
 지운아빠
|
13년 전
|
조회 2,616
|
|
|
|
13년 전
|
조회 2,454
|
|
|
|
13년 전
|
조회 1,755
|
|
|
|
13년 전
|
조회 2,033
|
|
|
 선택이란
|
13년 전
|
조회 1,541
|
|
|
|
13년 전
|
조회 1,399
|
|
|
|
13년 전
|
조회 2,068
|
|
|
|
13년 전
|
조회 1,762
|
|
|
|
13년 전
|
조회 1,606
|
|
|
|
13년 전
|
조회 1,505
|
|
|
|
13년 전
|
조회 1,726
|
|
|
|
13년 전
|
조회 1,494
|
|
|
|
13년 전
|
조회 2,086
|
|
|
|
13년 전
|
조회 1,722
|
|
|
|
13년 전
|
조회 1,391
|
|
|
|
13년 전
|
조회 2,012
|
|
|
관리자
|
13년 전
|
조회 1,666
|
|
|
|
13년 전
|
조회 2,398
|
|
|
|
13년 전
|
조회 1,867
|
|
|
|
13년 전
|
조회 4,262
|
|
|
|
13년 전
|
조회 2,331
|
|
|
|
13년 전
|
조회 2,904
|
|
|
|
13년 전
|
조회 1,560
|
|
|
|
13년 전
|
조회 1,183
|
|
|
지운아빠
|
13년 전
|
조회 1,900
|
|
|
|
13년 전
|
조회 2,677
|
|
|
|
13년 전
|
조회 1,575
|
|
|
|
13년 전
|
조회 2,790
|
|
|
|
13년 전
|
조회 1,536
|
|
|
|
13년 전
|
조회 1,891
|
|
|
|
13년 전
|
조회 2,556
|
|
|
|
13년 전
|
조회 1,918
|
|
|
|
13년 전
|
조회 1,553
|
|
|
|
13년 전
|
조회 2,265
|
|
|
 똥싼너구리
|
13년 전
|
조회 4,544
|
|
|
|
13년 전
|
조회 1,271
|
|
|
|
13년 전
|
조회 1,352
|
|
|
|
13년 전
|
조회 1,492
|
|
|
|
13년 전
|
조회 4,625
|
|
|
|
13년 전
|
조회 1,960
|
|
|
|
13년 전
|
조회 2,167
|
|
|
|
13년 전
|
조회 2,187
|
|
|
|
13년 전
|
조회 1,477
|
|
|
|
13년 전
|
조회 1,349
|
|
|
|
13년 전
|
조회 1,512
|
|
|
|
13년 전
|
조회 2,304
|
|
|
|
13년 전
|
조회 1,662
|
|
|
|
13년 전
|
조회 1,984
|
|
|
|
13년 전
|
조회 3,166
|
|
|
|
13년 전
|
조회 1,651
|
|
|
|
13년 전
|
조회 1,964
|
|
|
|
13년 전
|
조회 2,050
|
|
|
|
13년 전
|
조회 1,439
|
|
|
선택이란
|
13년 전
|
조회 4,152
|
|
|
|
13년 전
|
조회 1,927
|
|
|
|
13년 전
|
조회 3,475
|
|
|
|
13년 전
|
조회 1,793
|
|
|
|
13년 전
|
조회 1,514
|
|
|
|
13년 전
|
조회 1,529
|
|
|
|
13년 전
|
조회 1,397
|
|
|
|
13년 전
|
조회 1,924
|
|
|
|
13년 전
|
조회 2,082
|
|
|
|
13년 전
|
조회 3,407
|
|
|
|
13년 전
|
조회 4,990
|
|
|
|
13년 전
|
조회 1,411
|
|
|
|
13년 전
|
조회 3,972
|
|
|
|
13년 전
|
조회 1,362
|
|
|
|
13년 전
|
조회 1,826
|
|
|
|
13년 전
|
조회 1,451
|
|
|
|
13년 전
|
조회 1,784
|
|
|
|
13년 전
|
조회 2,543
|
|
|
|
13년 전
|
조회 1,900
|
|
|
|
13년 전
|
조회 1,335
|
|
|
|
13년 전
|
조회 2,023
|
|
|
|
13년 전
|
조회 1,624
|
|
|
|
13년 전
|
조회 2,026
|
|
|
|
13년 전
|
조회 2,469
|
|
|
|
13년 전
|
조회 1,853
|
댓글 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 완전히 버려 버릴수 있습니다.