구조적 HTML 짜기

일찍 일어나는 새가 CSS를 잡는다: 구조적 HTML 계획 By Virginia DeBolt
Cascading Style Sheet로 전환하는데 어려움을 겪고 있습니까? CSS를 조금 사용하지만 완벽한 CSS로의 전환은 할 수 없습니까? 당신의 문제는 아마도 Cascading Style Sheet를 웹 페이지를 만드는 과정에서 먼저 충분히 생각하지 않은 것일 겁니다. 당신의 웹 페이지가 어떻게 보일 것인지 생각을 시작하기 전에, 당신은 그 페이지의 의미적이거나 구조적인 내용에 대해서 생각해서 그 HTML이 "CSS-준비상태"가 되도록 해야합니다. 이 문서는 CSS를 위해 구조적으로 준비된 HTML을 처음 만드는 것으로 당신이 프로젝트를 시작하는데 도움을 줄 것입니다. CSS로 전환을 시도하는 몇몇 이들을 괴롭히는 두번째 문제는 그들이 cellpadding, hspace, or align="left" 같이 친숙한 HTML 표현 속성을 CSS의 동일한 표현으로 바꾸는데 익숙하지 못하다는 것입니다. CSS를 위한 HTML을 어떻게 구조화 하는지 배운 후에, 이 친숙한 HTML 속성들을 CSS의 속성으로 어떻게 대체할 수 있는지 이해할 수 있게 도와줄 표를 보여줄 것입니다. 구조적 생각 우리 중 많은 사람들은 우선 "보이는 것"을 생각하고, 그것을 이루기 위해 어떤 이미지, 폰트, 색상 계획, 그리고 그래픽 디자인 속성을 사용해야 하는지 생각하는 것으로 웹페이지 만드는 것을 배웠습니다. 우리는 포토샵이나 파이어웍스를 실행한 후 페이지가 보였으면 하는 바에 정확하게 들어맞을 때까지(픽셀단위로) 작업했습니다. 그런 계획을 가졌을 때, 우리는 HTML을 디자인의 완벽한 픽셀 렌더링으로 만들기 위해 노력하기 시작했습니다. 만약 당신의 HTML 페이지가 CSS-준비상태(혹은 CSS-친숙한 상태)가 되기를 원한다면 그런 "보이는 것"에 대한 생각을 우선 집어 던지고 그 페이지가 가지고 있는 내용의 의미나 구조에 대해 생각하는 것으로 당신의 프로세스를 시작해야 합니다. 보이는 것은 중요하지 않습니다. 당신이 이 문장에 기절해서 쓰러지기 전에, 설명을 하겠습니다. 잘 구조화된 HTML 페이지는 어떤 것으로도 완벽하게 보여질 수 있답니다. CSS Zen Garden은 HTML 페이지가 진짜 어떤 것으로도 보여질 수 있다는 것을 증명하여 웹디자인의 혁명을 일으켰습니다. 이 CSS Zen Garden이 우리를 CSS가 단순한 HTML 페이지가 어떤 식으로도 표현할 수 있게 한다는 것을 알 수 있도록 해주었습니다. HTML은 더이상 단순히 컴퓨터 모니터를 위한 것이 아닙니다. 당신이 포토샵이나 파이어웍스로 만든 훌륭한 화면은 PDA나 핸드폰이나 청각 스크린 리더 같은데서는 전혀 동작 안 할 수도 있습니다. 그렇지만 잘 구조화된 HTML 페이지는 어디로든 갈 수 있고, 어느 인터넷 가능한 장비에서 동작하고, CSS 스타일 시트로 장비에 최적화 된 방식으로 스타일 될 수 있습니다. 생각을 시작 하세요 시작점은 구조적입니다. 몇몇 사람은 의미적이라고도 합니다. 이 용어들의 의미는 당신이 연관된 의미의 블록으로서, 더 간단히 콘텐츠 블록으로서 당신의 콘텐츠를 생각할 필요가 있다는 것입니다. 당신의 다양한 콘텐츠 블록이 사용될 목적에 대해 생각하십시오. 그 다음에 당신 콘텐츠의 의미와 목적에 따른 HTML 구조를 설계하십시오. 당신이 앉아서 당신이 웹페이지에서 원하는 구조적인 조각 조각들을 계획했다면, 이런 것처럼 될 수 있을 것입니다. heading with logo and site name main page content global site navigation subsection navigation search form utility area with shopping cart and check out footer with legal stuff HTML 페이지에 구조적 문맥을 제공하는데 사용되는 일반적인 엘리먼트는 div 입니다. 페이지의 구조적 부분을 위한 id를 할당한 div 엘리먼트를 사용하십시오. 당신의 주요 구조적 콘텐츠 블록은 이렇게 될 수 있을 것 입니다: <div id="header"></div>
<div id="content"></div>
<div id="globalnav"></div>
<div id="subnav"></div>
<div id="search"></div>
<div id="shop"></div>
<div id="footer"></div> 이건 레이아웃이 아니고, 구조입니다. 이것은 콘텐츠 블록으로 정보를 의미적으로 체계화 한 것입니다. 일단 당신이 구조에 필요한 것을 이해하면, 적당한 컨텐츠를 페이지의 적당한 부분에 추가하는 것은 자동으로 됩니다. div는 심지어 다른 div까지 어떤 것이든 포함할 수 있습니다. 당신의 주된 컨텐츠 블록은 당신의 페이지 헤딩, 문단, 이미지, 테이블, 목록 같은 것들을 만드는데 필요한 HTML 엘리먼트를 포함할 것입니다. 연관된 컨텐츠의 블록의 관점에서 우선 생각하는 것을 통해 당신은 이제 페이지의 어디에서나 당신이 원하는 어떤 방식으로도 위치시키고 스타일 할 수 있는 구조적 HTML 엘리먼트를 가지게 되었습니다. 당신의 HTML에서 각 컨텐츠 블록은 페이지에 개별적으로 위치되거나 색상, 폰트, 마진, 배경, 패딩, 정렬 등을 지정할 수 있습니다. 좋습니다. 지금입니다. 당신은 마침내 레이아웃에 대해, 당신의 사이트의 "보여지는 것"에 대해 생각할 준비가 되었습니다. 예를 들어 globalnav는 왼쪽이나 오른쪽에 수평 컬럼이 될 수도 있고, 헤더 밑에 바로 수평으로 올 수도 있습니다. 이것은 어느 위치나 어느 모양이나 될 수 있습니다. 문맥적 셀렉터는 아름다운 것입니다. id 속성을 사용하여 당신의 구조적 컨텐츠 블록을 셋업하는 것은 문맥적 셀렉터를 위한 CSS-준비상태를 만들어 줍니다. 이렇게 id를 가진 div들은 헤딩인지 목록인지 이미지인지 링크인지 아니면 문단인지 페이지의 개별적인 엘리먼트를 위한 정확하고 적절한 셀렉터를 쓸 필요가 있는 문맥을 만듭니다. 예를 들어, #header img라고 쓰면 #content img 와는 완전히 다른 속성이 적용됩니다. 또 다른 예는 당신이 페이지의 다양한 부분에서 #globalnav a:link, or #subnav a:link, or #content a:link. 같은 방법으로 링크를 구분할 수 있다는 것입니다. 또는 #content p and #footer p를 이용하여 centent와 footer에서 다른 방법으로 문단을 보여줄 수도 있습니다. 구조적인 관점에서 당신의 페이지는 이미지와 링크, 리스트, 문단을 포함하고 있습니다. 이 엘리먼트는 렌더링을 위해 어떤 인터넷 장비를 사용하던지 간에, 어떤 스타일 시트를 사용하던지 간에 상관없이 남아있습니다. 조심스럽게 구조화된 HTML 페이지는 아주 심플하고 군더더기 없습니다. HTML의 각 속성은 논리적으로 구조적 목적을 위해 사용됩니다. 문단을 들여쓰기 하기 위해 진짜 인용문이 아닌 곳에 blockquote 태그를 사용하는 것 대신에, 그냥 단순히 margin을 이용해 들여쓰기 한 p 태그를 사용할 수 있습니다. p는 구조고 margin은 보여지기 위한 선택입니다. 전자는 HTML에 속해있고 후자는 CSS에 속해있는 겁니다. 잘 구조화된 페이지는 태그 안에 보여주기 위한 속성을 거의 쓰지 않은 HTML 엘리먼트를 사용합니다. 코드는 간결합니다. <table width="80%" cellpadding="3" border="2" align="left"> 를 쓰는 대신에 단순히 HTML에 <table> 만 쓰면 됩니다. table 엘리먼트를 위한 보여지는 것의 규칙은 CSS로 이동됩니다. 당신은 CSS를 가진 테이블에 당신이 원하는 어떤 모양도 만들어낼 수 있습니다. 그렇지만 구조적인 관점으로 테이블은 단지 테이블이지 그 이상은 아닙니다. 기본 컨셉을 가지고 그것을 실행해 봅시다. 이 기본 구조 컨셉화는 컨텐츠 블록을 위한 당신의 특정한 요구에 적합하게 커질 수 있을 겁니다. 당신이 CSS 스타일 페이지를 살펴본다면, div 속성이 종종 다른 여러개의 div 속성을 포함하고 있다는 것을 알게 될 것입니다. 당신은 "내용을 포함한" div, 또는 "div를 감싸는" div와 다른 타입의 포개는 div들을 볼 수 있습니다. 아래를 보세요. <div id="navcontainer"> <div id="globalnav"> <ul>a list</ul> </div> <div id="subnav"> <ul>another list</ul> </div> </div> 이 예제와 같이 포개지는 div 엘리먼트는 구조적으로는 두개의 리스트일 뿐인 것을 표현하는데 CSS 규칙을 위한 많은 옵션을 가능하게 합니다. 예를 들어 #navcontainer와 #globalnav를 보겠습니다. #navcontainer 규칙은 중앙 정렬인데도 #globalnav 규칙은 왼쪽 정렬일 수 있습니다. 그리고 물론, 구조적 문맥에 사용된 #globalnav ul 이나 #globalnav li 을 위한 표현도 설정할 수 있습니다. #subnav리스트를 위한 규칙 또한 보여지는 관점에서는 완벽하게 다르게 할 수 있습니다. 대체 부분 다음 표는 친숙했던 HTML을 대체할 수 있는 동일한 속성의 CSS를 보여줍니다. HTML attributes and the equivalent CSS properties HTML Attributes CSS Properties Notes align="left"
align="right" float: left;
float: right; With CSS anything can be floated: images, paragraphs, divs, headings, tables, lists, etc. When you float anything, be sure to assign a width to the element you floated. marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; With CSS, margin can be set for any element, not just the body element. More importantly, margins can be set individually for the top, right, bottom and left of any element. vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f; In HTML, link colors were set as an attribute of the body tag and applied uniformly to every link on the page. Using descendant selectors in CSS, link colors can be set to different values in different parts of a page. bgcolor="#FFFFFF" background-color: #fff; In CSS, background-color can apply to any element, not just body and table. bordercolor="#FFFFFF" border-color: #fff; Any element can have a border, the colors of which can be set individually for top, right, bottom and left if desired. border="3"
cellspacing="3" border-width: 3px; With CSS, any element can have a border. Borders can be set uniformly as you see them in the table on this page, or the size, style and color of borders can be set individually for the top, right, bottom and left (or any combination thereof) of any element. When setting the borders for tables, use the table, td or th selectors. When setting the spacing for tables, use the table, td, and th selectors. If you want a single border line between adjacent table cells, use border-collapse: collapse; Border can replace hr when used only as border-top or border-bottom on an element. A rule for border-right and border-bottom can simulate a drop shadow. <br clear="left">
<br clear="right">
<br clear="all"> clear: left;
clear: right;
clear: both; Many two and three column layouts use float to position elements on a page. If part of your presentation depends on background colors or images behind floated elements, you may want to use clear. See the references for "Understanding how Float Behaves" following this chart. cellpadding="3"
vspace="3"
hspace="3" padding: 3px; With CSS, any element can have padding. Padding can be set uniformly or individually for the top, right, bottom and left of any element. Padding is transparent, so background-color or background-image will shine through.