절대 위치 지정을 사용하여 HTML5 및 CSS3 페이지 레이아웃을 작성하는 방법 - 더미

절대 배치를 사용하여 HTML5 및 CSS3 페이지 레이아웃을 만들 수 있습니다. 이 프로세스에는 몇 가지 단점이 있습니다. 플로팅 기술에 비해 절대 위치 지정을 통해 페이지를보다 잘 제어하는 ​​경향이 있지만 절대 레이아웃의 경우 더 많은 계획과 세심한주의가 필요합니다.

절대적으로 배치 된 레이아웃을 생성하는 기술은 플로팅 기술 (일반적인 의미에서)과 유사합니다.

절대 레이아웃 개요

페이지를 절대 위치 지정과 함께 시작하기 전에 전체 프로세스를 계획하는 것이 좋습니다. 다음은 프로세스 진행 방법의 예입니다.

1. 사이트 계획.

   사이트 레이아웃의 모양을 지정하는 그림이있는 것이 중요합니다. 절대 위치 지정에서는 모든 요소의 크기와 위치를 지정해야하므로 부동 설계보다 계획이 훨씬 중요합니다.

2. 전체 크기를 지정하십시오.

   이 특정 유형의 레이아웃은 고정 크기입니다. 다른 모든 요소가 들어있는 모든 div를 만들고이 div의 크기를 지정하십시오 (현재 고정 단위로, 보통 px 또는 em).

3. HTML을 만듭니다.

   HTML 페이지는 페이지의 각 부분에 대해 이름이 지정된 div가 있어야합니다 (헤더, 열 및 바닥 글이있는 경우 각각에 대해 div가 필요합니다).

4. CSS 스타일 시트 작성.

   CSS 스타일은 내부 또는 링크 될 수 있지만 절대 위치 지정은 플로팅보다 약간의 마크 업이 필요하기 때문에 외부 스타일이 선호됩니다.

5. 각 요소를 식별하십시오.

   각 요소에 다른 색상의 경계를 지정하면 어떤 일이 일어나는지 쉽게 볼 수 있습니다.

6. 각 요소를 절대적으로 배치합니다.

   설정 위치: 레이아웃의 각 요소에 대한 CSS의 절대 값입니다.

7. 각 요소의 크기를 지정하십시오.

   귀하의 다이어그램에 따라 각 요소의 높이와 너비를 설정하십시오. (당신은 다이어그램을 만들었습니까? )

8. 각 요소의 위치를 ​​결정하십시오.

   left 및 top 속성을 사용하여 레이아웃에서 각 요소가 어디에 배치되는지 결정합니다.

9. 레이아웃을 조정하십시오.

   여백과 테두리를 조정하는 것이 좋습니다. 모든 것을 작동 시키려면 조정이 필요할 수 있습니다.

HTML 작성 방법

HTML 코드는 매우 간단합니다:

absLayout. html

절대 위치 지정이있는 레이아웃

HTML 파일은 absLayout이라는 외부 스타일 시트를 호출합니다. CSS.

CSS 추가

CSS 코드는 약간 길지만 그리 어렵지는 않습니다.

/ * absLayout.css * / #all {border: 1px 검정색; 너비: 800px; 높이: 600px; 위치: 절대; 왼쪽: 0px; top: 0px;} #head {border: 1px solid green; 위치: 절대; 너비: 800px; 높이: 100px; 상단: 0 픽셀; 왼쪽: 0px; text-align: center;} #menu {border: 1px solid red; 위치: 절대; 너비: 140px; 높이: 500px; 상단: 100x; 왼쪽: 0px; 패딩 왼쪽: 5px; 패딩 오른쪽: 5 픽셀;} #content {테두리: 1 픽셀 청색; 위치: 절대; 너비: 645px; 높이: 500px; 상단: 100x; 왼쪽: 150px; padding-left: 5px;}

절대 위치 지정을 사용하여 만든 정적 레이아웃에는 다음과 같은 몇 가지 중요한 기능이 있습니다.

• 모든 것을 포지셔닝해야합니다. 절대 위치 지정을 사용하기 시작한 후에는 사이트 전체에서 사용해야합니다. 정상적인 흐름 메커니즘이 더 이상 존재하지 않으므로 모든 주요 페이지 요소에 절대 위치 지정이 필요합니다.

  절대 위치를 가진 요소 인 내부의 부동 레이아웃 을 계속 사용할 수 있지만 모든 주요 요소 (제목, 열 및 기초)는 절대 위치를 가질 필요가 있습니다.

• 크기와 위치를 지정해야합니다. 유동 레이아웃을 사용하면 여전히 일정한 유동성을 장려하고 있습니다. 절대 위치 지정이란 레이아웃의 각 요소의 모양과 크기를 모두 책임지는 것을 의미합니다. 절대 위치 지정은 적응력이 떨어집니다.

• 이 기술을 사용하면 특정 화면의 너비와 높이에 상당히 좌우됩니다. 당신은 태블릿과 핸드폰에 적응하는데 어려움을 겪을 것입니다. 모든 너비와 높이가 합쳐 져야합니다.

• 디스플레이의 크기를 결정할 때 높이, 너비, 여백, 패딩 및 테두리를 모두 추가해야합니다. 그렇지 않으면 이상한 결과가 나타납니다. 절대 위치 지정을 사용하면 모든 너비와 높이를 계산하여 계산기와 함께 상당한 시간을 할애 할 수 있습니다.