★ 웹2.0방식으로 정렬하려면 어떻게 하죠? 쉬운 질문임.. 정보
★ 웹2.0방식으로 정렬하려면 어떻게 하죠? 쉬운 질문임..
본문
저는 지금까지 위의 그림처럼 컨텐츠를 배치할 때 구시대적인 방법으로 table태그를 이용해서 배치해 왔거든요....
아시죠?
<table border="1" align="center" cellspacing="0" bordercolordark="white" bordercolorlight="black" width="499">
<tr><td width="240" height="149">
<p align="center">최근게시물</p></td>
<td width="249" height="149">
<p align="center">아이프레임</p></td></tr>
</table> 이런 식으로 하는 거...
그런데 css 등을 이용한 웹2.0방식에서는 이렇게 하는 게 아니라네요...
위의 내용을 똑같이 하면서 정규식에서 벗어나지 않게 하려면 어떻게 소스를 만들면 될까요?
댓글 전체
위소스랑 비슷하게 <DIV>테그를 이용해서 만들수있느데요
네이놈에서 웹표준치시면 많은 결과물을 보실수있습니다.
위소스는
<style>
#box{border:1px #999999 solid;width:500px;}
#box .left{float:left;width:240px;height:149px;text-align:center;padding:60px;}
#box .right{float:left;width:249;height:149px;text-align:center;padding:60px;}
</style>
<div id="box">
<div class="left">최근게시물</div>
<div class="right">아이프레임</div>
</div>
이렇게표현해도 같은결과입니다.
장점이라면 코드라인이적어서 용약이적고 속도가 빠르고 코드수정이 용의하고 가시성이좋아서 작업속도가빠르다는거
가장 잘반영된 사이트는 daum.net 같네요
네이놈에서 웹표준치시면 많은 결과물을 보실수있습니다.
위소스는
<style>
#box{border:1px #999999 solid;width:500px;}
#box .left{float:left;width:240px;height:149px;text-align:center;padding:60px;}
#box .right{float:left;width:249;height:149px;text-align:center;padding:60px;}
</style>
<div id="box">
<div class="left">최근게시물</div>
<div class="right">아이프레임</div>
</div>
이렇게표현해도 같은결과입니다.
장점이라면 코드라인이적어서 용약이적고 속도가 빠르고 코드수정이 용의하고 가시성이좋아서 작업속도가빠르다는거
가장 잘반영된 사이트는 daum.net 같네요
소스 감사합니다.
그런데, 항상 저렇게 높이는 절대높이로 일일이 지정해야 하나봐요?
절대위치가 아니라 상대위치로 하려면 복잡해지겠넹.. 흑흑....
그런데, 항상 저렇게 높이는 절대높이로 일일이 지정해야 하나봐요?
절대위치가 아니라 상대위치로 하려면 복잡해지겠넹.. 흑흑....
상대위치라면 50%이거말씀하신건가요?
상대위치로하면 복잡해지기때문에 화면에 보여지는것도 느리게보여지죠..
내용이 늘어나면 길이도 늘어나기는합니다.
상대위치로하면 복잡해지기때문에 화면에 보여지는것도 느리게보여지죠..
내용이 늘어나면 길이도 늘어나기는합니다.
저같은 경우에는 float보다는 position을 추천합니다만..
테이블 사용하셔도 상관은 없다고 봅니다~ 아이프레임은 좀 아니지만요~ㅎ
테이블을 사용하는것이 잘못된것이 아니라..
테이블의 속성 등을 아래처럼 해야되는거죠
table align=center 요런형식의 표현은 안된다고 하네요~ㅋ
물론 웹표준을 준수하려면.. 문서구조에 맞는 태그를 사용해야 하지만요;;
<table style="width:499px; border:1px solid black; text-align:center;">
<tr>
<td style="width:240px; height:149px;">
<!--최근게시물 부분-->
<ul><li>최근게시물 내용 1~ 여긴 스킨 따라 틀리죠?</li></ul>
</td>
<td style="width:240px; height:149px;">
<!--아이프레임 부분-->
</td>
</tr>
</table>
------------------------------------------------------------------------
물론 저같은 경우는 테이블보다는 div로 레이아웃을 잡는 편이지만요..
테이블이 더 편하다고 생각하는 때는 테이블로 하기 때문에
테이블 코딩으로 설명드렸습니다~~^ㅇ^;;
테이블 사용하셔도 상관은 없다고 봅니다~ 아이프레임은 좀 아니지만요~ㅎ
테이블을 사용하는것이 잘못된것이 아니라..
테이블의 속성 등을 아래처럼 해야되는거죠
table align=center 요런형식의 표현은 안된다고 하네요~ㅋ
물론 웹표준을 준수하려면.. 문서구조에 맞는 태그를 사용해야 하지만요;;
<table style="width:499px; border:1px solid black; text-align:center;">
<tr>
<td style="width:240px; height:149px;">
<!--최근게시물 부분-->
<ul><li>최근게시물 내용 1~ 여긴 스킨 따라 틀리죠?</li></ul>
</td>
<td style="width:240px; height:149px;">
<!--아이프레임 부분-->
</td>
</tr>
</table>
------------------------------------------------------------------------
물론 저같은 경우는 테이블보다는 div로 레이아웃을 잡는 편이지만요..
테이블이 더 편하다고 생각하는 때는 테이블로 하기 때문에
테이블 코딩으로 설명드렸습니다~~^ㅇ^;;
좋은 의견들이 많이 올라오네요. 답변들 주셔서 정말 감사합니다. 조금 자신이 생기는데요! ^^
솔직히 테이블보다는 css를 이용하는 것이 간결하다는 느낌이 있긴 하죠...
그런데...
아이프레임은 웹표준으로 한다면 어떻게 표현해야 하징?
본래 아이프레임이란 것이 익스플로러 전용이라 네스케이프도 나중에야 지원했었지만
그래도 이게 편할 때도 있는데 말이죠...
솔직히 테이블보다는 css를 이용하는 것이 간결하다는 느낌이 있긴 하죠...
그런데...
아이프레임은 웹표준으로 한다면 어떻게 표현해야 하징?
본래 아이프레임이란 것이 익스플로러 전용이라 네스케이프도 나중에야 지원했었지만
그래도 이게 편할 때도 있는데 말이죠...