div 레이아웃 의 자 유 롭 게 스 트 레 칭 3 칸 식 판 면 코드
자 유 롭 게 스 트 레 칭 된 세 칸 짜 리 지면(Three Column Stretch)(페이지 첫머리)\#leftbox{position:absolute;left: 10px; width: 180px(150px?); }
이 칸의 배경 은 body 볼 륨 으로 설 정 된 그림 을 수직 방향 으로 반복 해서 붙 이 는 것 입 니 다.그림 의 너비 와 중간 표시 줄 의 왼쪽 경계(margin)가 같 고 높이 는 20px 입 니 다.이렇게 하면 그림 이 중복 되 는 횟수 를 줄 이 고 색 을 연산 하 는 속 도 를 가속 화 할 수 있 습 니 다.
이 칸 의 내용(\#leftbox)은 절대 위치(absolutely positioned)로 왼쪽 영역 에 놓 습 니 다.또한 아래쪽 배경 그림 의 크기 제한 으로 픽 셀 단위 의'너비(width)'값 을 지정 해 야 합 니 다.\#rightbox{position:absolute;right: 2%; width: 30%; }
이 칸도"body"의 배경 을 표시 할 수 있 습 니 다.그러나"body"의 배경 그림 은 수직 방향 으로 만 중복 되 고 중간 칸 의 왼쪽 경계 와 너비 만 같 기 때문에 여 기 는"body"의 배경 색(background-color)을 표시 합 니 다.이 칸 의"너비(width)"와 오른쪽 경계 구역 은 100%단위 로 비교 되 며,다른 단 위 를 사용 하 셔 도 됩 니 다.
페이지 가 640 px 보다 좁 으 면 중간 과 오른쪽 칸 에 사용 되 는"pre"볼 륨 표 지 는 내용 을 중첩 합 니 다.
a href="index.html">반환 p.i.e.\#middlebox{margin:0 34%0 170 px;border-left: 2px solid #000; border-right: 2px solid #000; padding: 0 10px 10px; background-color: #6b9; }
중간 표시 줄은 오른쪽 표시 줄 과 구분 할 수 있 도록 배경 색 을 설정 합 니 다.이 칸 에 도 여백(padding)과 테두리(border)가 필요 합 니 다.그러나'너비(width)'속성 이 설정 되 어 있 지 않 기 때문에 IE5.x 의 블록 모듈(box model)문 제 를 일 으 키 지 않 습 니 다.
이 칸 도 가장 긴 칸 이 어야 하 며,지원 하 는 최대 해상도(resolution)로 탐색 할 때,검사 구역(viewport)아래 까지 확장 할 수 있어 야 합 니 다.그렇지 않 으 면'body'의 배경 은 페이지 끝(footer)아래 에 나타 납 니 다.
이 전체 범례은 어떠한 칸 에 도'높이(height)'속성 을 선언 하지 않 았 습 니 다.이것 은 일부 브 라 우 저가'높이(height)'속성 을 표현 하 는 독특한 방식 을 피하 기 위해 서 입 니 다.이러한 조건 의 제한 으로 인해 이 지면 은 항상 긴 중간 표시 줄 이 있 는 웹 페이지 에 매우 적합 합 니 다.예 를 들 어 weblogs 와 같 습 니 다.
페이지 의 첫 번 째,페이지 의 끝 과 중간 표시 줄 은'고정 적(static)'(또는'상대 적(relative)')이 고 이 세 가 지 는 웹 페이지 의 사 이 즈 를 함께 정의 합 니 다.첫 페이지 와 끝 에'높이(height)'를 지정 할 수 있 습 니 다.
원본 파일 에 절대 위치 로 표 시 된 div\#rightbox 는 div\#leftbox 뒤에 놓 여 있 기 때문에 이 div 의"top"속성 은 무시 할 수 있 습 니 다.이것 은 그들 로 하여 금 수직 방향의 기점 에 있 게 할 것 이다.즉,그것들 은 고정된 것 이다.그래서 페이지 의 첫 번 째 부분 이 추가 내용 으로 확대 되면 세 개의 칸 이 아래로 조정 되 는데 좋 지 않 습 니까?
Mozilla 에서,수직 방향의 반올림 오차(rounding error)로 인해 일부 해상도 에서 페이지 끝 아래 에 1px 의 공간 이 있 을 수 있 습 니 다.이 범례는 더욱 상세 하 게 설명 합 니 다.
Nav4 에서은'div\#leftbox'와 같은 문법 을 사용 할 수 없 으 므 로'\#leftbox'로 대체 하 십시오.나의 서법 은 단지 명확 하 게 표시 하기 위해 서 이다.p>
감사:다시 한 번Philippe Wittenberg에 감 사 드 립 니 다.그의 도움 으로 이 범례 를 더욱 완벽 하 게 만 들 었 습 니 다.Mark Howels는 최초의 바디 배경 아 이 디 어 를 제공 하기 때 문 입 니 다.
Big John e-mail ©positioniseverything 마지막 업데이트 날짜:September 6,2002 Created August 24,2002
want to change. Why did the egg cross the road? Answer:It had an inclination.
자 유 롭 게 스 트 레 칭 된 세 칸 짜 리 지면(Three Column Stretch)(페이지 끝)
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]
\#leftbox{position:absolute;left: 10px; width: 180px(150px?); } 이 칸의 배경 은 body 볼 륨 으로 설 정 된 그림 을 수직 방향 으로 반복 해서 붙 이 는 것 입 니 다.그림 의 너비 와 중간 표시 줄 의 왼쪽 경계(margin)가 같 고 높이 는 20px 입 니 다.이렇게 하면 그림 이 중복 되 는 횟수 를 줄 이 고 색 을 연산 하 는 속 도 를 가속 화 할 수 있 습 니 다.
이 칸 의 내용(\#leftbox)은 절대 위치(absolutely positioned)로 왼쪽 영역 에 놓 습 니 다.또한 아래쪽 배경 그림 의 크기 제한 으로 픽 셀 단위 의'너비(width)'값 을 지정 해 야 합 니 다.\#rightbox{position:absolute;right: 2%; width: 30%; } 이 칸도"body"의 배경 을 표시 할 수 있 습 니 다.그러나"body"의 배경 그림 은 수직 방향 으로 만 중복 되 고 중간 칸 의 왼쪽 경계 와 너비 만 같 기 때문에 여 기 는"body"의 배경 색(background-color)을 표시 합 니 다.이 칸 의"너비(width)"와 오른쪽 경계 구역 은 100%단위 로 비교 되 며,다른 단 위 를 사용 하 셔 도 됩 니 다.
페이지 가 640 px 보다 좁 으 면 중간 과 오른쪽 칸 에 사용 되 는"pre"볼 륨 표 지 는 내용 을 중첩 합 니 다.
\#middlebox{margin:0 34%0 170 px;border-left: 2px solid #000; border-right: 2px solid #000; padding: 0 10px 10px; background-color: #6b9; } 중간 표시 줄은 오른쪽 표시 줄 과 구분 할 수 있 도록 배경 색 을 설정 합 니 다.이 칸 에 도 여백(padding)과 테두리(border)가 필요 합 니 다.그러나'너비(width)'속성 이 설정 되 어 있 지 않 기 때문에 IE5.x 의 블록 모듈(box model)문 제 를 일 으 키 지 않 습 니 다.
이 칸 도 가장 긴 칸 이 어야 하 며,지원 하 는 최대 해상도(resolution)로 탐색 할 때,검사 구역(viewport)아래 까지 확장 할 수 있어 야 합 니 다.그렇지 않 으 면'body'의 배경 은 페이지 끝(footer)아래 에 나타 납 니 다.
이 전체 범례은 어떠한 칸 에 도'높이(height)'속성 을 선언 하지 않 았 습 니 다.이것 은 일부 브 라 우 저가'높이(height)'속성 을 표현 하 는 독특한 방식 을 피하 기 위해 서 입 니 다.이러한 조건 의 제한 으로 인해 이 지면 은 항상 긴 중간 표시 줄 이 있 는 웹 페이지 에 매우 적합 합 니 다.예 를 들 어 weblogs 와 같 습 니 다.
페이지 의 첫 번 째,페이지 의 끝 과 중간 표시 줄 은'고정 적(static)'(또는'상대 적(relative)')이 고 이 세 가 지 는 웹 페이지 의 사 이 즈 를 함께 정의 합 니 다.첫 페이지 와 끝 에'높이(height)'를 지정 할 수 있 습 니 다.
원본 파일 에 절대 위치 로 표 시 된 div\#rightbox 는 div\#leftbox 뒤에 놓 여 있 기 때문에 이 div 의"top"속성 은 무시 할 수 있 습 니 다.이것 은 그들 로 하여 금 수직 방향의 기점 에 있 게 할 것 이다.즉,그것들 은 고정된 것 이다.그래서 페이지 의 첫 번 째 부분 이 추가 내용 으로 확대 되면 세 개의 칸 이 아래로 조정 되 는데 좋 지 않 습 니까?
Mozilla 에서,수직 방향의 반올림 오차(rounding error)로 인해 일부 해상도 에서 페이지 끝 아래 에 1px 의 공간 이 있 을 수 있 습 니 다.이 범례는 더욱 상세 하 게 설명 합 니 다.
Nav4 에서은'div\#leftbox'와 같은 문법 을 사용 할 수 없 으 므 로'\#leftbox'로 대체 하 십시오.나의 서법 은 단지 명확 하 게 표시 하기 위해 서 이다.p>
감사:다시 한 번Philippe Wittenberg에 감 사 드 립 니 다.그의 도움 으로 이 범례 를 더욱 완벽 하 게 만 들 었 습 니 다.Mark Howels는 최초의 바디 배경 아 이 디 어 를 제공 하기 때 문 입 니 다.
Big John e-mail ©positioniseverything 마지막 업데이트 날짜:September 6,2002 Created August 24,2002
want to change. Why did the egg cross the road? Answer:It had an inclination.
자 유 롭 게 스 트 레 칭 된 세 칸 짜 리 지면(Three Column Stretch)(페이지 끝)
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]좋은 웹페이지 즐겨찾기
