웹접근성과 편리성 향상을 위한 코딩방법 문의
사용된 이미지
아래 소스에는 테이블이 하나 있습니다.
테이블을 없애려면 어떻게 하면 될까요?
리스트 태그를 사용해서 플로트 left 로 밀어버리면
레이아웃이 깨지고....
h1 태그는 줄바꿈이 되어 버리고
span 태그는 좌우 정렬이 안되고...
div 태그를 두개 더 추가해서 정렬해야 할까요?
div 태그를 추가하지 않고 테이블을 대신할 방법이 없을까요?
이틀째 이 문제로 고민중이네요..훔..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#footer { /* 카피라이터 영역 */
margin: 0px;
clear:both;
text-align: center;
color: #666;
}
.roundbox{
position:relative;
}
.corner{
position:absolute;
width:10px;
height:10px;
}
.topleft{
left:0;
top:0;
background-position:-1px -1px;
}
.topright{
top:0;
right:0;
background-position:-12px -1px;
}
.bottomleft{
left:0;
bottom:0;
background-position:-1px -12px;
}
.bottomright{
right:0;
bottom:0;
background-position:-12px -12px;
}
#footbox{
background-color:#eee;
padding:1em;
font-size: 0.9em;
}
#footbox .corner{
background-image:url(type-copyright.gif);
}
-->
</style>
</head>
<body>
<div id="footer">
<div class="roundbox" id="footbox">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" align="left"><img src="003/img/copylogo.gif" width="164" height="46" /></td>
<td align="center">copyright ⓒ 2010 CHOSUN All rights reseverd.</td>
</tr>
</table>
<div class="corner topleft"></div>
<div class="corner topright"></div>
<div class="corner bottomleft"></div>
<div class="corner bottomright"></div>
</div>
</div>
</body>
</html>
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 2개
position:relative 와 absolute 로 처리할수있습니다.
<div class="container">
본문내용
<div class="bg-top"></div>
<div class="bg-bottom"></div>
</div>
본문에서 언급된 리스트 테그는 마크업의미상 부적절하고 h1줄바꿈은 display:inline;으로 처리할수 있고 span정렬문제는 display:block;으로 해결할수있고요
위처럼 하나의 이미지로(스프라이트로) 처리하기 위해서는 여러방법이있지만 예전에 제가 쓴글이 있네요 이걸 참고하는 방법도 갠찮을것 같습니다.
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=20950
물론 이런거보단 css3을 쓰는것을 추천하네요
제가 궁금한것은 하나의 div 안에서 두개의 내용을 좌우 정렬하는 방법이 궁금했던건데요. 가령
<div>내용1 내용2</div>
내용1은 좌측정렬, 내용2는 우측정렬
방법이 없을까요? 다시한번 답변 부탁드립니다.