Adobe Dreamweaver CS6에서 상대적으로 위치가 지정된 DIV를 만드는 방법 - 정밀도와 정확도가 높은 인형

Adobe Dreamweaver CS6의 AP (Absolute-Positioned) Div의 정밀도와 픽셀에 대한 위치 지정은 디자이너, 특히 디자이너에게 상당히 자유 롭습니다. 인쇄 기반 레이아웃의 유연성을 좋아하는 사람들.

그러나 특정 경우에 상자가 페이지의 다른 콘텐츠와 함께 인라인으로 흐르게하려는 경우가 있습니다. AP div는 다른 요소 위에 떠 다니기 때문에 다른 페이지 콘텐츠를 이동해도 위치에 아무런 영향을 미치지 않으므로 좋거나 나쁨이 될 수 있습니다.

->

보다 전통적인 인라인 동작을 위해 상대 위치 지정 을 사용하는 DIV를 만들 수 있습니다. 이를 통해 요소를 둘러싼 내용과 함께 요소를 이동시켜보다 유동적 인 레이아웃을 만들 수 있습니다. 이러한 유형의 위치 지정은 중첩 된 내용이나 항목이 다른 페이지 내용과 일치해야하는 상황에서 중요합니다.

이 작업의 경우 삽입 패널의 일반 및 레이아웃 범주에서 찾을 수있는 Div 태그 삽입 도구를 사용합니다.

상대적으로 배치 된 DIV를 만들려면 다음 단계를 따르십시오.

1. 페이지를 클릭하여 커서를 기존 AP div 내에 배치 한 다음 삽입 패널의 일반 및 레이아웃 아래에서 Div 태그 삽입 도구를 클릭합니다. 카테고리.

2. Div 태그 삽입 대화 상자가 나타나면 삽입 드롭 다운 목록에서 위치를 선택하여 새 DIV의 위치를 ​​미세 조정하십시오.

   예를 들어, 태그 시작 후를 선택하여 페이지의 기존 DIV 태그 내에 배치합니다.

   Div 태그 삽입 대화 상자의 드롭 다운 목록을 사용하여 DIV를 페이지의 기존, 전후 또는 내부에 배치 할 수도 있습니다. 삽입 드롭 다운 목록을 삽입 지점으로 설정 한 채로 드래그하여 상자를 닫거나 DIV를 생성 할 다른 위치를 선택합니다.

   

3. 적용 할 기존 클래스 선택기가있는 경우 클래스 드롭 다운 목록에서 선택하십시오. 그렇지 않으면 비워 둡니다.

4. 기존 ID를 사용할 수없는 경우 ID 필드에 새 이름을 입력하고 새 CSS 규칙 버튼을 클릭하여 새 ID를 만듭니다.

5. 새 CSS 규칙 대화 상자가 나타나면 새 선택기가 ID로 설정되고 이름 앞에 파운드 기호 (#)가 있는지 확인하십시오. 확인을 클릭하십시오.

6. CSS 규칙 정의 대화 상자가 나타나면를 클릭하고 왼쪽의 범주 목록에서 위치 지정을 선택하여 CSS 위치 지정 속성을 봅니다.

7. 위치 지정 영역의 위치 메뉴에서 상대적을 선택하고 너비 및 높이 텍스트 상자에 너비와 높이 값을 입력 한 다음 위치 지정 속성 아래에 위쪽 및 왼쪽 값을 입력합니다.확인을 클릭하십시오.

8. 확인을 클릭하여 Div 태그 삽입 대화 상자를 닫습니다.

   상대적으로 배치 된 새로운 DIV는 자리 표시 자 텍스트와 함께 나타납니다.

   

Top과 Left 값은 절대 위치 대 상대적으로 위치 된 DIV에 대해 약간 다르게 동작합니다. 상대 위치 지정의 경우이 값은 페이지 내의 설정 위치와 달리 주변 내용의 오프셋을 나타냅니다.