위에 첨부된 이미지에서 처럼~
최신글의 가로나 세로로 정렬해보려고 합니다.
쉽게 알고 있는...html 태그 <tr><td>로만 계속 사용하게되더군요..
1.번 그림처럼 최신글을 가로로 묶어주려면...
<div style="float:left;">
<ul>
<? latest="최신글">
<? latest="최신글">
<? latest="최신글">
</ul>
</div>
이런 형식이 되어야하는건가요?
최신글을 가로와 세로로 묶어주는 예좀 부탁드릴께요~
그리고 위처럼 최신글 3개를 박스로 묶어주려면~
<div style="float:left;">여기에 border:1px solid #색상; 을 추가 하면 되는건가요?
완전 초보적인 질문이라서... 시시하시더라도 답변 부탁드릴께요
옛날에 홈페이지 만들때 html만 사용하다 이제 css를 시작해서..
댓글 18개
<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 정말 아무것도 아닙니다.
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에서) 수평정렬되는걸 원하실 겁니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12281 |
JavaScript
팝업창을 브라우저 해상도 구분없이 항상 중앙에 띄우기 입니다.
1
|
| 20386 | |
| 12280 |
jQuery
간단한 셀렉트 드롭다운 제이쿼리
|
| 12279 |
JavaScript
우클릭해제 소스 보기 자바스크립트 입니다.
|
| 12278 |
JavaScript
미리보기 소스 입니다.
|
| 12277 |
JavaScript
움직임이 자연스러운 자바시계 입니다.
|
| 12276 |
JavaScript
특정사람에게 메일 보내기 입니다.
|
| 12275 |
JavaScript
DirectX의 와이프 기능을 사용한 이미지 스와핑 효과 내기 입니다.
|
| 12274 |
JavaScript
iframe 써서 노 프레임 효과 내기 입니다.
|
| 12273 |
jQuery
이미지 없이 구현하는 간단한 별점 기능 제이쿼리
|
| 12272 | |
| 12260 |
node.js
Node.js - 실시간 위치 추적 (1)
11
|
| 360 | |
| 12258 | |
| 12257 | |
| 12256 | |
| 12255 | |
| 12253 | |
| 12252 | |
| 12251 | |
| 12250 | |
| 12249 | |
| 12248 | |
| 12247 | |
| 12246 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기