마크업 언어 - CSS 레이아웃_HTML/Xhtml_웹페이지 제작

12장 CSS 레이아웃 지금까지 이 책에서는 페이지의 내부 요소, 즉 콘텐츠에 대해 주로 논의했지만, 큰 구조에 대해서는 오랫동안 디자이너들이 열 레이아웃을 테이블에 의존하고 종종 다른 요소를 중첩해 왔습니다. 테이블 내에서. Script House HTML Tutorial 칼럼으로 돌아가려면 여기를 클릭하세요. CSS 튜토리얼을 보려면 여기를 클릭하세요.
위: 마크업 언어 - 인쇄 스타일 . Chapter 12 CSS 레이아웃
지금까지 이 책에서는 페이지의 내부 요소, 즉 콘텐츠에 대해 주로 살펴보았는데, 대규모 구조에 대해서는 오랫동안 디자이너들이 열 레이아웃을 테이블에 의존해 왔습니다. , 종종 테이블에 포함됨 적절한 간격과 시각적 효과를 얻기 위해 다른 테이블을 설정합니다. 이러한 거대한 활자체 콘텐츠는 다운로드 속도가 느릴 뿐만 아니라 유지 관리에도 매우 힘듭니다. 텍스트 브라우저, 화면 판독기 및 작은 크기도 마찬가지입니다. -화면 장치에서는 이를 올바르게 읽을 수 없습니다.
이 장에서는 CSS 및 구조적 마크업 구문과 결합된 네 가지 일반적인 방법을 사용하여 2열 레이아웃을 만들 것입니다. 중첩 테이블과 간격에 대한 GIF를 사용하여 열 레이아웃을 만들 수도 있습니다.
나중에 "기술 확장"에서 Windows용 Internet Explorer 5.0의 상자 모델 문제와 이를 우회하는 방법에 대해 설명합니다. 또한 CSS를 사용하여 동일한 너비의 열을 얻는 간단한 비법도 공유하겠습니다.
                                                                                      #p# CSS를 사용하여 2열 레이아웃을 만드는 방법은 무엇입니까?
시작하고 두 가지 일반적인 방법(플로팅 및 위치 지정)의 차이점을 이해하는 데 도움이 되도록 몇 가지 방법이 있습니다. 네 가지 방법으로 각각의 방법을 사용하면 머리글과 바닥글이 모두 포함된 2열 레이아웃을 만들 수 있습니다.
이 장을 지침으로 삼아 웹사이트 구축을 시작하고 이 책을 활용하시기 바랍니다. 다른 장의 방법은 콘텐츠를 만드는 데 사용됩니다.
우리가 논의할 네 가지 방법은 모두 문서의 태그 사이에 적용되며, 앞서 다음을 소개하겠습니다. 각 메소드에 대한 논의를 시작합니다.
각 메소드를 둘러싼 페이지 구조에 대한 아이디어를 제공하기 위해 추가로 포함되어야 할 사항을 대략적으로 살펴보겠습니다.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">






.. .방법 시연...

이해를 돕기 위해 달성하려는 레이아웃 구성은 그림 12-1을 참조하십시오. 이것이 우리가 완성하려는 열 레이아웃입니다.
그림 12-1 2열 레이아웃의 프레임 다이어그램
시작해 보겠습니다. , float 속성을 사용하는 첫 번째 방법을 소개합니다.
                                                                                      #p# 방법 A: 플로팅 사이드바

p id="header">
...헤더 부분...

...사이드바 부분...

...기본 부분. ..

...바닥글 부분...

위 내용은 열 레이아웃을 생성하기 위해 CSS float 속성을 사용하려는 마크업의 소스 코드입니다.

태그를 사용하여 페이지 요소를 각각 고유한 ID가 있는 여러 논리적 단락으로 나눕니다. #header: 제목 이미지, 탐색 모음 등이 포함됩니다. #sidebar: 추가 콘텐츠 링크 및 관련 정보가 포함되어 있습니다. #content: 주요 텍스트 내용을 포함하며 페이지의 초점이기도 합니다. #footer: 저작권 정보, 작성자, 보조 링크 등이 포함되어 있습니다.
이러한 페이지 단락을 분리하면 몇 가지 CSS 규칙만 지정하면 레이아웃을 완전히 제어할 수 있어 즉시 2열 레이아웃을 완성할 수 있습니다. 머리글 및 바닥글 스타일 지정
콘텐츠 구조를 열 레이아웃으로 변환하는 첫 번째 단계는 머리글과 바닥글에 약간의 배경색과 약간의 내부 패치를 추가하는 것입니다. 그러면 콘텐츠가 더 쉽게 돋보일 수 있습니다.

#header {
패딩: 20px;
배경: #ccc;
}
#footer {
패딩: 20px;
배경: #eee;
}

메소드 A의 구조에 이전 CSS를 추가하면 그림 12-2와 같이 나타나게 됩니다. 각 문단에 일부 허위 내용을 추가했습니다.

그림 12-2 머리글 및 바닥글 스타일 지정
물론 #header 및 #footer에서는 글꼴 모음, 색상, 링크 색상 등과 같이 이러한 단락에 적합한 스타일을 계속 지정할 수 있습니다. 잠깐만요. 이제 2열 레이아웃을 만들어 보겠습니다. 플로팅 사이드바
메소드 A의 핵심은 #sidebar를 메인 콘텐츠

의 양쪽에 배치하기 위해 float 속성을 사용한다는 것입니다. 이 예에서는 콘텐츠의 오른쪽에 배치합니다. 물론 반대쪽에도 작동합니다.
#sidebar 플로팅의 핵심은 태그 소스 코드에서 사이드바 상단이 메인 콘텐츠

앞에 나타나야 한다는 것입니다.
다음으로 #sidebar에 float 속성을 추가하고 너비를 30%로 설정하고 배경색을 지정합니다.

#header {
패딩: 20px;
배경: #ccc;
}
#sidebar {
float: right;
너비: 30%;
배경: #999;
}
#footer {
패딩: 20px;
배경: #eee ;
}

그림 12-3은 이 CSS를 추가한 후의 표시 효과입니다. 사이드바가 오른쪽으로 이동하고 사이드바 범위 내에서 메인 콘텐츠가 흐르는 것을 볼 수 있습니다. .

그림 12-3 메인 콘텐츠 오른쪽에 #sidebar 플로팅 실제 열
그림 12-3을 보세요. 이 효과를 완성하려면 #content

를 사용하여 올바른 외부 패치를 지정해야 합니다. width를 사이드바용 공간으로 만듭니다.
추가해야 하는 CSS는 다음과 같이 간단합니다:

#header {
padding: 20px;
배경: #ccc;
}
#sidebar {
부동: 오른쪽;
너비: 30%;
배경: #999;
}
#content {
여백-오른쪽: 34%;
}
#footer {
clear: 오른쪽;
padding: 20px;
background: #eee;
}

콘텐츠에 대해 설정한 올바른 외부 패치 크기가 #sidebar보다 4% 더 크다는 것을 알 수 있습니다. 두 열 사이에 공간이 있습니다. 그림 12-4는 브라우저로 보는 효과입니다.

에 대한 올바른 외부 패치를 설정하면 다음을 만들 수 있습니다.

그림 12-4 2열 레이아웃
동시에 #footer에 추가된clear:right 규칙에 주의해야 합니다. 두 열의 길이 변경에 영향을 받지 않고 페이지 바닥글이 사이드바와 콘텐츠 영역 뒤에 확실히 표시되도록 하는 것이 중요합니다. 바닥글은 이전에 표시된 플로트 콘텐츠를 방지합니다.
이제 두 열이 표시됩니다. -열 레이아웃을 사용할 수 있으므로 테두리, 배경, 테두리 및 기타 요소를 계속 추가하여 모양을 더욱 매력적으로 만들 수 있습니다.
지금까지는 유연한 레이아웃을 만들기 위해 너비를 백분율로 설정했습니다(열 너비는 자동으로 변경됨). 사용자의 창 너비에 맞춰 조정) 너비를 픽셀 단위로 설정할 수도 있습니다. 고정 너비 레이아웃을 만들 때 내부 및 외부 패치의 크기를 픽셀 단위로 지정할 때 Windows용 IE가 잘못 표시되는 문제에 주의해야 합니다. CSS 상자 모델을 구문 분석합니다. 이 장의 "상자 모델 문제"에서 더 많은 정보와 가능한 해결 방법을 찾을 수 있습니다.
                                                                                      #p# 방법 B: 이중 부동 소수점

...여기에 헤더 콘텐츠...

...주 콘텐츠는 여기에 있습니다...

...사이드바 콘텐츠는 여기에 있습니다. ..

...바닥글 내용은 여기에...

A방식의 단점 중 하나는 사이드바를 띄우려면 마크업 소스 코드 내에서 메인 콘텐츠 앞에 사이드바를 배치해야 하고 CSS 브라우저, 텍스트 브라우저, 스크린 리더 및 기타 장치를 닫아야 한다는 것입니다. CSS를 지원하지 않는 경우 페이지의 기본 콘텐츠 앞에 사이드바의 콘텐츠가 표시되거나 읽혀집니다. 이는 실제로 엄격하지 않습니다.
float 메서드를 사용하면 이 문제를 피할 수 있습니다. 기본 콘텐츠를 표시하면 됩니다. 소스 코드와 사이드바

의 위치(위에 표시된 대로)를 선택한 다음 CSS를 사용하여 다른 쪽으로 이동합니다

.

#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
너비: 66%;
}
#sidebar {
float: 오른쪽;
너비: 30%;
배경: #999;
}
#footer {
clear: 둘 다;
padding: 20px;
background: #eee;
}

두 개의

를 서로 다른 방향으로 띄우면 그림 12-4와 같은 효과를 얻으면서 가장 적절한 방식(메인 콘텐츠가 사이드바 앞에 위치)으로 소스 코드를 정렬할 수 있습니다. 양면을 피하세요
마찬가지로 중요한 것은 #footerdeclear 속성을 둘 다로 설정해야 두 열의 길이에 관계없이 바닥글이 항상 끝에 표시되고 태그 소스 코드의 내용 순서도 동일하게 표시됩니다. .
                                                                                      #p# 방법 C: 플로팅 메인 콘텐츠

...헤더 콘텐츠...

< id="content">
...주 콘텐츠...

...사이드바..

...바닥글 콘텐츠...

있음 언급할만한 또 다른 방법은 float 속성을 사용하고 소스 코드를 표시하기만 하면 됩니다.
메인 콘텐츠의

왼쪽으로 이동하고 너비를 100% 미만으로 설정하면 오른쪽에 사이드바를 위한 충분한 공간이 남습니다. CSS 콘텐츠
방법 C에 필요한 CSS 콘텐츠는 "부동 속성", 콘텐츠 영역에 사용하려는 너비, 두 열 사이에 남겨진 작은 테두리 등 이보다 더 간단할 수 없습니다.

# 헤더 {
패딩: 20px;
배경: #ccc;
}
#content {
float: 왼쪽;
폭: 66% ;
}
#sidebar {
배경: #999;
}
#footer {
clear : left;
padding: 20px;
background: #eee;
}

사이드바의 너비를 정의할 필요가 없다는 점에 유의하세요. 그러면 기본 콘텐츠가 자동으로 채워집니다

나머지 공간을 사용하세요(이 예에서는 34%). 비극적인 배경
그림 12-5는 브라우저로 본 결과인데, 와우! 일부 일반 브라우저에서는 사이드바의 너비가 지정되지 않았기 때문에 사이드바의 배경색이 메인 콘텐츠 영역 아래에 나타나는 경우가 있는데, 그래서 브라우저 창과 같은 너비로 확장하려고 합니다.

그림 12-5 플로팅 콘텐츠이지만 사이드바의 배경색이 비쳐 보입니다
이 부분을 추가할 수 있는 한 측면 이 문제는 사이드바 왼쪽에 콘텐츠 영역과 동일한 너비의 외부 테두리를 추가하면 피할 수 있습니다. 실제로 외부 패치를 약간 더 크게 만들어 두 열 사이에 약간의 공백을 남겨 둡니다. .

#header {
패딩: 20px;
배경: #ccc;
}
#content {
float: 왼쪽;
너비: 66%;
}
#sidebar {
왼쪽 여백: 70%;
배경: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}

간단하고 평범합니다
또는 배경색을 사용할 필요가 없다면 다음과 같습니다. 테두리를 설정할 필요가 없습니다. 그림 12-6은 전체 #sidebar 문을 제거하고 기본 콘텐츠에 약간의 오른쪽 외부 패치를 추가한 후의 결과입니다

이때 두 열은 기본 배경색을 공유하게 됩니다.

그림 12-6 플로팅 콘텐츠
배경색을 사용하지 않는 CSS는 다음과 같이 줄일 수 있습니다.

#header {
패딩: 20px;
배경: #ccc;
}
#content {
float: 왼쪽;
너비: 66%;
여백-오른쪽: 6%;
}
#footer {
클리어: 왼쪽;
패딩: 20px;
배경: #eee;
}

추가로 왼쪽 바깥쪽 패치를 추가하는 것(또는 배경색을 생략하는 것), 열에 배경색을 지정하기 위해 배경 이미지를 사용하는 것의 대안이 있습니다. 이 작은 비밀은 나중에 이 장의 "기술 확장" 단원에서 힌트를 드리겠습니다.
float 속성을 사용하는 것 외에도 위치 지정을 사용하여 열 레이아웃을 생성할 수도 있습니다. 마지막 옵션인 방법 D를 살펴보겠습니다.
                                                                                      #p# 방법 D: 포지셔닝

...인기 콘텐츠...

...주요 콘텐츠...

...사이드바...

...바닥글 내용...

D 방법은 동일한 마크업 소스 코드 구조를 사용하는 것입니다. 그런 다음 가장 효율적인 방법으로 배열합니다

: 메인 콘텐츠를 사이드바 앞에 배치하고 스타일이 지정된 브라우저를 닫습니다. 화면 리더는 메인 콘텐츠 부분을 먼저 수신한 다음 사이드바를 위치 지정 시 순서대로 받습니다. 태그 소스 코드는 페이지 요소가 나타나는 위치와 아무런 관계가 없습니다. 예측 가능한 높이
CSS 콘텐츠는 처음 세 가지 방법과 다소 유사합니다. 첫 번째 차이점은 헤더에 지정된 픽셀 높이입니다. 나중에 사이드바를 배치하려면 높이를 예측할 수 있어야 합니다.
여기서 A. 번호는 무작위로 선택되며 로고, 네비게이션 바, 검색 양식 등 페이지 상단에 사용되는 콘텐츠에 따라 조정되어야 합니다.

#header {
높이: 40px;
배경: #ccc;
}
#footer {
패딩: 20px;
배경: #eee;
}

각 열에 공간을 남겨두세요. Lower space
다음으로 #content

에 대한 올바른 외부 패치를 설정해야 합니다. 이전 방법과 마찬가지로 나중에 오른쪽 사이드바를 위한 공간을 남겨둘 수 있습니다. 플로팅이 아닌 절대 위치 지정 방법을 사용합니다. 오른쪽 사이드바를 넣으세요.

#header {
height: 40px;
background: #ccc;
}
#content {
여백-오른쪽: 34%;
}
#footer {
패딩: 20px;
background: #eee;
}

사이드바에 넣으세요
마지막으로 #sidebar

를 #content 경계 내에 넣으려면 절대 위치 지정을 사용해야 합니다. 또한 브라우저가 페이지 주위에 추가하는 텍스트를 제거해야 합니다. 그러면 위치 좌표가 모든 브라우저에서 일관되게 유지됩니다.

body {
여백: 0;
패딩: 0;
}
#헤더 {
높이: 40px;
배경: # ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
위치: 절대;
위쪽: 40px;
오른쪽: 0;
너비: 30%;
배경: # 999;
}
#footer {
패딩: 20px;
배경: #eee;
}

이후 position 지정:absolute, 상하좌표를 이용하여 #sidebar를 원하는 위치에 정확하게 배치할 수 있다(그림 12-7).

그림 12-7 positioning으로 만든 2열 레이아웃 효과
We는 "브라우저 창의 위쪽 가장자리에서 40픽셀, 오른쪽 가장자리에서 0픽셀 떨어진 위치에

#사이드바를 배치합니다."라고 설명합니다. 또한 아래쪽과 왼쪽을 사용하여 좌표를 지정할 수도 있습니다. 바닥글 문제
열을 띄우기 위해 이전 방법을 사용할 때 클리어 속성을 사용하면 바닥글이 전체 브라우저 창의 너비에 걸쳐 있고 메인 콘텐츠와 사이드바의 길이에 영향을 받지 않도록 할 수 있습니다.
위치 지정 시 사이드바의 문서 흐름은 전체 페이지와 독립적이므로 사이드바가 내용보다 길면 페이지 바닥글을 덮게 됩니다. 🎜>그림 12 -8 사이드바가 바닥글과 겹칩니다
이 문제에 대한 일반적인 해결책 중 하나는 바닥글의 기본 콘텐츠와 동일한 외부 오른쪽 패치를 지정하여 사이드바가 바닥글 너머로 확장될 수 있도록 하는 것입니다.이 방법을 사용하려면 CSS를 다음과 같이 조정해야 합니다.

본문 {
여백: 0;
패딩: 0;
}
#header {
높이: 40px;
배경: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
위치: 절대;
위쪽: 40px;
오른쪽: 0;
너비: 30%;
배경: #999;
}
#footer {
여백-오른쪽: 34%;
패딩: 20px;
background: #eee;
}

이 솔루션은 짧은 콘텐츠와 긴 사이드바가 있는 페이지에서는 약간 이상해 보이지만 결과는 그림 12-9에서 볼 수 있습니다. 페이지 바닥글을 피한 사이드바를 보여줍니다.

그림 12-9 동일한 외부 패치와 주요 내용을 가진 페이지 바닥글
                                                                                      #p# 3명
3열 레이아웃을 만들고 싶다면 어떻게 해야 하나요? 문제 없고, 절대 위치 지정을 사용하면 추가하기 쉽습니다. 메인 콘텐츠와 왼쪽 외부 패치만 추가하면 됩니다. 세 번째 열을 수용할 만큼 충분히 큽니다.
레이아웃을 위해 절대 위치 지정을 다시 사용해야 하기 때문에 마크업 소스 코드 내의 아무 곳에나 다른 사이드바를 배치할 수 있습니다.
두 번째 사이드바를 추가하고 이름을 #으로 지정한다고 가정합니다. sidecolumn 을 만들고 다음 CSS를 사용하여 공간을 확보한 후 넣으세요.

본문 {
여백: 0;
패딩: 0;
}
#header {
높이: 40px;
배경: #ccc;
}
#content {
오른쪽 여백: 24%;
왼쪽 여백: 24%;
}
# sidecolumn {
위치: 절대;
상단: 40px;
왼쪽: 0;
너비: 20%;
배경: #999;
}
#sidebar {
위치: 절대;
상단: 40px;
오른쪽: 0;
너비: 20%;
배경: #999;
}
#footer {
여백-오른쪽 : 24%;
여백-왼쪽: 24%;
패딩: 20px;
배경: #eee;
}

방금 완성된 부분은 이전 오른쪽 사이드바와 마찬가지로 메인 콘텐츠와 바닥글 영역에 왼쪽 바깥쪽 패치를 (겹침을 피하기 위해) 남겨두고, 새로운 #sidecolumn을 절대 위치로 넣어서 위쪽 가장자리에 배치하는 것입니다. 40픽셀, 왼쪽 가장자리에서 0픽셀.
세 번째 열을 수용하기 위해 너비를 약간 수정했다는 사실을 눈치채셨나요? 백분율을 사용하고 있으므로 이 레이아웃은 브라우저 너비에 따라 조정됩니다. 모든 열의 픽셀 너비를 지정하여 레이아웃 너비를 고정할 수 있습니다.
그림 12-10은 이 예제를 브라우저로 본 효과, CSS 절대 위치 지정으로 완성된 유연한 3열 레이아웃입니다.

그림 12-10 위치 지정 방법을 사용한 유연한 3열 레이아웃
                                                                                      #p# 요약
이 장에서는 CSS를 사용하여 레이아웃을 계획함으로써 얻을 수 있는 효과를 간략하게 연구했습니다. 이 장의 목적은 플레이의 기초를 제공하는 것이므로 부동 및 위치 지정이라는 두 가지 주요 방법을 보여줍니다.
계속해서 CSS 레이아웃 기술을 심층적으로 실험하고, 페이지 내 중첩된 테이블을 제거하고, 브라우저와 장치에서 읽을 수 있는 보다 유연하고 구조화된 마크업 구문으로 대체할 수 있기를 바랍니다.
원하신다면. CSS 레이아웃에 대해 자세히 알아보세요. 레이아웃 정보를 보려면 다음 리소스를 확인하세요. "The Layout Reservoir" (http://www.php.cn/): 이는 다중 열 레이아웃을 생성하기 위해 절대 위치 지정을 사용하는 훌륭한 예입니다. "테이블 해킹에서 CSS 레이아웃까지: 웹 디자이너의 여정"(http://www.php.cn/): Jeffrey Zeldman이 작성한 훌륭한 튜토리얼로 2열 레이아웃을 만드는 데 필요한 단계를 기록합니다. "CSS 레이아웃 기술: 재미와 이익을 위해"(http://www.php.cn/): Eric Costello의 다양한 CSS 레이아웃 리소스. "Little Boxes" (http://www.php.cn/): Owen Briggs가 작성한 많은 CSS 레이아웃 예제를 위한 아름다운 인터페이스입니다. "CSS Zen Garden" (http://www.php.cn/): "CSS 기반 디자인으로 어떤 시각적 효과를 얻을 수 있는지 보여줍니다." Dave Shea가 가꾸는 "Garden"은 독자들이 제공한 최신 CSS를 단일 XHTML 문서 디자인(물론 레이아웃 포함)은 CSS의 궁극적인 레이아웃 기능을 볼 수 있는 놀라운 웹사이트입니다. 기술 확장
이제 기본 CSS 레이아웃 구축의 기본 사항을 살펴보았으므로 Windows용 Internet Explorer 5 및 5.5와 CSS 상자 모델을 잘못 구문 분석하는 불행한 문제에 대해서도 공유하겠습니다. 동일한 높이의 열 레이아웃을 달성하기 위해 배경 이미지를 배치하는 비밀 기술은 나중에 플랫폼을 사용하는 방법에 대한 튜토리얼입니다. 상자 모델 문제
이 장의 시작 부분에서 다중 열 CSS 레이아웃을 만드는 방법에 대해 논의했습니다. 이러한 열에 패치와 테두리를 추가하기 시작하면 너비 속성만 사용합니다. 왜죠?
안타깝게도 Windows용 Internet Explorer 5에서는 내부 및 외부 패치와 테두리를 추가할 때 아웃소싱 요소의 너비를 정확하게 계산할 수 없습니다.
예를 들어 Windows용 IE5를 제외한 모든 브라우저는 CSS1은 아웃소싱 요소의 너비를 너비, 내부 패치 및 테두리의 합으로 계산합니다. 이는 W3C가 모든 브라우저에서 CSS 상자 모델을 처리하기를 바라는 방식입니다.
그러나 Windows용 IE5에서는 테두리와 내부 패치는 지정된 너비 내에서 계산됩니다. 걱정하지 마십시오. 문제를 직접 살펴보는 데 도움이 됩니다. 보는 것이 믿는 것이다
그림 12-11과 12-12를 비교해 보세요. 그림 12-11은 양쪽에 10픽셀 내부 패치가 있고 가로에 5픽셀 테두리가 있는 200픽셀 너비의 요소입니다. 부분은 모두 더해 보면 실제 너비가 230픽셀임을 알 수 있습니다.
그림 12-11 박스 모델의 올바른 계산 결과
그림 12-12 Windows용 IE5가 올바르지 않음 내부 패치, 테두리, 너비 계산 결과
이것은 디자인을 준수하는 상자 모델입니다. 너비 속성은 항상 요소의 내용 범위를 정의하고 내부 패치와 테두리가 이 값에 추가됩니다.
따라서 사이드바의 너비를 200픽셀로 정의한 다음 패딩과 테두리를 추가하면 CSS 선언은 다음과 같습니다.

#sidebar {
width: 200px;
padding: 10px;
border: 5px solid black;
}

너비를 200픽셀로 설정했지만 Windows용 IE5를 제외하면 사이드바에는 실제로 230픽셀의 공간이 필요합니다. Windows의 경우 사이드바는 내부 패치와 테두리를 포함하여 총 200픽셀을 차지합니다.
그림 12-12에서는 너비 속성을 200픽셀로 지정하면 테두리와 내부 패치가 콘텐츠 공간을 차지하게 됩니다. 컨텐츠 공간 밖보다는.
                                                                                      #p# Swinging Width
우리는 요소에 테두리를 지정하는 것을 반대합니다. 내부 패치를 적용한 이유는 오늘날에도 IE5.x를 사용하는 수백만 명의 사용자가 분명히 벗어난 디자인 결과를 보게 되기 때문입니다. 동시에 기억해야 할 중요한 사항이 있습니다. 이 글을 쓰는 시점에도 이 문제를 무시하기에는 IE5를 사용하는 사람들이 너무 많습니다.
그러면 다행히 어떻게 해야 할까요? 이 문제를 해결하는 트릭이 있습니다. 이 트릭은 올바른 상자 모델을 얻기 위해 Windows용 IE5용과 다른 브라우저용의 두 가지 너비를 제공합니다. Box Model Hack
Tantek Celik은 Box Model Hack(http://www.php.cn/)을 작성하여 두 가지 너비를 제공할 수 있습니다. 하나는 조정되어 Window Internet Explorer 5에서만 사용됩니다. 다른 하나는 다른 모든 브라우저에서 사용됩니다.
IE5 및 IE5.5에서만 사용할 수 있는 CSS 구문 분석 버그를 통해 (테두리 및 내부 패치를 수용하기 위해) 약간 더 큰 너비를 지정한 다음 이 값을 실제 값으로 재정의할 수 있습니다. width 다른 브라우저가 올바른 결과를 표시할 수 있도록 합니다. 소스 코드 예
예를 들어 사이드바의 콘텐츠 영역 너비를 200픽셀로 설정하고 10픽셀 내부 패치와 5픽셀 테두리를 설정하려는 경우 CSS는 다음과 같습니다.

#sidebar {
너비: 200px;
패딩: 10px;
테두리: 5px 단색 검정;
}

Windows용 IE5의 경우 다음이 필요합니다. 너비를 230픽셀(내부 패치 너비와 양쪽 테두리 너비 포함)로 지정한 다음 200픽셀로 덮어써야 표준을 준수하는 브라우저가 올바른 너비를 얻을 수 있습니다.

#sidebar {
패딩: 10px;
테두리: 5px 검정색;
너비: 230px /* IE5/Win의 경우 */
voice -family: ""}"";
voice-family: acquire;
width: 200px; /* 실제 값 */
}

Windows용 IE5 값이 먼저 나타나고 Windows용 IE5가 선언이 끝났다고 생각하게 만드는 몇 가지 규칙이 뒤따릅니다. 브라우저는 이를 인식하고 최종적으로 실제 너비를 지정하면 초기 너비 규칙을 무시하고 Windows용 IE5에서는 두 번째 너비 규칙을 무시합니다.
결과는 Windows용 IE5와 기타 모든 항목에서 정확히 동일하게 표시됩니다. CSS2 호환 브라우저가 없으면 Windows용 IE5 사용자는 설계된 것보다 얇은 열 너비를 보게 됩니다. Opera 친화적
Windows용 IE5 구문 분석 오류가 있는 CSS2 호환 브라우저의 경우 박스 모델 패치를 사용할 때마다 추가 명령문을 추가해야 합니다. "Opera 친화적"이라는 규칙은 모든 표준을 준수하는 브라우저를 만듭니다. 구문 분석 버그가 없고 예상 너비가 표시되는지 확인하세요.

#sidebar {
패딩: 10px;
테두리: 5px 단색 검정색;
너비: 230px; /* IE5/Win의 경우 */
voice-family: ""} "";
voice-family: 상속;
width: 200px; /* 실제 값 */
}
html>body #sidebar {
width: 200px;
}

이 규칙을 사용하면 Windows용 IE5에서 CSS 상자 모델을 잘못 구문 분석하는 문제를 완전히 우회하여 모든 사람이 올바른 효과를 볼 수 있습니다. .
                                                                                      #p# 너비 이상
여기서는 동일한 디스플레이 너비를 달성하기 위해 "Box Model Hack"을 사용하지만 Windows용 IE5에 다른 CSS 콘텐츠를 제공할 때마다 이 해킹이 실제로 유용할 수 있습니다. 모든 해킹은 주의해서 사용해야 합니다. , 그리고 실제로 필요할 때만 사용하세요. 나중에 쉽게 제거할 수 있도록 "박스 모델 핵"이 어디에 사용되는지 기억해 두는 것이 좋습니다. 여전히 수백만 명의 인터넷 사용자가 Windows용 IE5를 사용하고 있으므로 이 패치는 필수입니다.
다음 "위장된 필드"는 원래 A List Apart 잡지(http://www.php.cn/)의 2004년 1월호에서 나온 것입니다. . 위장칼럼
개인 홈페이지 디자인과 관련해 가장 많이 받는 질문은
"오른쪽 컬럼의 배경색을 전체 페이지 하단까지 어떻게 확장하나요?" 입니다.
사실 이는 매우 간단한 개념이며 이 장의 시작 부분에서 설명한 모든 레이아웃 방법에 적용됩니다. 수직 늘이기
CSS의 가장 실망스러운 속성 중 하나는 요소가 실제로 필요한 만큼만 수직으로 늘어난다는 것입니다. 즉, 200픽셀 높이의 이미지를

안에 넣으면

는 페이지에서 200픽셀만 확장합니다.
이것은

로 페이지 단락을 잘라낸 다음 이 시작 부분의 방법을 사용하여 CSS로 다중 열 레이아웃을 완성할 때 흥미로운 딜레마가 될 수 있습니다. 각 열에 고유한 배경색을 선택하려는 경우 내용의 양에 따라 한 열이 다른 열보다 길어질 수 있습니다(그림 12-13).

그림 12-13 길이가 다른 필드필드에 포함된 내용에 관계없이 부록을 동일한 길이로 보이게 하는 방법에는 여러 가지가 있습니다. 제 솔루션을 공유하겠습니다(절대 항목에 적용 가능). 위치 지정 레이아웃 방법), 이 방법은 정말 설명할 수 없을 정도로 간단합니다. 부정행위
이 말할 수 없이 간단한 비결은 수직으로 배열된 배경 이미지를 사용하여 색상이 있는 기둥의 환상을 만드는 것입니다. SimpleBits(http://www.php.cn/)에서는 그림 12-14 배경 이미지와 비슷한 것을 사용했습니다. (데모용으로 수정된 비율): 왼쪽에 장식 줄무늬가 있고 중앙에 메인 콘텐츠를 위해 넓은 빈 공간이 남아 있으며 그 뒤에 1픽셀 테두리가 있고 오른쪽 사이드바에 연한 갈색 영역이 있고 그 뒤에 반대가 있습니다. 장식 줄무늬.

그림 12-14 Tile.gif 열 너비가 사전 할당된 2픽셀 높이 배경 이미지.
전체 이미지 높이가 몇 픽셀에 불과하지만 수직 타일 이후 , 열 내용의 길이에 관계없이 끝까지 색상이 지정된 열을 만들 수 있습니다. CSS 콘텐츠
태그에 다음 CSS 규칙을 추가했습니다.

background: #ccc url(tile.gif)peat-y 50% 0;

이렇게 하면 전체 페이지의 배경색이 회색으로 설정되고 이미지만 세로로 타일링됩니다. (반복-y) 다음 50% 0은 배경 이미지의 위치를 ​​나타냅니다. 이 예에서는 브라우저 창의 왼쪽 가장자리(이미지 중앙에 위치)에서 50% 떨어져 있으며 위쪽 가장자리에 가깝습니다. 열 위치 지정
배경 이미지를 배치한 후 위치 지정 레이아웃을 맨 위에 놓고 왼쪽 및 오른쪽 열의 내부 및 외부 패치를 지정하여 올바른 위치에 정렬되도록 했습니다. 즉, 잘못된 열이 생성되었습니다. (그림 12-15).

그림 12-15 타일링된 배경 이미지로 생성된 색상 열
주의해야 할 중요한 사항이 있습니다: 열이 테두리, 내부 및 외부 패치 그렇다면 여전히 Tantek Celik의 Box Model Hack을 사용하여 Windows용 IE5의 박스 모델 문제를 해결할 수 있습니다(이 장 앞부분의 "박스 모델 문제" 참조).
또는 가능하다면. 외부 패치만 사용하고 테두리와 내부 패치는 피합니다. 그렇다면 상자 모델 Hack을 추가할 필요가 없습니다. 동시에 필드의 내용이 단순히 타일 배경 이미지(투명하게 표시됨)에 배치되면 Hack을 사용하지 않으려면 매우 간단해야 합니다. 작동하는 한
웹 사이트에서 2열 레이아웃을 만들기 위해 절대 위치 지정을 사용했지만 이 장의 시작 부분에서 언급한 다른 방법을 사용하여도 동일한 결과를 얻을 수 있습니다. 동일한 아이디어가 여전히 적용됩니다. 배경 이미지를 배치한 다음 시뮬레이션된 열 배경을 덮도록 열을 띄웁니다.
이는 간단한 개념이지만 CSS 레이아웃을 구축할 때 디자이너가 자주 직면하는 불만 사항 중 하나를 해결할 수 있습니다. 결론
이 장이 흥미로운 CSS 레이아웃 세계를 탐색하는 데 도움이 되기를 바랍니다. 이 장의 시작 부분에서 레이아웃을 작성하는 네 가지 방법을 살펴보았는데 그 중 세 가지는 float 속성을 사용했고 그 중 하나는 절대 위치 지정을 사용했습니다. 물론입니다. 더 많은 레이아웃 팁과 데모를 보려면 제가 나열한 추가 리소스를 확인하세요.
또한 이러한 효과를 얻기 위해 테두리와 내부 패치가 있는 열을 만들 때 상자 모델 해킹의 중요성에 대해서도 논의했습니다. Windows 및 기타 브라우저용.
마지막으로 CSS 레이아웃을 디자인할 때 동일한 높이의 열을 만들 수 있는 유용한 트릭을 공유했습니다. 작은 타일 배경 이미지를 사용하면 페이지 하단까지 도달할 수 있는 열을 얻을 수 있습니다(콘텐츠 길이에 관계없이).
저는 여러 개의 플로트를 사용하는 데 더 익숙합니다. 레이아웃의 경우 개인에게 달려 있습니다. 어떤 레이아웃 방법을 사용할지 강요할 필요는 없습니다. 테이블을 레이아웃으로 사용하더라도 멋지다고 생각하면 아무도 뭐라고 하지 않을 것입니다... 하하, 농담입니다.