K로 측정된 웹 페이지 파일의 크기는 오늘날의 대역폭에 비해 실제로 미미한 수준이지만, K로 측정된 웹 페이지 파일을 최소한으로 합리화하는 방법은 여전히 웹 디자이너가 고려해야 할 문제 중 하나입니다.
우리 모두 알고 있듯이 전체 웹페이지의 구조와 기능에 영향을 주지 않으면서 웹페이지 파일의 크기가 작을수록 좋습니다. 웹페이지 파일의 크기가 작을수록 브라우저가 웹페이지 해석 시간을 단축하는 데 도움이 되고 자연 방문자는 웹 페이지가 천천히 나타날 때까지 기다리는 짜증은 대역폭이 낮고 인터넷 속도가 느린 사용자에게 더욱 분명합니다. 상상해 보십시오. 웹 사이트를 열 때 즉시 전체 사이트가 눈앞에 나타나기를 원하십니까? 아니면 브라우저가 조금씩 해석하는 전체 사이트를 10초 이상 또는 몇 분 이상 시청하고 싶습니까?
테이블 레이아웃 시대에는 페이지의 테이블과 함께 코드가 수없이 반복되어 전체 웹 페이지 파일이 극도로 부풀어 오르고, 코드의 가독성도 최소한으로 줄어들었으며, 브라우저의 해석 시간은 자연스럽게 줄어들었습니다. 많이 증가했습니다. DIV+CSS 레이아웃이 Table 레이아웃을 대체한 이후로 모든 것이 크게 개선되어 Table이 데이터를 표시하기 위해 원래 위치로 돌아갈 수 있게 되었고 레이아웃은 DIV+CSS로 남겨져 코드의 가독성과 재사용성이 향상되었습니다. , 그리고 DIV+CSS의 더 중요한 점은 웹 페이지 파일의 성능과 구조를 구별하여 성능을 위해 전체 웹 페이지 파일의 구조를 변경할 필요가 없다는 것입니다.
DIV+CSS 레이아웃 방법이 이전 테이블 레이아웃의 비대해진 코드를 최소화했음에도 불구하고, 웹 디자이너들에게 웹 페이지 파일의 크기를 어떻게 최소한으로 제어할 수 있는지는 항상 탐구하고 추구할 가치가 있는 질문입니다.
다음 코드를 살펴보세요.
#헤더 { |
이러한 CSS 코드 조각은 구조가 매우 명확하고 구조가 명확하며 가독성이 높습니다. 그러나 이러한 코드 조각은 간소화되지 않았으므로 아래에서 단순화된 CSS 코드를 살펴보겠습니다. :
| #헤더 { 여백:10px 15px; backgroung:#333 url(Images/header.jpg); } |
CSS에는 복합 속성(composite attribute)이라는 용어가 있는데, 이는 많은 속성 매개변수가 함께 통합될 수 있음을 의미합니다. 예를 들어 위의 "margin-top; margin-right; margin-bottom; margin-left;"는 하나의 "margin"으로 통합될 수 있습니다. " 속성을 선택한 다음 이에 대한 매개변수를 제공합니다.
이를 통해 원본 CSS 코드를 기반으로 코드를 더욱 간소화할 수 있습니다. 게다가 이렇게 작성된 구조도 합리적이고 가독성도 마찬가지로 강하다. 그러나 이것은 극단적으로 합리화하기에는 충분하지 않습니다. 이 CSS 코드의 구조를 명확하게 하기 위해 공백, 줄 바꿈 및 기타 공간을 차지하는 것들을 제거하면 어떨까요?
| #header{margin:10px 15px;배경:#333 url(Images/header.jpg);} |