CSS Position 속성을 사용하여 웹 페이지에 요소 배치

할 수있다 21, 2024

CSS (Cascading Style Sheets) 이전에는 웹 페이지에서 개체의 위치를 제어 할 수있는 기능이 제한되었습니다. HTML 테이블을 사용하여 위치를 약간 제어 할 수는 있지만 매우 정확하지는 않습니다. 이제 CSS를 사용하면 웹 페이지에서 각 요소의 배치 방식을 정확하게 제어 할 수 있습니다.

CSS position 속성을 사용하여 웹 페이지에 요소를 배치하려면 먼저 웹 브라우저와 통신하는 데 사용되는 용어에 대해 논의해야합니다. CSS는 웹 페이지의 너비와 높이뿐만 아니라 웹 브라우저의 크기도 고려합니다.

브라우저 폭과 높이
처음에는 이것이 열린 브라우저 창을 의미한다고 생각할 수 있습니다. 그러나 실제로 컨트롤과 버튼을 포함한 전체 브라우저를 나타냅니다.
라이브 폭과 높이
이것은 브라우저 표시 영역의 용어입니다. 컨트롤이 포함되어 있지 않습니다.
문서 너비 및 높이
웹 페이지의 전체 너비와 높이입니다. 이 치수가 라이브 너비 및 높이보다 큰 경우 브라우저는 필요에 따라 스크롤 막대를 표시합니다.

CSS를 사용하여 웹 페이지의 일부를 배치 할 수있는 경계에 대한 용어를 알고 있으므로 4 가지 위치 값을 살펴 보겠습니다.

공전
이것이 기본값입니다. 요소에 다르게 지정하지 않으면 브라우저는 정적 위치 지정을 사용합니다. 정적 위치 지정을 사용하면 웹 페이지에서 요소를 재배치 할 수 없습니다. 그렇다면 브라우저는 웹 페이지에서 각 개체를 어디에 둘지를 어떻게 결정합니까? HTML 코드에서 발생하는 순서대로 각 요소를 배치합니다. 로고 이미지, 인사말 및 HTML에 저작권 표시가있는 경우 브라우저는이를 웹 페이지에 순서대로 배치합니다. 인사말을 로고 이미지 위로 이동할 수 없습니다.
상대적인
상대 위치는 HTML 코드의 요소 순서가 페이지의 요소 흐름을 제어한다는 점에서 정적과 동일하게 작동합니다. 그러나 상대 위치를 사용하여 웹 페이지의 다른 요소와 관련하여 요소의 위치를 제어 할 수 있습니다.
순수한
요소와 함께 절대 위치를 사용하면 해당 요소가 나머지 웹 페이지와 독립적이됩니다. 배치는 더 이상 HTML 순서에 따라 결정되지 않으므로 X 및 Y 좌표를 사용하여 요소를 배치해야합니다.
결정된
이것은 절대 위치와 동일하게 작동합니다. 그러나 위치가 고정 된 요소는 웹 페이지와 함께 스크롤되지 않습니다. 페이지가 위로 스크롤 될 때 표시하려는 로고나 메뉴에 유용한 기능입니다.

비디오 지침: [CSS 기초이론] - CSS 포지셔닝 – 엘리먼트 배치하기 (속성 : position: fixed) (할 수있다 2024).

CSS 위치 속성, HTML, CSS, CSS 위치 속성, 정적 위치, 상대 위치, 절대 위치, 고정 위치, 웹 페이지에 요소를 배치하는 방법, 웹 페이지에 요소를 배치하는 방법을 사용하여 웹 페이지에 요소 배치

이전 기사

다음 기사

창의력을 사용하고 돈을 버십시오

할 수있다 2024

데스크톱 출판 및 그래픽 디자인을 너무 쉽게 수행 한 이유 중 하나는 창의력을 좋아한다는 것입니다. 그리고이 창의력은 예술, 공예, 사진, 글쓰기, 데스크탑 출판, 그래픽 및 웹 디자인에 이르기까지 흐릅니다. 어쩌면 창의력은 나의 열정 일 것입니다 ... 흠; 나는 그것을 찾고 있었다. 고객의 프로젝트를 위해 종이를 구입할 때 다른 프로젝트의 어딘가에...

컴퓨터

프로그래밍을위한 Java 설치

할 수있다 2024

이 기사에서는 Java 프로그램 및 애플릿을 실행하기 위해 Java를 사용하려는 경우 Java 프로그래밍 도구를 설치하는 방법에 대해 설명합니다. Java for Users-Java 설치를 확인하십시오. Java를 설치하는 방법을 설명하는 대부분의 초기 Java 프로그래밍 서적 및 웹 사이트에서 필수적으로 보입니다. 아마도 이것은 내 시스템 관리자 일지...