CSS 웹 페이지 레이아웃 입문 튜 토리 얼 2:1 열 적응 폭

자가 적응 레이아웃 은 웹 디자인 에서 흔히 볼 수 있 는 레이아웃 형식 으로 자가 적응 레이아웃 은 브 라 우 저 창의 크기 에 따라 너비 와 높이 를 자동 으로 바 꿀 수 있 고 매우 유연 한 레이아웃 형식 으로 좋 은 자가 적응 레이아웃 사 이 트 는 서로 다른 해상도 의 디 스 플레이 에 가장 좋 은 효 과 를 제공 할 수 있다.실제 div 기본 상태 가 전체 줄 의 공간 을 차지 하 는 것 은 너비 가 100%인 자가 적응 구조의 표현 형식 입 니 다.한 열 자가 적응 구조 가 우리 가 해 야 할 일 도 매우 간단 합 니 다.폭 을 고정 값 에서 백분율 값 으로 바 꾸 면 됩 니 다

#layout {  
    border: 2px solid #A9C9E2;  
    background-color: #E8F5FE;  
    height: 200px;  
    width: 80%;  
} 

CSS 는 대부분의 수 치 를 매개 변수 로 하 는 스타일 속성 에 백분율 을 제공 합 니 다.width 너비 속성 도 예외 가 아 닙 니 다.여기 서 우 리 는 폭 을 고정 너비 의 300 px 에서 80%로 바 꾸 었 습 니 다.아래 의 미리 보기 효과 에서 볼 수 있 듯 이 div 의 폭 은 브 라 우 저 너비 의 80%값 으로 바 뀌 었 습 니 다.적응 하 는 장점 은 브 라 우 저 창 을 확대 하거나 축소 할 때 그 폭 은 브 라 우 저 현재 너비 와 비례 합 니 다. [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]폭 설정 시 원래 300 px 에서 80%로 변경 하면 됩 니 다.