비디오: DIV 위치지정 position: absolute; 2025
Adobe Dreamweaver CS6에서 그린 각 절대 위치 지정 (AP) 부분은 AP 요소 패널에 자동으로 나열됩니다 (창 → AP 요소로 표시). AP 요소 패널을 사용하면 페이지에서 AP div를 선택, 숨기기 및 표시 할 수 있습니다. 이 패널은 페이지에 많은 AP div가 있고 그 중 정확하게 이동하려는 경우 유용합니다.
무엇보다도 AP div의 속성을 해당 ID 스타일에서 수정할 수 있기 때문에이 패널은 어떤 ID 스타일이 AP div에 속하는지 파악하는 데 도움이됩니다.
AP 요소 패널은 종종 사용자가 원하는 경우를 위해 CSS 스타일 패널로 그룹화됩니다.
상자 (AP div)를 수정하려면 다음 단계를 따르십시오.
-
창 → AP 요소를 선택하여 AP 요소 패널을 엽니 다.
-
패널에서 apDiv1을 찾아 선택하여 페이지에서 강조 표시합니다.
속성 관리자는 다른 속성과 함께 크기와 위치를 표시합니다.
-
속성 관리자의 텍스트 상자를 사용하여 W 필드에 숫자를 입력하여 상자 너비를 변경하고 H 필드에 숫자를 입력하여 상자 높이를 변경합니다.
-
Bg 색상 옆에있는 견본을 클릭하고 팝업 견본 패널에서 색상을 선택하여 상자의 배경색을 설정하십시오.
테두리 또는 패딩과 같은 추가 속성을 보려면 CSS 스타일 패널에 추가하십시오.
-
CSS 스타일 패널이 아직 표시되어 있지 않으면 창 → CSS 스타일을 선택하여 엽니 다.
-
상자를 제어하는 # apDiv1 ID 스타일을 두 번 클릭하십시오.
CSS 규칙 정의 대화 상자가 나타납니다.
-
테두리를 변경하려면 왼쪽에서 테두리 범주를 선택하십시오.
-
스타일 열에서 상단 드롭 다운 목록을 사용하여 네 모퉁이에 테두리 스타일 (예: 단색)을 설정합니다.
너비 범주 아래의 위쪽 드롭 다운 목록을 사용하여 네면의 테두리 두께 (예: 중간)를 선택합니다. 색상 열 아래의 최상위 색상 선택기를 사용하여 네면의 경계 색을 지정하십시오.
스타일, 너비 또는 색상에 대해 모든면 또는 다른면에 다른 값을 지정하려면 해당 열 아래에서 모두 동일 확인란의 선택을 취소합니다.
-
왼쪽의 상자 범주에서 채우기 아래에서 네면의 모든 패딩을 원하는 두께로 설정합니다 (예: 텍스트 상자에 5px 입력).
-
확인을 클릭하여 패널을 종료하고 변경 사항을 적용하십시오.
적용한 CSS 속성이 페이지의 apDiv1 상자에 미치는 영향을 확인할 수 있습니다.
AP 요소 패널 아래에 표시된 상자를 숨기려면 눈 아이콘이 나타날 때까지 이름 왼쪽에있는 눈 아이콘 아래의 열을 클릭하십시오.상자가 다시 나타나게하려면 상자가 다시 열릴 때까지 눈 아이콘을 클릭하십시오.
AP 요소 패널의 맨 위에는 기본적으로 선택되어 있지 않은 겹침 방지 확인란이 있습니다. AP div가 서로 쉽게 겹칠 수 있으므로이 확인란을 선택하면 서로 옆에 상자를 강제로 배치하고 서로 위에 새 상자를 만들지 않도록하여이 동작을 무시합니다.
