테이블이여 안녕! css 가 온다!
안녕하세요. 제가 요즘 외국사이트를 돌아댕기다가 몇가지 특이한 테크닉들을
발견해서.. 이렇게 글올립니다. 이는 XHTML 이라는 것과 CSS layout 입니다.
제가보기엔 국내 유수 포털사이트나 기타 웹디자인 제작업체조차도 아직 CSS layout 을 사용하지
않고있으나, adobe(어도비)나 외국의 유수 웹디자인 업체들은 현재 테이블 레이아웃을
사용하지 않고 css layout 을 도입했으며, 기존의 테이블 레이아웃을 css 레이아웃으로 변경하는
노력을 하고 있습니다.
2003년 Seminars SANFRANCISCO 2003 에서는 (Seybold365.com) 이 기술을 장편의 프리젠테이션으로
설명해놓았더군요. 또한 이미 여러 디자이너들이 이에관한 글을 연재하기 시작했습니다.
그러나 저는 국내에서 이러한 논의가 이루어지는것을 보지 못했고 아직도 테이블 레이아웃에
상당부분 의존하고있다고 봅니다.
1. 소개
xhtml 의 헤더는 다음과 같이 시작됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
xml 의 약간 이전판이며 dtd 파일을 씁니다. dtd 파일은 w3c 에서 끌어오는듯합니다.
seybold 세미나나 css layout 찬양자들은 다음과 같은 장점을 열거합니다.
링크 : http://www.hotdesign.com/seybold/index.html
Why tables for layout is stupid:
Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for
designers to have a grid upon which to lay out images and text. Still the most dominant means of designing
visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible,
flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional
or completely table-less layout.
왜 테이블 레이아웃이 멍청한 짓이냐!:
테이블은 html 에 다음과 같은 이유로 존재한다: 테이블로 이루어진 데이터를 표현하기 위해.
그러나 border 를 0 으로 주면 이미지 텍스트의 레이아웃을 잡을수있다(Grid 로. 격자로써)
(중략)
멍청한 테이블 레이아웃을 쓸것이냐 아니면 완벽한 table-less(테이블을쓰지않는) 레이아웃을 쓸것인가?
또한 엄청난 트래픽을 절감할수 있다고 자부하고 있습니다. 제가보기에도 이는 명약관화한 사실인듯합니다.
2. 용법
기존의 스타일시트와 비슷할수도 있으나 문법은 CSS2 를 따라갑니다. 주로 margin 을
이용해서 레이아웃을 결정합니다. nested layout 으로 기존에 표안에 표를 이용해서 잡던 레이아웃을
css 한방으로 레이아우팅이 가능합니다. 저도 이 기능은 놀랍더군요..
표준화 브라우징의 일안으로 여기에 기재된 것은 netscape,explorer 모두 동일하게 보일것입니다.
margin 에 기록된 순서는 up right down left 순입니다.
<style type="text/css">
@import "filename.css";
/* 여기엔 text type 이나 class 를 지정하는 css1 규격의 파일을 삽입합니다 */
body {
margin:20px 20px 0px 20px;
}
/* main 레이아웃을 지정합니다. main 이란 변수명입니다 */
#main {
border:1px solid #000;
background:#fff;
}
/* main 에 nested(종속)된 레이아웃입니다.*/
#main #menu {
border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
width:230px;
background:#eee;
margin:0px 0px 10px 10px;
}
/* p,h1,pre 테그에 대한 margin 정의*/
p,h1,pre {
margin:0px 10px 10px 10px;
}
/* menu 레이아웃 안에 쓰이는 p 테그에 대한 style 정의*/
#menu p { font-size:10px}
</style>
이와같은 것을 <head></head> 테그 안에 삽입합니다. 그리고 <body></body>안에는 다음과같이 합니다.
<div id=main>
<div id=menu>
</div>
</div>
얼핏보면 layer 라 착각할수 있으나 아님을 알수있습니다. xhtml 과 css2 로 가능한 레이아우팅입니다.
이렇게 하면 다음과 같은 레이아웃입니다.
http://glish.com/css/1.asp
엄청나지 않습니까? 테이블 레이아웃처럼 브라우져 해상도에 따라 조절해야하는 경우도 없고 인쇄시
어긋나는 부분도 없습니다. 또한 인쇄전용 style tag 도 지정가능합니다. 이부분은 외국 style 강좌 사이트에
많으니 참고하십시오.
3. 활용가능성 및 마무리
혹자는 " 이게뭐야!? " 라고 외칠수도있고. 이딴거 필요없다고 할수도 있습니다. 그러나 향후 몇년안에
이러한 레이아웃이 국내에 성행할거라 생각되는군요.
http://studio.adobe.com/ (어도비 스튜디오)
http://espn.go.com/ (ESPN 스포츠채널)
http://www.quark.com/ (쿼크 Express 개발사)
http://www.phish.com/
http://www.pga.com/openchampionship/ (pga 골프)
모두 테이블 레이아웃을 전혀 사용하지 않은 사이트입니다. 엄청 깔금하죠!?
죄송한 말씀이지만 영어를 잘 못하면 국내에서 좋은 문서가 나올때까지 기다리는수밖에 없습니다.
Yahoo 에서 css 로 검색해보세요. 좋은사이트 많습니다.
이제 테이블 노가다. 필요없습니다. 제생각에 css style 을 이용해서 레이아웃을 잡으면
유지보수가 현재보다 훨씬 쉬워질거라 생각되네요..
이만 줄입니다.
4. 공부하기
http://glish.com
http://www.w3schools.com/css/
http://www.webreference.com/html/tutorials/
안녕하세요. 제가 요즘 외국사이트를 돌아댕기다가 몇가지 특이한 테크닉들을
발견해서.. 이렇게 글올립니다. 이는 XHTML 이라는 것과 CSS layout 입니다.
제가보기엔 국내 유수 포털사이트나 기타 웹디자인 제작업체조차도 아직 CSS layout 을 사용하지
않고있으나, adobe(어도비)나 외국의 유수 웹디자인 업체들은 현재 테이블 레이아웃을
사용하지 않고 css layout 을 도입했으며, 기존의 테이블 레이아웃을 css 레이아웃으로 변경하는
노력을 하고 있습니다.
2003년 Seminars SANFRANCISCO 2003 에서는 (Seybold365.com) 이 기술을 장편의 프리젠테이션으로
설명해놓았더군요. 또한 이미 여러 디자이너들이 이에관한 글을 연재하기 시작했습니다.
그러나 저는 국내에서 이러한 논의가 이루어지는것을 보지 못했고 아직도 테이블 레이아웃에
상당부분 의존하고있다고 봅니다.
1. 소개
xhtml 의 헤더는 다음과 같이 시작됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
xml 의 약간 이전판이며 dtd 파일을 씁니다. dtd 파일은 w3c 에서 끌어오는듯합니다.
seybold 세미나나 css layout 찬양자들은 다음과 같은 장점을 열거합니다.
링크 : http://www.hotdesign.com/seybold/index.html
Why tables for layout is stupid:
Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for
designers to have a grid upon which to lay out images and text. Still the most dominant means of designing
visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible,
flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional
or completely table-less layout.
왜 테이블 레이아웃이 멍청한 짓이냐!:
테이블은 html 에 다음과 같은 이유로 존재한다: 테이블로 이루어진 데이터를 표현하기 위해.
그러나 border 를 0 으로 주면 이미지 텍스트의 레이아웃을 잡을수있다(Grid 로. 격자로써)
(중략)
멍청한 테이블 레이아웃을 쓸것이냐 아니면 완벽한 table-less(테이블을쓰지않는) 레이아웃을 쓸것인가?
또한 엄청난 트래픽을 절감할수 있다고 자부하고 있습니다. 제가보기에도 이는 명약관화한 사실인듯합니다.
2. 용법
기존의 스타일시트와 비슷할수도 있으나 문법은 CSS2 를 따라갑니다. 주로 margin 을
이용해서 레이아웃을 결정합니다. nested layout 으로 기존에 표안에 표를 이용해서 잡던 레이아웃을
css 한방으로 레이아우팅이 가능합니다. 저도 이 기능은 놀랍더군요..
표준화 브라우징의 일안으로 여기에 기재된 것은 netscape,explorer 모두 동일하게 보일것입니다.
margin 에 기록된 순서는 up right down left 순입니다.
<style type="text/css">
@import "filename.css";
/* 여기엔 text type 이나 class 를 지정하는 css1 규격의 파일을 삽입합니다 */
body {
margin:20px 20px 0px 20px;
}
/* main 레이아웃을 지정합니다. main 이란 변수명입니다 */
#main {
border:1px solid #000;
background:#fff;
}
/* main 에 nested(종속)된 레이아웃입니다.*/
#main #menu {
border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
width:230px;
background:#eee;
margin:0px 0px 10px 10px;
}
/* p,h1,pre 테그에 대한 margin 정의*/
p,h1,pre {
margin:0px 10px 10px 10px;
}
/* menu 레이아웃 안에 쓰이는 p 테그에 대한 style 정의*/
#menu p { font-size:10px}
</style>
이와같은 것을 <head></head> 테그 안에 삽입합니다. 그리고 <body></body>안에는 다음과같이 합니다.
<div id=main>
<div id=menu>
</div>
</div>
얼핏보면 layer 라 착각할수 있으나 아님을 알수있습니다. xhtml 과 css2 로 가능한 레이아우팅입니다.
이렇게 하면 다음과 같은 레이아웃입니다.
http://glish.com/css/1.asp
엄청나지 않습니까? 테이블 레이아웃처럼 브라우져 해상도에 따라 조절해야하는 경우도 없고 인쇄시
어긋나는 부분도 없습니다. 또한 인쇄전용 style tag 도 지정가능합니다. 이부분은 외국 style 강좌 사이트에
많으니 참고하십시오.
3. 활용가능성 및 마무리
혹자는 " 이게뭐야!? " 라고 외칠수도있고. 이딴거 필요없다고 할수도 있습니다. 그러나 향후 몇년안에
이러한 레이아웃이 국내에 성행할거라 생각되는군요.
http://studio.adobe.com/ (어도비 스튜디오)
http://espn.go.com/ (ESPN 스포츠채널)
http://www.quark.com/ (쿼크 Express 개발사)
http://www.phish.com/
http://www.pga.com/openchampionship/ (pga 골프)
모두 테이블 레이아웃을 전혀 사용하지 않은 사이트입니다. 엄청 깔금하죠!?
죄송한 말씀이지만 영어를 잘 못하면 국내에서 좋은 문서가 나올때까지 기다리는수밖에 없습니다.
Yahoo 에서 css 로 검색해보세요. 좋은사이트 많습니다.
이제 테이블 노가다. 필요없습니다. 제생각에 css style 을 이용해서 레이아웃을 잡으면
유지보수가 현재보다 훨씬 쉬워질거라 생각되네요..
이만 줄입니다.
4. 공부하기
http://glish.com
http://www.w3schools.com/css/
http://www.webreference.com/html/tutorials/
'Design' 카테고리의 다른 글
| 도전과응전 ver.1.2 (4) | 2007.07.27 |
|---|---|
| CSS 레이아웃 (2) | 2007.05.03 |
| 쇼핑데이 (2) | 2006.11.28 |
| hawoogi 3차 (1) | 2006.11.16 |
| hawoogi 2차 (1) | 2006.11.16 |