웹접근성과 편리성 향상을 위한 코딩방법 문의 정보
웹접근성과 편리성 향상을 위한 코딩방법 문의
본문
사용된 이미지
아래 소스에는 테이블이 하나 있습니다.
테이블을 없애려면 어떻게 하면 될까요?
리스트 태그를 사용해서 플로트 left 로 밀어버리면
레이아웃이 깨지고....
h1 태그는 줄바꿈이 되어 버리고
span 태그는 좌우 정렬이 안되고...
div 태그를 두개 더 추가해서 정렬해야 할까요?
div 태그를 추가하지 않고 테이블을 대신할 방법이 없을까요?
이틀째 이 문제로 고민중이네요..훔..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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>
0
댓글 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는 우측정렬
방법이 없을까요? 다시한번 답변 부탁드립니다.