HTML5 및 CSS3 프로그래밍을위한 절대 위치 지정 방법 - 더미

비디오: HTML5 - 09 링크, anchor, 절대경로, 상대경로, 사이트내 파일연결하기 2024

기본 레이아웃 메커니즘을 고려하여 절대 위치 지정 모험을 시작 합니다. 여기에서 두 단락이있는 HTML5 페이지를 볼 수 있습니다. CSS를 사용하여 각 단락에 다른 색상을 지정하고 특정 높이와 너비를 설정할 수 있습니다. 배치는, 최초의 (청색) 단락의 직후에 2 번째 (검은) 단락을 배치하는 디폴트의 레이아웃 매니저에게 맡깁니다.

HTML 설정 방법

코드는 놀랍지 않습니다:

상자. html #blueBox {배경색: 파란색; 너비: 100px; 높이: 100 픽셀;} #blackBox {배경색: 검정색; 너비: 100px; height: 100px;}

다른 지침을 제공하지 않으면 단락 (다른 블록 수준 요소와 유사)은 앞뒤에 캐리지 리턴을 제공하는 경향이 있습니다. 기본 레이아웃 기법은 중복되는 부분이 없도록합니다.

위치 지침을 추가하는 방법

새로운 것을 확인하십시오: 단락이 겹쳐져 있습니다!

이 위업은 새로운 CSS 속성 인

absPosition을 통해 이루어집니다. html #blueBox {배경색: 파란색; 너비: 100px; 높이: 100px; 위치: 절대; 왼쪽: 0px; 상단: 0 픽셀; margin: 0px;} #blackBox {background-color: black; 너비: 100px; 높이: 100px; 위치: 절대; 왼쪽: 50px; 상단: 50 픽셀; margin: 0px;}

왜 상자가 겹치면 신경 써야합니까? 음, 신경 쓰지는 않겠지 만 재미있는 부분은 다음과 같습니다. 요소의 위치와 크기를 훨씬 정확하게 제어 할 수 있습니다. 요소가 겹치지 않도록 브라우저의 일반적인 경향을 재정의 할 수도 있습니다. 이로 인해 몇 가지 흥미로운 옵션이 제공됩니다.

절대 위치 지정 작업 방법

CSS의 몇 가지 새로운 부분을 통해 이러한 요소의 크기와 위치를보다 직접적으로 제어 할 수 있습니다. 다음 상자 중 하나에 대한 CSS가 있습니다.

#blueBox {background-color: blue; 너비: 100px; 높이: 100px; 위치: 절대; 왼쪽: 0px; 상단: 0 픽셀; margin: 0px;}

position 속성을 absolute로 설정하십시오.

절대 위치 지정을 사용하면 요소가 화면에 배치되는 위치를 정확히 결정할 수 있습니다.
```
position: absolute;
```
CSS에서 왼쪽 위치를 지정하십시오.

엘리먼트가 절대 위치를 가지면 엘리먼트가 정상적인 플로우에서 제거되므로 엘리먼트의 위치를 고정시켜야한다. 왼쪽 속성은 요소의 왼쪽 가장자리를 결정합니다. 이것은 측정 단위로 지정할 수 있지만 일반적으로 픽셀 단위로 측정됩니다.
```
left: 0px;
```
CSS로 최상위 위치를 지정하십시오.

속성은 요소의 맨 위가 어디로 갈 것인지를 나타냅니다. 다시 말하지만, 일반적으로 픽셀 단위로 지정됩니다.
```
top: 0px;
```
height 및 width 속성을 사용하여 크기를 결정합니다.

일반적으로 위치를 지정할 때 크기를 결정할 수도 있습니다.
```
width: 100px; 높이: 100px;
```
여백을 0으로 설정하십시오.

절대 위치 지정을 사용하는 경우 상당히 많은 제어를 행사할 수 있습니다. 브라우저는 마진을 동일하게 취급하지 않으므로 마진을 0으로 설정하고 요소 간 간격을 수동으로 제어하는 것이 좋습니다.
```
margin: 0px;
```