테이블이없는 레이아웃 열림 새로운 디자인 프론티어
레이아웃을 위해 테이블을 사용하지 않는 많은 이유가 있습니다 . CSS를 사용하여 레이아웃을 수행하기가 어렵 기 때문에 사람들이 계속해서 사용하는 이유 중 가장 빈번한 이유 중 하나입니다. CSS 스크립팅은 학습 곡선을 수반하지만, CSS 레이아웃을 수행하는 방법을 이해하면 얼마나 쉽게 사용할 수 있는지 놀라게 될 수 있습니다. 그리고 일단 배우면 CSS를 사용하지 않는 사람들이 두 번째로 많이 사용하는 이유를 다룰 것입니다. "테이블을 작성하는 것이 더 빠릅니다."테이블을 알고 있기 때문에 더 빠르지 만 CSS를 배운다면 더 빨리 그것으로.
CSS 포지셔닝의 브라우저 지원
CSS 위치 지정은 모든 최신 브라우저 에서 잘 지원됩니다. Netscape 4 또는 Internet Explorer 4 용 사이트를 구축하지 않는 독자는 CSS 배치 웹 페이지를 보는 데 문제가 없어야합니다.
페이지를 만드는 방법 다시 생각
표를 사용하여 사이트를 구축 할 때는 표 형식으로 생각해야합니다. 즉, 셀과 행 및 열의 관점에서 생각하고 있습니다. 귀하의 웹 페이지는이 방법을 반영합니다. CSS 포지셔닝 디자인으로 옮길 때 레이아웃 측면에서 원하는 위치에 컨텐츠를 배치 할 수 있기 때문에 컨텐츠 측면에서 페이지를 생각하게됩니다.
웹 사이트마다 구조가 다릅니다. 효과적인 페이지를 만들려면 지정된 페이지의 구조를 평가 한 다음 해당 페이지의 콘텐츠를 지정하십시오. 예제 페이지에는 다섯 개의 별개 섹션이 포함될 수 있습니다.
- 헤더 . 홈 배너 광고, 사이트 이름, 탐색 링크, 기사 제목뿐만 아니라 몇 가지 다른 것들.
- 오른쪽 열 . 이것은 검색 상자, 광고, 비디오 박스 및 쇼핑 영역이있는 페이지의 오른쪽에 있습니다.
- 콘텐츠 . 기사, 블로그 게시물 또는 쇼핑 카트의 텍스트 - 페이지의 고기와 감자.
- 인라인 광고 . 콘텐츠 내의 광고가 인라인합니다.
- 바닥 글 . 하단 탐색, 작성자 정보, 저작권 정보, 하단 배너 광고 및 관련 링크
5 가지 요소를 테이블에 배치하는 대신 HTML5 섹션 요소를 사용하여 콘텐츠의 다른 부분을 정의한 다음 CSS 위치 지정을 사용하여 페이지에 콘텐츠 요소를 배치합니다.
콘텐츠 섹션 식별
사이트의 여러 콘텐츠 영역을 정의한 후에는 HTML에 콘텐츠를 작성해야합니다. 일반적으로 섹션을 순서에 관계없이 배치 할 수 있지만 페이지의 가장 중요한 부분을 먼저 배치하는 것이 좋습니다. 이 접근법은 검색 엔진 최적화에도 도움이 될 것입니다.
위치를 설명하기 위해 세 개의 열은 있지만 머리글이나 바닥 글은없는 페이지를 상상해보십시오. 위치 지정을 사용하여 원하는 레이아웃을 만들 수 있습니다.
3 열 레이아웃의 경우 왼쪽 열, 오른쪽 열 및 내용의 세 섹션을 정의하십시오.
이 섹션은 내용에 대한 ARTICLE 요소와 두 개의 열에 대한 두 개의 SECTION 요소를 사용하여 인스턴스화됩니다. 모든 것은 또한 그것을 식별하는 속성을 가질 것이다. id 속성을 사용하면 각 id에 고유 한 이름을 부여해야합니다.
콘텐츠 위치 지정
CSS를 사용하여 ID 요소의 위치를 정의하십시오. 다음과 같이 스타일 정보에 위치 정보를 저장하십시오.
#content {
}
이러한 요소의 콘텐츠는 가능한 한 많은 공간, 즉 현재 위치 또는 페이지 너비의 100 %를 차지합니다. 고정 폭으로 강요하지 않고 섹션의 위치에 영향을 주려면 패딩 또는 여백 특성을 변경하십시오.
이 레이아웃의 경우 두 열을 고정 너비로 설정 한 다음 위치 절대 값을 설정하여 HTML에있는 위치의 영향을받지 않도록합니다.
# left-column {
위치 : 절대;
왼쪽 : 0;
너비 : 150px;
margin-left : 10px;
margin-top : 20px;
color : # 000000;
패딩 : 3px;
}
# right-column {
위치 : 절대;
왼쪽 : 80 %;
상단 : 20px;
너비 : 140px;
패딩 - 왼쪽 : 10px;
z- 색인 : 3;
color : # 000000;
패딩 : 3px;
}
그런 다음 내용 영역에 대해 오른쪽과 왼쪽에 여백을 설정하여 내용이 두 개의 외부 열과 겹치지 않도록합니다.
#content {
상단 : 0 픽셀;
여백 : 0px 25 % 0 165px;
패딩 : 3px;
color : # 000000;
}
HTML 테이블 대신 CSS를 사용하여 페이지를 정의하는 것은 좀 더 기술적 인 기술을 필요로하지만보다 유연하고 반응이 빠른 디자인과 나중에 페이지를 구조적으로 쉽게 조정할 수 있다는 장점이 있습니다.