위에 첨부된 이미지에서 처럼~
최신글의 가로나 세로로 정렬해보려고 합니다.
쉽게 알고 있는...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에서) 수평정렬되는걸 원하실 겁니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12438 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 12437 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 12436 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 12435 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 12434 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 12433 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 12432 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 12431 |
MySQL
대소문자 데이터 조회하기
|
| 12430 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 12429 | |
| 12428 |
PHP
신문 기사를 긁어오기 입니다.
|
| 12427 |
JavaScript
시도, 구군, 동 주소 select
|
| 12426 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 12425 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 12424 |
PHP
rss 읽어오기 입니다.
|
| 12423 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
| 12422 | |
| 12421 |
JavaScript
키보드,마우스 등 불펌방지 입니다.
|
| 12420 |
JavaScript
해상도에 따라 서로 다른 페이지로 접속 하기 입니다.
|
| 12419 |
JavaScript
특정페이지에서 자동으로 새로고침 하기 입니다.
|
| 12418 |
JavaScript
마우스 오버시 이미지 안쪽에 테두리주기
|
| 12417 |
node.js
git 사용메뉴얼 보면 깝깝 하네요
|
| 12416 | |
| 12415 | |
| 12414 |
JavaScript
간결한 레이어 메뉴 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기