CSS를 사용하여 HTML 요소 배치

• 할 수있다 16, 2024

CSS 규칙을 사용하면 HTML 요소를 원하는 곳에 정확하게 배치 할 수 있습니다. 주변에있는 다른 요소에 반응하는 방식을 조정하거나 완전히 숨길 수도 있습니다. CSS 게재 위치 속성에 대한 분석은 다음과 같습니다.

표시 :이 속성은 요소가 표시되는 방법을 정의합니다. 디스플레이를 "없음"으로 설정하면 요소가 완전히 숨겨지고 다른 값은 요소가 다른 속성 및 요소에 반응하는 방식을 변경할 수 있습니다. 예를 들어, div는 기본적으로 "block"으로 표시되도록 설정되어 있으며 사각형 객체로 작동하지만 "display : inline"을 사용하여 div가 단락처럼 작동하도록 할 수 있습니다. 또는 반대의 작업을 수행하고 "display : block"을 사용하여 단락이 div처럼 작동하도록 할 수 있습니다.

위치 : 요소가 요소 주위의 요소에 반응하는 방식을 정의합니다. 요소는 기본적으로 "position : static"을 사용합니다. 즉, HTML 코드에 표시되는 순서대로 표시됩니다. "위치 : 상대"는 요소의 정적 위치가 계산 된 다음 "top"및 "left"속성에 표시 한 내용에 따라 오프셋됩니다. 다른 페이지 요소는 상대 요소가 여전히 정적 위치에있는 것처럼 작동합니다. "위치 : 절대"요소는 위, 왼쪽, 오른쪽 및 아래쪽 속성의 값만을 기준으로 위치를 고정하여 정적 위치를 무시합니다. 또한 다른 요소는 해당 요소를 무시합니다 (주의하지 않으면 약간의 겹치는 부분이 생길 수 있습니다). "위치 : 고정"은 방문자가 페이지를 스크롤하더라도 요소가 해당 위치를 유지한다는 점을 제외하면 "위치 : 절대"와 유사합니다.

가시성 : 요소가 페이지에 표시되는지 여부를 결정합니다. "display : none"과 "visibility : hidden"의 차이점은 전자의 경우 다른 페이지 요소가 보이지 않는 객체가없는 것처럼 동작한다는 것입니다. 후자의 경우 다른 요소는 숨겨진 요소를위한 장소를 보유하게됩니다. 기본 설정은 "표시"입니다.

Float : 요소가 다른 요소의 왼쪽 또는 오른쪽으로 계단식으로 배열되는지 또는 전혀 계단식으로 표시되지 않는지를 설정합니다 (기본값). 이 속성은 상대 요소를 올바르게 배치하는 데 매우 유용합니다. 플로팅 요소의 너비를 설정해야합니다. 그렇지 않으면 올바르게 표시되지 않습니다. 또한 하나의 요소에 float를 사용하면 주변의 모든 요소에 대한 속성을 설정해야 할 것입니다.

Clear :이 속성은 "float"속성과 함께 작동합니다. 요소가 다른 요소를 그 주위에 띄울 수있는 방법을 결정합니다. "클리어 : 왼쪽"은 다른 요소가 왼쪽으로 떠 다닐 수 없음을 의미합니다. "clear : right"는 오른쪽을 차단하고 "clear : both"는 요소가 어느 한쪽으로도 떠오를 수 없음을 의미합니다. 기본 설정은 "clear : none"입니다 (즉, 다른 요소가 한쪽으로 뜰 수 있음).

비디오 지침: 5.공간을 만들 때 사용하는 태그 - HTML/CSS (할 수있다 2024).