Jumping Bytes and Hopping Bits
the church of tech
Menu

css position 예제 August 2, 2019

상자 오프셋 속성, 위쪽, 오른쪽, 아래쪽 및 왼쪽은 요소를 배치하는 방법과 방향을 지정합니다. 이러한 오프셋 속성은 상대, 절대 또는 고정 위치 지정 값이 있는 요소에서만 작동합니다. 그런 다음 2개의 상자를 만들고 위치를 정의합니다. 그 요소는 옆에 있는 요소로 실행될까요? 새 줄에 표시되나요? 이 모든 것은 DOM(문서 객체 모델)과 요소를 둘러싸는 내용에 따라 달라집니다. CSS를 사용하면 HTML 요소를 배치하는 데 도움이 됩니다. 원하는 위치에 HTML 요소를 배치할 수 있습니다. 페이지의 자연스러운 위치를 기준으로 요소를 배치할지 또는 상위 요소를 기준으로 절대위치에 배치할지 지정할 수 있습니다. 위치가 있는 요소: 끈적거리기; 은 사용자의 스크롤 위치에 따라 배치됩니다. 위치가 있는 요소: 고정; 는 뷰포트를 기준으로 위치하므로 페이지가 스크롤되더라도 항상 같은 위치에 유지됩니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 요소를 배치하는 데 사용됩니다.

요소의 모양 설정 이 예제에서는 요소의 모양을 설정하는 방법을 보여 줍니다. 요소가 이 셰이프로 잘리고 표시됩니다. “정적 위치 지정”은 이 시점까지 작업한 페이지의 정상적인 흐름을 나타냅니다. CSS Box 모델, 부동 부동 및 플렉스박스 레이아웃 구성표는 모두 이 “정적” 흐름에서 작동하지만 CSS에서 사용할 수 있는 유일한 위치 지정 구성표는 아닙니다. CSS 포지션에 대한 심층 기사를 작성하려고 노력했습니다: http://www.teckstack.com/understand-css-positions/ 이 장은 두 부분으로 나뉩니다. 먼저 상대적, 절대적, 고정된 위치를 격리된 상태로 검사한 다음 배운 모든 것을 멋진 드롭다운 메뉴에 적용합니다. 상대 위치 지정은 일반적으로 나타나는 위치를 기준으로 HTML 요소의 위치를 변경합니다. 따라서 “왼쪽:20″은 요소의 왼쪽 위치에 20픽셀을 추가합니다. “고정 위치 지정”은 절대 위치 지정과 많은 공통점이 있습니다: 매우 수동이며, 요소는 페이지의 일반 흐름에서 제거되고 좌표계는 전체 브라우저 창을 기준으로 합니다. 중요한 차이점은 고정 된 요소가 페이지의 나머지 부분과 함께 스크롤되지 않는다는 것입니다.

요소에 특정 높이 나 너비가 없고 절대적으로 배치된 경우 상단 및 하단 상자 간격띄우기 속성의 조합을 사용하면 지정된 전체 크기에 걸쳐 높이가 있는 요소가 표시됩니다.

Categories: Uncategorized