차례:
비디오: CSS width, height, and overflow | Computer Programming | Khan Academy 2024
)의 사용입니다. 유체 레이아웃은 매우 뛰어나며 매우 유연하며 HTML5로 작성하기도 어렵지 않습니다 그리고 CSS3. 때로는 고정 너비 레이아웃을 사용하는 것이 좋습니다. 특히 레이아웃을 특정 배경 이미지와 일치시키려는 경우에 유용합니다.
고정 너비 레이아웃의 기본 속성은 고정 된 측정을 사용하는 것입니다
HTML 설정 방법
일반적으로 HTML 코드는 최소화되어 있습니다.
fixedWidth. html고정 폭 레이아웃
왼쪽 열
오른쪽 열
바닥 글
너비를 CSS가
#header {background-color: # e2e393; border-bottom: 3px solid} CSS 코드는 다음과 같습니다. 검정색, 텍스트 맞춤: 가운데, 너비: 800px, 패딩 윗면: 1em;} # 왼쪽 {float: 왼쪽; 너비: 200px; 맑음: 왼쪽; 테두리 오른쪽: 1px 단색 검정; 높이: 30em; 오버플로: 자동; 패딩 오른쪽:. 5em;} #right {float: left; 너비: 570px; 높이: 30em; 오버플로: 자동; 패딩 왼쪽:. 5em;} #footer {width: 800px; 텍스트 정렬: 가운데; background-color: # e2e393; border-top: 3px 더블 블랙; clear: both;}
모두 매우 간단합니다.
각 요소에 색상을 지정하여 상황을 확인합니다.
각 div에 다른 배경색을 부여하여 어떤 일이 일어나고 있는지 확인할 수 있습니다.-
레이아웃의 전체 너비를 결정합니다.
전체 레이아웃의 대상 너비를 지정합니다. 합리적인 표준 너비이기 때문에 800 픽셀을 선택했습니다.
-
페이지 전체 요소의 너비를 조정합니다.
종종 디자인의 전체 너비를 차지하는 머리말과 꼬리말 같은 요소로 시작하는 것이 가장 쉽습니다.
-
기둥을 뜨다.
각 열을 왼쪽으로 뜨십시오.
-
열 너비를 설정합니다.
열 너비를 전체 디자인의 너비까지 합산하여 시작하십시오. 나중에 여백과 테두리를 약간 조정합니다.
-
왼쪽 열을 지 웁니다.
왼쪽 열에 명확한: 왼쪽 규칙이 적용되어 있는지 확인하십시오.
-
열 높이를 설정하십시오.
각 열에 동일한 높이를 부여하십시오. 이렇게하면 테두리 또는 배경색을 열에 추가하면 상황이 올바르게 보입니다.
-
테두리 및 패딩 조정.
테두리, 여백 및 여백을 사용하여 원하는 모양을 얻을 수 있도록 페이지를 조정하십시오.
-
너비를 다시 조정하십시오.
테두리, 패딩 및 여백을 추가하면 기존 요소의 너비를 변경할 수 있습니다.이러한 속성을 수정 한 후에는 레이아웃을 자세히 살펴보고 엉망이되어 버리지 않았는지 확인하고 필요한 경우 다양한 너비를 수정하십시오.