옵션 대화 상자, HTML 디자이너, CSS 위치 지정
업데이트: 2007년 11월
CSS 위치 지정 페이지에서는 다음 방법 중 하나로 요소를 만들 때 디자인 뷰에서 요소를 배치하는 방법을 결정하는 옵션을 설정합니다.
도구 상자에서 요소 끌어오기
다른 페이지 등의 다른 소스에서 요소 끌어오기
이전에 클립보드에 복사해 놓았던 요소 붙여넣기
이 대화 상자에 액세스하려면
Microsoft Visual Web Developer에서 도구를 클릭한 다음 옵션을 클릭합니다.
옵션 대화 상자가 열립니다.
왼쪽 패널에서 HTML 디자이너 노드를 확장하고 CSS 위치 지정을 클릭합니다.
환경 설정을 웹 개발용으로 구성한 경우 모든 설정 표시 확인란을 선택하지 않으면 이 노드의 요소를 사용할 수 없습니다. 환경 설정에 대한 자세한 내용은 방법: 선택 설정 변경을 참조하십시오.
.gif "참고") 참고: |
|---|
모든 설정 표시 확인란을 선택하면 표시되는 텍스트 편집기, HTML 노드에서 추가 HTML 옵션을 확인할 수 있습니다. |
HTML 서식 지정에 대한 자세한 내용은 Visual Web Developer의 HTML 편집기에서 요소의 서식 지정을 참조하십시오.
작업
UI 요소
위치 옵션
도구 상자, 붙여넣기 또는 끌어서 놓기를 사용하여 추가한 컨트롤의 위치를 다음으로 변경
디자인 뷰에서 페이지로 끌어 놓거나 붙여넣은 요소에 대한 기본 CSS(CSS 스타일시트) 위치 옵션을 지정합니다. 위치 정보는 요소의 style 특성에 대한 position 속성을 사용하여 지정됩니다.이 설정은 소스 뷰에 영향을 주지 않습니다.
확인란의 선택을 취소하면 편집기에서 요소의 위치 특성을 변경하지 않고 도구 상자나 다른 소스에 정의된 그대로 또는 클립보드에 복사된 그대로 요소를 끌어 놓거나 붙여넣습니다. 확인란을 선택하면 끌어다 놓거나 붙여넣을 때 편집기에서 선택한 옵션에 따라 요소의 위치 특성을 설정합니다.
값
설명
절대 위치
편집기에서 position 속성을 absolute로 설정하고 z-index, left 및 top 스타일 속성을 설정합니다. 0,0 위치는 현재 요소의 부모를 기준으로 정의됩니다. 부모는 위치 정보가 들어 있는 첫 번째 컨테이너 요소입니다. 현재 요소에 위치가 들어 있는 컨테이너 요소가 없는 경우에 위치 정보는 body 요소를 기준으로 계산됩니다.
상대 위치
편집기에서 position 속성을 relative로 설정하고 z-index, left 및 top 스타일 속성을 설정합니다. 이 옵션은 페이지 흐름에 있어서의 요소 위치에 따라 0,0 위치가 정의된다는 점에서 절대 위치와 다릅니다. 상대 위치가 지정되고 top과 left가 모두 0으로 설정된 요소가 페이지 흐름에 정상적으로 나타납니다.
정적 위치
편집기에서 position 속성을 static으로 설정합니다. 이 옵션은 선형 레이아웃을 사용하여 컨트롤을 렌더링합니다. 요소가 CSS 스타일시트에서 상속받을 수 있는 스타일 설정을 명시적으로 재정의하려는 경우에 위치를 static으로 설정하면 유용합니다.
위치 특성 없음
편집기에서 모든 위치 정보를 제거합니다. 이 옵션은 기본적으로 선형 레이아웃을 사용하여 렌더링합니다. 컨트롤의 위치는 CSS 스타일시트에서 상속된 스타일 설정의 영향을 받을 수 있습니다.
position 특성의 효과에 대한 자세한 내용은 MSDN Library에서 "position attribute" 또는 "position property"를 참조하십시오.
픽셀 기반 위치 및 크기를 다음 설정에 맞춤
간격을 설정할 수 있는 보이지 않는 모눈에만 끌어 놓습니다. 이 설정은 위치 정보가 픽셀로 설정된 요소에만 적용됩니다.참고:위치 정보가 없는 요소나 position 속성이 static으로 설정된 요소를 끌어 놓을 수 있습니다. 그러나, 이러한 요소는 문서의 흐름 내에서만 끌어 놓을 수 있고 페이지 내 임의의 위치에는 끌어 놓을 수 없습니다.
가로 간격 조정
보이지 않는 모눈에 있는 가로 정지 위치 사이의 픽셀 수입니다.세로 간격 조정
보이지 않는 모눈에 있는 세로 정지 위치 사이의 픽셀 수입니다.