|
|
|
13년 전
|
조회 3,954
|
|
|
|
13년 전
|
조회 2,845
|
|
|
|
13년 전
|
조회 1,390
|
|
|
|
13년 전
|
조회 1,600
|
|
|
|
13년 전
|
조회 2,951
|
|
|
|
13년 전
|
조회 1,956
|
|
|
|
13년 전
|
조회 1,077
|
|
|
|
13년 전
|
조회 1,175
|
|
|
|
13년 전
|
조회 2,549
|
|
|
|
13년 전
|
조회 1,052
|
|
|
|
13년 전
|
조회 1,354
|
|
|
|
13년 전
|
조회 761
|
|
|
|
13년 전
|
조회 923
|
|
|
|
13년 전
|
조회 1,681
|
|
|
|
13년 전
|
조회 3,248
|
|
|
|
13년 전
|
조회 1,002
|
|
|
|
13년 전
|
조회 1,259
|
|
|
|
13년 전
|
조회 1,649
|
|
|
|
13년 전
|
조회 1,086
|
|
|
|
13년 전
|
조회 2,675
|
|
|
|
13년 전
|
조회 1,296
|
|
|
 관리자
|
13년 전
|
조회 1,957
|
|
|
 지운아빠
|
13년 전
|
조회 2,196
|
|
|
|
13년 전
|
조회 2,015
|
|
|
|
13년 전
|
조회 1,333
|
|
|
|
13년 전
|
조회 1,584
|
|
|
 선택이란
|
13년 전
|
조회 1,119
|
|
|
|
13년 전
|
조회 973
|
|
|
|
13년 전
|
조회 1,652
|
|
|
|
13년 전
|
조회 1,328
|
|
|
|
13년 전
|
조회 1,189
|
|
|
|
13년 전
|
조회 1,088
|
|
|
|
13년 전
|
조회 1,280
|
|
|
|
13년 전
|
조회 1,037
|
|
|
|
13년 전
|
조회 1,632
|
|
|
|
13년 전
|
조회 1,289
|
|
|
|
13년 전
|
조회 975
|
|
|
|
13년 전
|
조회 1,586
|
|
|
관리자
|
13년 전
|
조회 1,226
|
|
|
|
13년 전
|
조회 1,942
|
|
|
|
13년 전
|
조회 1,410
|
|
|
|
13년 전
|
조회 3,861
|
|
|
|
13년 전
|
조회 1,898
|
|
|
|
13년 전
|
조회 2,478
|
|
|
|
13년 전
|
조회 1,105
|
|
|
|
13년 전
|
조회 760
|
|
|
지운아빠
|
13년 전
|
조회 1,486
|
|
|
|
13년 전
|
조회 2,256
|
|
|
|
13년 전
|
조회 1,168
|
|
|
|
13년 전
|
조회 2,400
|
|
|
|
13년 전
|
조회 1,088
|
|
|
|
13년 전
|
조회 1,469
|
|
|
|
13년 전
|
조회 2,146
|
|
|
|
13년 전
|
조회 1,471
|
|
|
|
13년 전
|
조회 1,137
|
|
|
|
13년 전
|
조회 1,835
|
|
|
 똥싼너구리
|
13년 전
|
조회 4,134
|
|
|
|
13년 전
|
조회 860
|
|
|
|
13년 전
|
조회 926
|
|
|
|
13년 전
|
조회 1,086
|
|
|
|
13년 전
|
조회 4,234
|
|
|
|
13년 전
|
조회 1,574
|
|
|
|
13년 전
|
조회 1,758
|
|
|
|
13년 전
|
조회 1,816
|
|
|
|
13년 전
|
조회 1,076
|
|
|
|
13년 전
|
조회 929
|
|
|
|
13년 전
|
조회 1,113
|
|
|
|
13년 전
|
조회 1,921
|
|
|
|
13년 전
|
조회 1,275
|
|
|
|
13년 전
|
조회 1,611
|
|
|
|
13년 전
|
조회 2,773
|
|
|
|
13년 전
|
조회 1,282
|
|
|
|
13년 전
|
조회 1,587
|
|
|
|
13년 전
|
조회 1,700
|
|
|
|
13년 전
|
조회 1,036
|
|
|
선택이란
|
13년 전
|
조회 3,786
|
|
|
|
13년 전
|
조회 1,550
|
|
|
|
13년 전
|
조회 3,079
|
|
|
|
13년 전
|
조회 1,392
|
|
|
|
13년 전
|
조회 1,110
|
|
|
|
13년 전
|
조회 1,141
|
|
|
|
13년 전
|
조회 1,024
|
|
|
|
13년 전
|
조회 1,566
|
|
|
|
13년 전
|
조회 1,717
|
|
|
|
13년 전
|
조회 3,000
|
|
|
|
13년 전
|
조회 4,625
|
|
|
|
13년 전
|
조회 1,029
|
|
|
|
13년 전
|
조회 3,606
|
|
|
|
13년 전
|
조회 978
|
|
|
|
13년 전
|
조회 1,483
|
|
|
|
13년 전
|
조회 1,062
|
|
|
|
13년 전
|
조회 1,423
|
|
|
|
13년 전
|
조회 2,181
|
|
|
|
13년 전
|
조회 1,524
|
|
|
|
13년 전
|
조회 961
|
|
|
|
13년 전
|
조회 1,618
|
|
|
|
13년 전
|
조회 1,252
|
|
|
|
13년 전
|
조회 1,655
|
|
|
|
13년 전
|
조회 2,092
|
|
|
|
13년 전
|
조회 1,449
|
댓글 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 완전히 버려 버릴수 있습니다.