위에 첨부된 이미지에서 처럼~
최신글의 가로나 세로로 정렬해보려고 합니다.
쉽게 알고 있는...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에서) 수평정렬되는걸 원하실 겁니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12386 |
PHP
메타태그 주요정리 입니다.
|
| 12385 |
JavaScript
광고나 공지사항 띄울때 다음부터 이창을 띄우지 않기 입니다.
|
| 12384 |
MySQL
테이블 생성, 컬럼 추가, 삭제, 수정
|
| 12380 |
JavaScript
입력값을 형식에 맞게 해주는 플러그인이네요
3
|
| 12379 |
JavaScript
팝업창에서 오늘 하루 이 페이지 열지 않기 체크박스 사용입니다.
|
| 12378 |
JavaScript
팝업창 하루에 한번만 열기 입니다
|
| 12377 | |
| 12376 |
jQuery
유투브 관련 플러그인
|
| 12375 |
jQuery
input 태그에 readonly 추가하는 방법
|
| 12374 | |
| 12373 | |
| 12372 |
jQuery
자주 쓰이는 Jquery 팁 20가지 입니다.
|
| 12371 |
jQuery
jQuery 오른쪽 퀵메뉴 입니다.
|
| 12369 |
jQuery
textarea 글자수 카운트 입니다.
1
|
| 368 | |
| 12368 |
jQuery
ifrmae 자동 리사이즈 jQuery 입니다.
|
| 12367 |
jQuery
슬라이딩 형태로 보여주기 입니다.
|
| 12366 |
jQuery
라인 그래프 그리기 입니다.
|
| 12365 |
jQuery
콤보박스관련 플러그인
|
| 12363 |
MySQL
MySQL 기본 명령어 정리 입니다.
1
|
| 12362 |
MySQL
MySQL 한글 정렬하기 입니다.
|
| 12361 |
MySQL
그림을 MySQL DB에 저장하는 방법
|
| 12360 |
JavaScript
엑셀 흉내내기
|
| 12359 | |
| 12358 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기