또 다시 기초적인 css (div) 질문드려요.. 정보
HTML 또 다시 기초적인 css (div) 질문드려요..본문
위에 첨부된 이미지에서 처럼~
최신글의 가로나 세로로 정렬해보려고 합니다.
쉽게 알고 있는...html 태그 <tr><td>로만 계속 사용하게되더군요..
1.번 그림처럼 최신글을 가로로 묶어주려면...
<div style="float:left;">
<ul>
<? latest="최신글">
<? latest="최신글">
<? latest="최신글">
</ul>
</div>
이런 형식이 되어야하는건가요?
최신글을 가로와 세로로 묶어주는 예좀 부탁드릴께요~
그리고 위처럼 최신글 3개를 박스로 묶어주려면~
<div style="float:left;">여기에 border:1px solid #색상; 을 추가 하면 되는건가요?
완전 초보적인 질문이라서... 시시하시더라도 답변 부탁드릴께요
옛날에 홈페이지 만들때 html만 사용하다 이제 css를 시작해서..
추천
0
0
댓글 18개
<li>에 float값을 주셔야하구요
float값을 주려면 넓이값이 필요하므로 <li>의 넓이값이 필요합니다
리스트 세로배열은 기본값이므로 값이 필요하지 않습니다.
float값을 주려면 넓이값이 필요하므로 <li>의 넓이값이 필요합니다
리스트 세로배열은 기본값이므로 값이 필요하지 않습니다.
답변 감사드립니다..
그러고보니 li를 빼먹었네요..
그러고보니 li를 빼먹었네요..
li에 넣어 주실 경우엔 li를 display:inline 하시면 돼요.
display:inline를 주면 padding..width나 margin값을 못주는데 넓이나 간격조절을
어떻게해야할지 공부해야하게 너무 많네요 ㅠ.ㅠ
어떻게해야할지 공부해야하게 너무 많네요 ㅠ.ㅠ
공부까지야.... 그냥 한번 보고 ctrl +c,v 해서 쓰시면 저절로 이해가 된다는.... ^^
태클은 아니구요 하나 짚고 넘어가자면 li, listed item 이란건 한개 한개 뭘 리스트 할때 쓰는거거든요. 저 위에 예는 최신글해서 (예를 들자면 뭐 자유게시판을) 불러오는 섹션인건데 그게 li 는 아니죠. block 인거지. 그래서 이런 경우는 div 를 쓰는게 맞습니다.
태클은 아니구요 하나 짚고 넘어가자면 li, listed item 이란건 한개 한개 뭘 리스트 할때 쓰는거거든요. 저 위에 예는 최신글해서 (예를 들자면 뭐 자유게시판을) 불러오는 섹션인건데 그게 li 는 아니죠. block 인거지. 그래서 이런 경우는 div 를 쓰는게 맞습니다.
<style type="text/css">
.최신글 { 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 정말 아무것도 아닙니다.
.최신글 { 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 정말 아무것도 아닙니다.
와우 멋지십니다!!!
잘 보고 배워갑니다
잘 보고 배워갑니다
display:inline-block 을 활용하시면 됩니다.
왕계란님 말씀처럼 inline 요소가 되면서도 padding margin 넓이값 등을 가질 수 있어요.
css2.1 부터 추가된 걸로 알고 있습니다.
왕계란님 말씀처럼 inline 요소가 되면서도 padding margin 넓이값 등을 가질 수 있어요.
css2.1 부터 추가된 걸로 알고 있습니다.
IE 6 와 7 에서 는 li 에 대한 display:inline-block 을 recognize 하지 않습니다.
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에서) 수평정렬되는걸 원하실 겁니다.
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>은 줄바꿈이 되면 띄워쓰기가 한번 되네요.
<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
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
최신글을 index.php 에서 불러오겠죠?
최신글을 불러오세요. 그럼 이해가 되실거에요.
<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>
최신글을 불러오세요. 그럼 이해가 되실거에요.
<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 완전히 버려 버릴수 있습니다.
node.js 배워보세요. 정말 재미있습니다. 지운엄마처럼 저도 php 무지 싫어하는데, node.js 이거 아주 괜찮아요. 마인드가 .js 는 OOP 잖아요. 그래서 어쩌면 지운엄마도 node.js 랑 코드가 맞으실거 같네요. css 나 .js 랑 비슷한 개념입니다.
.js 를 서버 사이드 에서도 돌려주는건데, 채팅, 게시판도 아주 쉽게 만들수 있고, 한번 꼭 check it out!!! 하세요.
가장 큰 메리트는 디자이너도 한방에 서버사이드 프로그래머를 앞설수 있다는!!!! 정말입니다. 이걸로 꼴도 보기 싫은 php 완전히 버려 버릴수 있습니다.
그리고 php 프로그래머들은 jQuery, .js, css 의 selector 개념이 약해서 오히려 이게 어렵게 느껴지지만, 지운엄마처럼 css 의 selector 개념 (이게 OOP 입니다.) 이 정확히 있으신 분들은 진도가 무지 빨리 나간다고 합니다.
제 두 쪽 아직 건재해요... ㅠ
밤마다 여장을 하고 다니신다는 소문이 있어서.... 쿨럭.
