개념이 안 잡혀서 그러는데요........

[오리스프]

<table border="1" width="610">
<tr>
<td width="413" colspan="2" height="48">&nbsp;</td>
<td width="181" height="48">&nbsp;</td>
</tr>
<tr>
<td width="334" height="45">&nbsp;</td>
<td width="73" height="45">&nbsp;</td>
<td width="181" rowspan="2" height="113">&nbsp;</td>
</tr>
<tr>
<td width="413" colspan="2" height="66">&nbsp;</td>
</tr>
</table>

위의 자료를
DIV로 .... 만들려고하는데요.... 어떻게 해야되나요?
개념이 안 잡혀서요.
개념좀 잡게.... 사이트나 책좀 소개해주세요^^;

[소프트원트]

<table border="1" width="610">
<tr>
<td width="413" colspan="2" height="48">&nbsp;</td>
<td width="181" height="48">&nbsp;</td>
</tr>
<tr>
<td width="334" height="45">&nbsp;</td>
<td width="73" height="45">&nbsp;</td>
<td width="181" rowspan="2" height="113">&nbsp;</td>
</tr>
<tr>
<td width="413" colspan="2" height="66">&nbsp;</td>
</tr>
</table>

위의 자료를
DIV로 .... 만들려고하는데요.... 어떻게 해야되나요?
개념이 안 잡혀서요.
개념좀 잡게.... 사이트나 책좀 소개해주세요^^;

위 테이블을 DIV로 제시한다해도 헤매게 될 것입니다. 이유는 테이블 구조에 너무 익숙해져있기 때문입니다.

일단 아래 링크부터 읽어보세요. 링크에 있는 내용을 수 십번이라도 읽어보세요. 꼭 그래 주셔야 합니다.

http://www.softwant.com/standards/24strategy.php부터 읽어보시기 바랍니다.

다음으로 모질라 파이어폭스를 사용하신다면, Web Developer라는 확장기능을 설치하세요.

Web Developer 확장기능

설치를 했으면 브라우저 도구막대에 [Outline] 메뉴에서 Outline Block Level elements를 사용해보세요. 스타일시트로 작성된 사이트라면 어떤 구조로 디자인되어 있는 지 알 수 있습니다.

웹표준에 근거하여 만든 사이트의 구조를 이해하셔야 합니다.

그렇지않으면 헤매게 되고 결국 다시 테이블로 돌아가려 하게 됩니다. 성급하게 접근하지 마시고 여유있게 접근하세요.

[소프트원트]

링크에 있는 큰 그림을 그린다는 것을 이해할 수 있는 지요?

모든 웹페이지에는 기본 구조라는 게 있을 것입니다. 가장 기본적인 구조가 행으로 3단 구조입니다.

====================
머리말 : 로고와 링크 정보
====================

본문 내용

====================
꼬리말 : 기업의 주소, 관리자 메일
====================

이것은 링크에도 설명되어 있지만, div로 감싼다고 했죠.

====================
머리말 : 로고와 링크 정보 ---> ◀div class/id=header▶대가리◀/div▶
====================

본문 내용 -------->◀div class/id=main-contents▶몸통◀/div▶


====================
꼬리말 : 기업의 주소 -------> ◀div class/id=footer▶다리◀/div▶
====================

위 내용을 보면, 각각을 의미있는 구조로써 나누고 있습니다. class/id를 통해서 그것을 확인할 수 있습니다. 그러나 테이블에서는 주석을 달면 알 수 있지만, 의미있는 단위가 아닙니다. 그냥 td로 셀을 구성할 뿐이겠죠.

본문 내용에서는 좌우측 메뉴가 있을 수 있습니다. 우리의 좌우 팔이겠죠. 여기에 배너가 들어갈 수 있고 메뉴가 있을 수 있습니다.

그러면 몸통에 이들 좌우측 메뉴를 어떻게 결합시킬까요? 그것은 몸통을 좌우 팔을 포함하여 보느냐, 아니면 별도로 구분시켜야할 신체구조로 보느냐에 따라 다를 것입니다.

Code: Select all

◀div class/id=main-contents▶

   ◀div class/id=left-hand▶좌측 팔◀/div▶ 

몸통 

   ◀div class/id=right-hand▶우측 팔◀/div▶

◀/div▶ 

Code: Select all

◀div class/id=left-hand▶좌측 팔◀/div▶
◀div class/id=main-contents▶몸통◀/div▶
◀div class/id=right-hand▶우측 팔◀/div▶

이를 이제 스타일시트를 입혀주는 작업을 하는 것입니다. 위의 것을 어떻게 보느냐에 따라 스타일시트를 적용하는 방법이 달라집니다.

스타일시트를 적용하지 않은 상태에서, 브라우저로 보았을 때 최상단 좌측에서 우측으로 그리고 상단에서 하단으로 순차적으로 나열되어야 합니다. 물론 이것이 반드시 의무적으로 그래야 한다는 것은 아닙니다. 그러나 정보가 의미있는 구조를 갖도록 해야한다는 측면에서 그렇다는 것입니다. 때론 검색엔진을 고려해야 하기 때문에, 메뉴보다 본문 내용이 앞으로 배열되어야 할 경우가 있습니다.

그러나 테이블 구조에서는 이것이 불가능하며 검색엔진에 비친화적일 수 밖에 없는 이유입니다.

이를 이해하였으면, 30%는 해결된 것입니다.

다음은 스타일시트를 이해해야 합니다. 특히 박스모델을 이해하셔야 합니다. 이 과정에서 머리에 쥐가 나거나 스팀 나올 것입니다.

그래서 실무에서 바로 써먹겠다고 달려들지 마세요. 개인적인 홈페이지가 있다면 이를 가지고 노셔야 합니다. 논다(!!!!!!!!!!!!!!!!!)고 이야기를 했습니다. 즐거운 마음(?).. 이 무슨 엉뚱한 이야기냐고 하시겠지만, 그렇습니다.

제대로 된 것같은 사이트가서 앞서 올린 글에 [Web Developer]확장기능 가지고 돌아다녀 보세요. 확장기능 좌측에 보면, [Disable>Disable Style>All Styles]을 가지고 확인해보세요.

한 동안은 이 확장기능을 가지고 해당 웹사이트를 가지고 노새요. 아마도 많은 것을 이해할 수 있을 것입니다.

[박민권]

설치를 했으면 브라우저 도구막대에 [Outline] 메뉴에서 Outline Block Level elements를 사용해보세요. 스타일시트로 작성된 사이트라면 어떤 구조로 디자인되어 있는 지 알 수 있습니다.

저도 이것을 강추합니다.
CSS로 이루어진 사이트를 찾아보세요.
국내 사이트중 CSS로 이루어진 큰 사이트는 'GS칼텍스'가 있습니다.
http://www.gscaltex.co.kr/ (자꾸 광고하는 것 같네 ㅡㅡ;)

이런 곳들을 찾아보시고 소프트원트님이 추천하신 확장기능으로
레이아웃이 어떻게 구성되었는지 확인하시면 도움이 되실 겁니다.

테이블로 레이아웃 구성하는 것과는 틀리다는 것을 아시게 될 겁니다.

해외의 CSS로 이루어진 사이트를 찾아보는 것도 좋지만 아마 많은 분들이
'해외의 사이트는 국내의 스타일과 틀려서 CSS로 가능한 걸꺼야'
라는 생각을 가질 것이라 생각합니다.

국내의 웹스타일도 아무 문제없이 CSS로 구현 가능합니다.
힘내세요.

[소프트원트]

CSS로 이루어진 사이트를 찾아보세요.
국내 사이트중 CSS로 이루어진 큰 사이트는 'GS칼텍스'가 있습니다.
http://www.gscaltex.co.kr/ (자꾸 광고하는 것 같네 ㅡㅡ;)

최근에 phpschool에 글올리면서, 느끼는 것이 사례의 부족이라는 생각이 드내요.
특히 국내에서는 규모있는 사이트의 개편은 간헐적이니 사례가 알려지면 좋지않나 싶습니다.

박민권님은 웹사이트 개발쪽에 계속 있으시니, 국내 기업중 웹표준에 따라 제작된 순수 CSS로만 제작된 사이트 정보를 수집해보는 것은 어떻겠는 지요?

http://www.weeklystandards.com/

위클리스탠더드같은 것은 아니더라도 화면캡처 정보를 올릴 수 있으면 좋을 듯싶은데..

[빛알갱이]

국내 사이트중 CSS로 이루어진 큰 사이트는 'GS칼텍스'가 있습니다.
http://www.gscaltex.co.kr/ (자꾸 광고하는 것 같네 ㅡㅡ;)

박민권님, 회이팅 !! 이런 곳 있으면 많이 광고해 주세요. GS 칼텍스 웹 사이트에 평가하는 곳이 있어서 모두 별 세 개를 주었습니다

[hyeonseok]

CSS로 이루어진 사이트를 찾아보세요.
국내 사이트중 CSS로 이루어진 큰 사이트는 'GS칼텍스'가 있습니다.
http://www.gscaltex.co.kr/ (자꾸 광고하는 것 같네 ㅡㅡ;)

아..이건 좀 부끄러운 결과물인데...-_-;

[박민권]

CSS로 이루어진 사이트를 찾아보세요.
국내 사이트중 CSS로 이루어진 큰 사이트는 'GS칼텍스'가 있습니다.
http://www.gscaltex.co.kr/ (자꾸 광고하는 것 같네 ㅡㅡ;)

아..이건 좀 부끄러운 결과물인데...-_-;

잉? 현석님 작품이었어요?
현석님 같은 분이 또 있구나 싶었는데 결국 현석님 작품이었군요. ㅡㅡ;

[nmind]

CSS로 이루어진 사이트를 찾아보세요.
국내 사이트중 CSS로 이루어진 큰 사이트는 'GS칼텍스'가 있습니다.
http://www.gscaltex.co.kr/ (자꾸 광고하는 것 같네 ㅡㅡ;)

아..이건 좀 부끄러운 결과물인데...-_-;

전체적으로 페이지 레이아웃 구성하신 분이랑 컨텐츠 제작하신 분이 다른 것 같더군요.