몇 년 전부터 DIV+CSS는 점차적으로 웹 디자인에서 선호되는 방법이 되었습니다. 현재 DIV+CSS는 지난 몇 년 동안 TABLE에서 DIV+CSS로 재구성을 완료했습니다. 년. 저자도 이 방법을 선호하는 웹 디자이너입니다. 저는 3년 동안 div+css를 사용하여 고객에게 디자인을 제공하고 있습니다. 그렇다면 TABLE에 비해 어떤 장점이 있나요? 동료 및 관계자에게 도움이 되기를 바라면서 개인적인 경험과 이해에 대해 이야기해 보겠습니다.
웹 디자인에서 DIV+CSS를 사용하는 가장 큰 장점은 웹 코드를 표준화하고 오래된 테이블 레이아웃 방법을 버리고 콘텐츠, 성능 및 동작 간의 분리를 실현하는 것입니다. html 코드는 더 잘 구조화되고 읽기 및 유지 관리가 더 쉽습니다. 웹페이지 파일 크기도 더 작습니다. 예를 들어, 최근 클라이언트 웹사이트를 재구성한 후 웹페이지 파일 크기가 원래 크기의 절반 미만으로 줄어들어 웹사이트 공간을 덜 차지하고 웹사이트가 더 빨리 열렸습니다.
DIV+CSS와 TABLE 방법은 디자인 면에서 매우 다릅니다. CSS에서 스타일 정의를 용이하게 하기 위해 웹 페이지를 구성하는 요소의 이름을 지정하는 등 신중한 계획이 필요합니다. . 전체 웹사이트의 공통 스타일은 별도의 CSS 파일에 배치할 수 있습니다. 공통 공개 속성에는 웹 페이지 너비, 배경 색상, 배경 이미지, 글꼴 기본 크기, 색상, 링크 스타일 등이 포함됩니다. CSS 파일에서 한 블록에 집중하고 블록 앞에 어떤 웹 페이지 또는 웹 페이지 부분이 있는지 표시하는 것이 가장 좋습니다. 이렇게 하면 CSS 파일의 크기가 줄어들 뿐만 아니라 혼동을 피하고 유지 관리가 더 편리해집니다. 콘텐츠와 스타일을 완전히 분리하기 위해 스타일을 웹 페이지 코드에 삽입해서는 안 된다는 점을 언급할 가치가 있습니다.
DIV+CSS 웹 디자인을 잘 수행하려면 세 가지 사항을 이해해야 합니다.
1. 부동 속성: DIV(레이어)는 기본적으로 전체 행을 차지합니다. 일반적인 2열 또는 다중 열 레이아웃 디자인의 경우 효과를 얻으려면 부동 및 너비 속성을 올바르게 설정할 수 있어야 합니다. 다중 열 레이아웃이 완료된 후 배너를 차지하는 레이어를 따라갈 경우 플로팅 레이어를 지우려면 클리어 속성을 설정해야 합니다.
2. 상자 모드: 레이어에는 너비, 높이, 테두리, 내부 간격 및 외부 간격과 같은 속성이 있습니다. 레이어가 차지하는 실제 공간은 위 속성 값의 합계입니다. 우아한 레이아웃. 아름다운 웹 레이아웃.
3. 레이어 중첩: 숙련된 웹 디자이너는 일반적으로 3개 이하의 레이어를 너무 많이 중첩하는 것은 바람직하지 않다는 것을 알고 있습니다. 너무 많은 중첩은 코드가 복잡하고 중복되고 유지 관리가 어려워지며 작업 속도가 느려집니다. 또한 다중 열 레이아웃에서는 레이어 플로팅을 사용할 수 있으며 임베딩을 위해 전체 IE 레이어를 설정할 필요가 없습니다.
브라우저 호환성 주제를 별도로 언급하십시오. TABLE 레이아웃에 비해 DIV+CSS는 여러 브라우저에서 비호환성 문제가 발생하기 쉽습니다. 주된 이유는 브라우저마다 웹 표준에 대한 기본값이 다르기 때문입니다. 중국의 주류는 IE이며, Firefox와 Chrome은 덜 일반적으로 사용됩니다. 호환성 테스트 측면에서 먼저 여러 버전의 IE에서 문제가 발생하지 않는지 확인해야 합니다. 다음은 특정 버전에 대한 솔루션을 찾는 데 도움이 되도록 고안된 몇 가지 방법과 기술입니다. 웹사이트에 문제가 있습니다.
요약: DIV+CSS는 TABLE에 비해 많은 장점이 있습니다. 웹 디자이너는 가능한 한 빨리 TABLE 방법을 포기해야 합니다. 이는 DIV+CSS 지식을 깊이 있게 배우도록 유도하는 데 더 도움이 될 것입니다. DIV+CSS 웹 디자인 방법을 배우고 사용하는 것은 어렵지 않습니다. 몇 가지 기본 지식을 이해하고 몇 가지 사례를 더 수행하면 점차적으로 이해하고 마스터할 수 있습니다.
본 글은 http://www.swjns.com 웹마스터인 [Hippie]에 의해 게재되었습니다. 재인쇄를 위해 URL을 남겨두시기 바랍니다.
귀하의 기여에 대해 hbjsp에게 감사드립니다