디자인 뷰에서 요소 위치 지정
업데이트: 2007년 11월
HTML 디자이너에서 HTML 페이지 또는 ASP.NET 웹 페이지를 만드는 경우 요소는 실제로 위에서 아래로 레이아웃됩니다. 기본적으로 브라우저에 페이지를 렌더링하면 요소도 이와 동일하게 위에서 아래로 렌더링됩니다. 이를 선형 레이아웃이라고도 합니다.
페이지의 아무 위치에서나 가로/세로 좌표를 사용하여 요소를 2차원 형식으로 레이아웃할 수도 있습니다. 이 레이아웃 옵션은 스타일을 통해 사용할 수 있는 위치 지정 옵션을 활용합니다.
디자인 뷰에서 요소를 끌어 페이지에 배치할 수 있으며 요소를 선택한 다음 위치 지정 옵션을 적용할 수 있습니다. 이렇게 하면 디자인 뷰에서 페이지의 지정된 위치에 요소가 표시됩니다. 요소의 탭 핸들을 끌어 요소를 다시 배치할 수 있습니다. 소스 뷰에서는 개별 요소의 태그에 위치 지정 옵션을 설정할 수 있습니다.
페이지가 렌더링되면 설정된 위치 정보를 사용하여 브라우저에 요소가 표시됩니다.
선형 레이아웃
위치 지정 스타일 속성이 설정되지 않은 요소는 페이지 내에서 위에서 아래로 배치되고, 페이지나 요소의 컨테이너 요소에 대한 dir 특성 설정 또는 브라우저의 언어 설정에 따라 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 배치됩니다. 모든 웹 브라우저에서는 이 레이아웃을 사용하는 HTML 문서를 표시할 수 있습니다. 경우에 따라 페이지의 크기를 조정하면 요소의 위치가 변경될 수 있습니다.
페이지에 선형 레이아웃을 사용하는 경우 table 요소 내에 요소를 맞추거나 위치 지정 스타일 또는 텍스트 맞춤 속성과 함께 div 요소를 사용할 수 있습니다. 그러나 요소가 겹칠 수는 없습니다. 페이지 크기가 조정되면 테이블 및 셀 너비에 사용하는 단위가 절대 단위인지 아니면 백분율인지에 따라 요소가 이동할 수도 있습니다.
2차원 위치 지정
개별 요소에 위치 지정 옵션을 적용하여 페이지에서 정확한 위치에 요소를 배치할 수 있습니다.
또한 페이지에 추가하는 새 요소에 대한 위치 지정 옵션을 지정할 수도 있습니다.
Microsoft Visual Web Developer 웹 개발 도구를 사용하면 CSS 스타일시트에 대해 W3C 사양에 정의된 옵션과 일치하는 위치 지정 옵션을 설정할 수 있습니다. 이러한 위치 지정 옵션은 XHTML 1.1을 지원하는 브라우저를 포함하여 W3C HTML 4.0 표준을 구현하는 모든 브라우저에서 유효합니다.
다음과 같은 위치 지정 옵션을 사용할 수 있습니다.
absolute
페이지에서 left, right, top 및 bottom 스타일 속성 조합으로 정의된 위치에 요소가 렌더링됩니다. 0,0 위치는 현재 요소의 부모를 기준으로 정의됩니다. 부모는 위치 정보가 들어 있는 첫 번째 컨테이너 요소입니다. 예를 들어 위치 정보를 포함하는 div 요소 내에 현재 요소가 있는 경우 div 요소의 위치를 기준으로 절대 위치가 계산됩니다. 현재 요소에 위치가 들어 있는 컨테이너 요소가 없는 경우에 위치 정보는 body 요소를 기준으로 계산됩니다.
relative
페이지에서 left 및 top 스타일 속성으로 정의된 위치에 요소가 렌더링됩니다. 이 옵션은 페이지 흐름에서 요소의 위치에 따라 0,0 위치가 정의된다는 점에서 absolute와 다릅니다. 상대 위치가 지정되고 top과 left가 모두 0으로 설정된 요소는 페이지에서 정상적으로 배치됩니다.
.gif "참고")
참고:절대 또는 상대 위치를 사용하는 요소는 페이지의 태그에 포함된 선언과 비교하여 순서가 다르게 표시될 수 있으므로 페이지 모양이 혼란스러울 수 있습니다. 예를 들어 소스 뷰에서 단추를 태그의 첫 번째 요소로 정의하지만 위치를 설정한 후에는 렌더링된 페이지 또는 디자인 뷰에서 단추가 마지막 요소로 나타날 수 있습니다.
static
선형 레이아웃을 사용하여 요소가 렌더링됩니다. 즉, 요소에 2차원 위치가 사용되지 않습니다. 개별 컨트롤에 대해 테마 또는 스타일시트에서 상속되는 설정을 재정의하는 위치 지정 옵션을 설정하려는 경우 이 옵션을 선택할 수 있습니다.
Visual Web Developer에서는 개별 컨트롤 또는 나중에 추가할 컨트롤에서 기존 위치 정보를 제거하는 데 사용할 수 있는 Not Set이라는 위치 지정 옵션도 제공합니다.
정적 텍스트 또는 요소 그룹 위치 지정
부동 정적 텍스트 또는 요소 그룹을 하나의 단위로 만들려면 페이지에 레이어를 추가하면 됩니다. 레이어는 위치 정보가 포함된 div 요소이므로 페이지 내의 아무 위치에나 끌어 올 수 있습니다. 그런 다음 텍스트를 입력하거나 div 요소로 다른 요소를 끌어 올 수 있습니다. Visual Web Developer의 서식 메뉴에 포함된 명령을 사용하여 레이어를 추가할 수도 있고, div 요소를 직접 만든 다음 위치 정보를 수동으로 추가할 수도 있습니다.
위치를 모눈으로 제한
절대 또는 상대 위치를 지정하고 픽셀을 위치 지정 기준으로 사용하는 경우, 즉 left 및 top 속성의 단위가 픽셀인 경우 보이지 않는 모눈에 요소를 맞추도록 옵션을 설정할 수 있습니다. 이렇게 하면 페이지에서 요소를 맞출 수 있습니다. 자세한 내용은 옵션 대화 상자, HTML 디자이너, CSS 위치 지정을 참조하십시오.
요소 레이어로 표시
절대 또는 상대 위치를 사용하는 경우 요소를 겹칠 수 있으며 이렇게 하면 요소가 겹쳐진 형태로 브라우저에 렌더링됩니다. 테이블을 사용하여 요소를 배치할 경우에는 개체를 겹칠 수 없습니다.
절대 또는 상대 위치가 지정된 요소는 3차원에서 요소의 순서(뒤에서 앞으로)를 지정하는 z-index 속성을 포함할 수 있습니다. 두 요소가 같은 공간을 공유할 경우에는 z-인덱스 특성 값이 큰 요소가 앞에 표시됩니다. 디자인 뷰에서 위치 설정 명령을 사용하는 경우 맨 뒤에 있는 요소에 대해 100부터 시작하여 z-index 속성이 자동으로 설정됩니다. 소스 뷰에서 위치 지정 속성을 추가할 경우에는 z-index 속성을 수동으로 추가해야 합니다.