CSS 레이아웃 과 전통 표(table)레이아웃 의 가장 큰 차이 점 은 원래 의 포 지 셔 닝 은 모두 표를 사용 하고 표 의 간격 이나 무색 투명 한 GIF 그림 으로 문 레이아웃 판 의 간격 을 제어 하 는 것 이다.현 재 는 층(div)으로 위 치 를 정 하고 층 의 margin,padding,border 등 속성 을 통 해 판 의 간격 을 제어 합 니 다.1.DIV 를 정의 하여 전형 적 인 정의 div 예 를 분석 합 니 다.\#sample{ MARGIN: 10px 10px 10px 10px; PADDING-LEFT: 20px; PADDING-TOP: 20px; PADDING-RIGHT: 10px; PADDING-BOTTOM: 10px; BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2px solid; BORDER-LEFT: #CCC 2px solid; BORDER-TOP: #CCC 2px solid; BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 150%; WIDTH:60%; } 설명 은 다음 과 같 습 니 다:층 의 이름 은 sample 이 고 페이지 에서
이 스타일 을 호출 할 수 있 습 니 다. MARGIN 은 레이 어의 테두리 밖 에 남 겨 진 공백 을 말 하 며,페이지 의 여백 이나 다른 레이 어 와 간격 을 만 드 는 데 사 용 됩 니 다."10px 10px 10px 10px"는 각각"위,오른쪽,아래,왼쪽"(시계 방향)네 개의 사 이 드 거 리 를 대표 합 니 다.모두 같 으 면"MARGIN"으로 줄 일 수 있 습 니 다. 10px;"。여백 이 0 이면'MARGIN: 0px;"。주의:당 값 이 0 일 때 RGB 색상 값 0%를 제외 하고 백분 번 호 를 따라 야 합 니 다.다른 경우 에는 단위'px'를 따라 가지 않 아 도 됩 니 다.MARGIN 은 투명 요소 로 색상 을 정의 할 수 없습니다. PADDING 은 층 의 테두리 에서 층 의 내용 사이 의 공백 을 말한다.'PADDING-LEFT 는 왼쪽 테두리 에서 내용 까지 의 거 리 를 가리 키 는 것 으로 유추 된다.모두 같다 면'PADDING:0px'로 줄 일 수 있다.PADDING 은 투명 요소 로 색상 을 정의 할 수 없습니다. BORDER 는 층 의 테 두 리 를 말 합 니 다."BORDER-LIGHT: #CCC 2px solid;"정의 층 의 오른쪽 테두리 색상 은'\#CCC'이 고 너 비 는'2px'이 며 스타일 은'solid'직선 입 니 다.점선 스타일 을 원한 다 면"dotted"를 사용 할 수 있 습 니 다. BACKGROUND 는 정의 층 의 배경 입 니 다.2 단계 로 나 누 어 정의 하고 그림 배경 을 정의 하 며'url(.../images/bg'을 사용 합 니 다.logo.gif)배경 그림 경 로 를 지정 합 니 다.다음으로 배경 색'\#FEFEFE'를 정의 합 니 다.'on-repeat"는 배경 그림 을 반복 할 필요 가 없 으 며,가로 반복 용"repeat-x"가 필요 하 다 면 세로 반복 용"repeat-y"를 사용 하여 전체 배경 을 반복 적 으로 깔 아 주 는"repeat"를 말한다.오른쪽 bottom;"배경 그림 을 오른쪽 아래 에서 시작 하 는 것 을 말 합 니 다.배경 그림 이 없 으 면 배경 색 BACKGROUND 만 정의 할 수 있 습 니 다. #FEFEFE COLOR 는 글꼴 색상 을 정의 하 는 데 사 용 됩 니 다.지난 절 에 소개 되 었 습 니 다. TEXT-ALIGN 은 층 의 내용 배열 방식 을 정의 하 는데 사 용 됩 니 다.center 는 가운데,left 는 왼쪽,right 는 오른쪽 입 니 다. LINE-HEIGHT 정의 행 높이,150%는 높이 가 표준 높이 의 150%를 가리 키 며 LINE-HEIGHT:1.5 또는 LINE-HEIGHT:1.5em 도 같은 뜻 이다. WIDTH 는 정의 층 의 너비 로 500 px 와 같은 고정 값 을 사용 할 수도 있 고 백분율 을 사용 할 수도 있 습 니 다.여기 의'60%'와 같 습 니 다.주의해 야 할 것 은:이 너 비 는 내용 의 너 비 를 가리 키 며 margin,border,padding 을 포함 하지 않 습 니 다.그러나 일부 브 라 우 저 에 서 는 그렇게 정의 되 지 않 으 니 많이 시도 해 보 세 요. 다음은 이 층 의 실제 표현 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.여 기 는 프레젠테이션 내용 입 니 다.프 리 젠 테 이 션 내용 입 니 다.테 두 리 는 2px 의 회색 이 고 배경 그림 은 오른쪽 아래 에서 중복 되 지 않 습 니 다.내용 거리 와 왼쪽 테두리 20px,내용 이 가운데 이 며 모든 것 이 예상 과 같 습 니 다.hoho,비록 예 쁘 지 는 않 지만 가장 기본 적 인 것 입 니 다.그것 을 파악 하면 당신 은 이미 절반 의 CSS 레이아웃 기술 을 배 웠 습 니 다.바로 이 겁 니 다.어렵 지 않 죠?반 은 뭐 예요?나머지 반 은 층 과 층 사이 의 포 지 셔 닝 이다.나 는 뒤에서 차츰차츰 설명 할 것 이다.)2.CSS 2 박스 모델 은 1996 년 에 CSS 1 이 출시 된 후부 터 W3C 조직 은 모든 웹 페이지 의 대상 을 하나의 박스(box)에 두 는 것 을 제안 했다.디자이너 는 정 의 를 만들어 이 상자 의 속성 을 제어 할 수 있다.이런 대상 은 단락,목록,제목,이미지 와 층를 포함한다.박스 모델 은 주로 네 개의 영역 을 정의 합 니 다.내용(content),테두리 거리(padding),경계(border)와 경계(margin)입 니 다.위 에서 우리 가 말 한 sample 층 은 전형 적 인 상자 이다.초보 자 에 게 는 margin,background-color,background-image,padding,content,border 간 의 차원,관계 와 상호 영향 을 잘 모 릅 니 다.여기 에는 당신 의 이해 와 기억 에 편리 하도록 상자 모형 의 3D 설명도 가 제공 되 어 있 습 니 다. 3.보조 그림 은 모두 배경 처리 용 XHTML+CSS 레이아웃 을 사용 합 니 다.처음에 익숙 하지 않 았 던 기술 이 있 습 니 다.사고방식 이 전통 적 인 표 레이아웃 과 다르다 고 해 야 합 니 다.즉,모든 보조 그림 은 배경 으로 이 루어 집 니 다.이와 같다:BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; 내용 에
![]()
로 직접 삽입 할 수 있 지만 허용 되 지 않 습 니 다.여기 서'보조 그림'은 페이지 로 표현 할 내용 의 일부분 이 아니 라 수식,간격,알림 에 만 사용 되 는 그림 을 말한다.예 를 들 어 앨범 에 있 는 그림,사진 뉴스 에 있 는 그림,위의 3d 박스 모델 그림 은 모두 내용 의 일부분 에 속 합 니 다.그들 은
![]()
요소 로 페이지 에 직접 삽입 할 수 있 고 다른 로고,제목 그림,목록 접두사 그림 은 모두 배경 방식 이나 다른 CSS 방식 으로 표시 해 야 합 니 다.이렇게 하 는 이 유 는 두 가지 가 있다.표현 과 구 조 를 철저히 분리 시 키 고 CSS 로 모든 외관 표현 을 제어 하여 개편 하기 쉽다. 페이지 를 더욱 사용 하기 쉽 고 친화력 있 게 합 니 다.예 를 들 어 맹인 이 스크린 리 더 를 사용 하면 배경 기술 로 이 루어 진 그림 은 낭독 되 지 않 는 다.
