CSS를 사용하면 레이아웃이 쉽습니다. 테이블 레이아웃 사용에 익숙하다면 처음에는 어려울 것입니다. 어렵지는 않습니다. 단지 동기가 다르고 실제로 더 의미가 있을 뿐입니다.

어떤 섹션을 선택하든 이 페이지의 각 섹션을 별도의 섹션으로 처리할 수 있습니다. 이 블록을 해당 블록으로 절대적으로 또는 상대적으로 바꿀 수 있습니다.

위치 지정

속성 위치는 요소가 절대, 상대, 정적 또는 고정인지 정의하는 데 사용됩니다.

정적 값은 HTML에 나타나는 일반적인 순서로 생성되는 요소의 기본값입니다.

상대는 정적과 같지만 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 사용하여 원래 위치를 오프셋할 수 있습니다.

Absolute는 요소를 HTML의 일반적인 흐름에서 분리하여 완전히 자체적인 위치 지정 세계로 보냅니다. 이 약간 미친 세상에서 이 절대 요소는 위쪽, 오른쪽, 아래쪽, 왼쪽 값만 설정되어 있으면 어디에나 배치할 수 있습니다.

고정 역시 절대처럼 동작하지만 페이지를 기준으로 브라우저 창을 기준으로 절대 요소를 배치하므로 이론적으로 고정 요소는 페이지가 스크롤될 때 브라우저 뷰포트에 완전히 남아 있습니다. 이론적으로는 왜? 다른 것이 없다면 Mozilla와 Opera에서는 잘 작동하지만 IE에서는 작동하지 않습니다.

절대 위치 지정 레이아웃 사용

HTML에서 다음과 유사한 규칙을 사용하여 절대 위치 지정을 사용하여 전통적인 2열 레이아웃을 생성할 수 있습니다.

예제 소스 코드 [www.52css.com]

그리고 다음 CSS를 적용합니다:

예제 소스 코드 [www.52css.com]

#navigation {

position:absolute; top: 0; width: 10em;

}

#content {

margin-left:

10em

}

길이가 10em인 내비게이션 바가 왼쪽에 설정되어 있습니다. 내비게이션은 절대 위치에 있으므로 페이지 나머지 부분의 흐름에 아무런 영향을 주지 않으므로 콘텐츠 영역의 왼쪽 테두리 너비를 내비게이션 너비와 동일하게 설정하기만 하면 됩니다. 술집.

정말 쉽습니다! 그러나 이 2열 접근 방식에는 제한이 없습니다. 스마트 위치 지정을 사용하면 필요한 만큼 블록을 배치할 수 있습니다. 예를 들어, 세 번째 열을 추가해야 하는 경우 HTML에 "navigation2" 블록을 추가하고 다음 CSS를 적용할 수 있습니다.

예제 소스 코드 [www.52css.com]

#navigation {

position: Absolute top: 0; left: 0; width: 10em;

}

#navigation2 {

position: 절대; top: 0; width: 10em;

}

#content {

margin: 0 10em; margin to 10em */

}

요소의 절대적 위치 지정의 유일한 부작용은 요소가 고유한 세계에 있기 때문에 정확히 어디에서 끝나는지 결정할 방법이 없다는 것입니다. 탐색이 적고 콘텐츠 영역이 더 많은 경우 위의 예를 사용하면 문제가 없지만, 특히 길이와 너비에 대한 상대 값을 사용하는 경우 아래에 각주 같은 것을 넣을 희망을 포기해야 하는 경우가 많습니다. 정말로 그렇게 하고 싶다면 절대적으로 위치를 지정하는 대신 플로팅하세요.

부동(Float) 부동

(Floating)은 요소를 같은 줄의 왼쪽이나 오른쪽으로 이동하는 반면 주변 콘텐츠는 부동합니다.

플로팅은 페이지 내에서 작은 요소를 배치하는 데 자주 사용됩니다(이 사이트의 원래 기본 CSS에서는 HTML 기본 가이드 및 CSS 기본 가이드의 "다음 페이지" 링크가 오른쪽에 플로팅됩니다. 참조: 첫 번째- 의사 요소 문자 예), 탐색 열과 같은 더 큰 블록에도 사용할 수 있습니다.

다음 HTML 예제를 사용하면 다음 CSS를 적용할 수 있습니다.

예제

소스 코드 [www.52css.com]

#navigation {

float: left; width: 10em

}

#navigation2 {

float

: right

;

margin: 0 10em;

}

다음 요소가 플로팅된 객체 주위를 둘러싸는 것을 원하지 않으면 Clear 속성을 사용할 수 있습니다. clear: left는 왼쪽 요소를 지우고,clear:right는 오른쪽 요소를 지웁니다.clear:둘 다 왼쪽과 오른쪽 요소를 모두 지웁니다. 예를 들어, 페이지 바닥글이 필요한 경우 ID가 "footer"인 HTML에 블록을 추가한 후 다음 CSS를 사용할 수 있습니다.

예제 소스 코드 [www.52css.com]

#footer {

clear:both;

}

글쎄, 당신은 그것을 얻었습니다. 열의 길이에 상관없이 모든 열 아래에 각주가 나타납니다.

페이지의 "큰" 블록에 중점을 두고 일반적인 위치 지정 및 부동에 대해 다루었지만 이러한 방법은 해당 블록 내의 모든 요소에도 사용할 수 있다는 점을 염두에 두십시오

.

위치 지정, 플로팅, 테두리, 패딩 및 테두리를 결합하면 레이아웃 측면에서 CSS 없이는 테이블이 할 수 있는 것이 없습니다.

테이블 레이아웃을 사용하는 유일한 이유는 오래된 브라우저를 수용하려는 경우입니다. CSS가 실제로 발전을 보여주는 곳입니다. 가용성이 높은 페이지는 테이블 기반 페이지에 비해 파일 크기가 매우 작습니다.