Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 위치에 대한 단계별 가이드

CSS position 속성은 HTML 페이지에서 요소의 위치를 ​​수정합니다. top, right, left 및 bottom 속성은 상자 가장자리를 기준으로 요소가 배치되는 위치를 정의합니다. position CSS 속성에는 정적, 고정, 상대, 고정 및 절대의 다섯 가지 값이 있습니다.

사양에 따라 적절한 위치에 요소를 배치하는 것은 좋은 웹 디자인의 중요한 부분입니다.

여기에서 CSS position 속성이 필요합니다. position 속성에는 웹 페이지에서 요소를 배치하는 방법을 정의하는 데 사용할 수 있는 5가지 값이 있습니다.

이 자습서에서는 위치 속성을 사용하여 웹 페이지에서 요소의 위치를 ​​지정하는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽고 나면 CSS에서 웹 페이지의 요소를 배치하기 위해 position 속성을 사용하는 전문가가 될 것입니다.

<내비>
  • CSS 위치
  • CSS 포지션 값
    • 정적 위치
    • 고정 위치
    • 상대적 위치
    • 고정 위치
    • 절대 위치
  • 결론

CSS 위치

position 속성을 사용하면 웹 페이지에서 요소의 위치를 ​​정의할 수 있습니다. position 속성의 구문은 다음과 같습니다.

position: positionType;

position 속성이 유용할 수 있는 상황이 많이 있습니다. 예를 들어 페이지 하단에 고정된 탐색 모음을 디자인하도록 결정할 수 있습니다.

웹 페이지에서 요소의 위치를 ​​설정하는 데 사용할 수 있는 다섯 가지 값이 있습니다.

  • 정적
  • 고정
  • 친척
  • 끈적임
  • 절대

위의 다섯 가지 값 중 하나를 사용하여 요소의 위치를 ​​지정할 수 있습니다. 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 페이지에서 요소의 위치를 ​​추가로 정의할 수 있습니다. 이 기사의 예에서 이것이 어떻게 작동하는지 논의할 것입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

CSS 위치 값

position 속성의 각 잠재적 값을 사용하는 방법을 탐색할 수 있습니다. position 속성과 함께 사용할 수 있는 각 값의 예를 살펴보겠습니다.

정적 위치

HTML 요소는 기본적으로 정적으로 배치됩니다. 즉, 요소는 상단, 하단, 왼쪽 및 오른쪽 CSS 속성의 영향을 받지 않습니다. 코드에서 달리 지정하지 않는 한 브라우저는 자동으로 정적 위치의 요소를 렌더링합니다.

예를 들어, 일부 텍스트가 포함된 상자를 디자인한다고 가정합니다. 기본 위치를 사용하여 이 상자의 내용을 배치하려면 다음 코드를 사용할 수 있습니다.

<html>

<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	position: static;
	border: 2px solid lightblue;
}

CSS 위치에 대한 단계별 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

페이지에 정적으로 위치하는 상자를 만들었습니다. 즉, 상자는 특정 방식으로 배치되지 않습니다. 오히려 그 위치는 브라우저 기본값을 기반으로 합니다. 우리 상자에는 2px 너비의 단색 연한 파란색 테두리가 있습니다. 이 테두리는 상자를 더 잘 보이게 합니다.

고정 위치

고정 값은 웹 페이지의 특정 위치에 요소를 배치합니다.

고정 값을 사용하면 고정된 요소가 항상 같은 위치에 유지됩니다. 사용자가 웹 페이지를 아래로 스크롤하더라도 요소는 고정된 상태로 유지됩니다. 이는 해당 요소가 일반 웹 페이지 보기에서 제거되기 때문입니다. 고정 값 속성을 사용하여 요소를 배치하려면 top, right, bottom, left 속성을 사용해야 합니다.

상자를 만들어 웹 페이지의 오른쪽 하단 모서리에 고정하려고 합니다. 다음 코드를 사용하여 수행할 수 있습니다.

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	width: 200px;
	border: 2px solid lightblue;
	position: fixed;
	bottom: 0;
	right: 0;
}

CSS 위치에 대한 단계별 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 예에서는 고정 위치 값을 사용하여 웹 페이지의 특정 위치에 고정되는 상자를 생성했습니다. bottom:0 및 right:0 속성은 웹 페이지의 오른쪽 하단 모서리에 상자를 배치합니다.

상자의 너비를 200px로 지정했습니다. 상자에는 2px의 단색 연한 파란색 테두리가 있어야 합니다. 이러한 스타일을 사용하면 상자를 쉽게 볼 수 있습니다.

위의 이미지에서 볼 수 있듯이 우리 상자는 웹 페이지의 오른쪽 하단 모서리에 있습니다. 사용자가 아래로 스크롤하면 상자가 화면에서 해당 위치를 유지합니다. 즉, 사용자가 스크롤하더라도 화면 오른쪽 하단에 상자가 계속 표시됩니다.

상대적 위치

상대 값은 기본 위치를 기준으로 요소를 배치합니다.

상대 값은 위쪽, 아래쪽, 왼쪽 또는 오른쪽 속성과 함께 사용됩니다. 이 네 가지 속성은 요소가 기본 위치에서 오프셋되는 방법을 지정합니다. 상대적으로 배치된 상자에 의해 생성된 공간은 다른 요소로 채워지지 않습니다.

예를 들어, 50px 왼쪽 테두리를 기준으로 요소를 배치하려면 왼쪽 속성에 값을 지정합니다. 다음은 이러한 상자를 만드는 데 사용할 코드입니다.

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
position: relative;
left: 50px;
	border: 2px solid lightblue;
}

CSS 위치에 대한 단계별 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 예에서는 상대 위치 지정이 있는 상자를 정의했습니다. 왼쪽 속성을 사용하여 상자를 왼쪽으로 50px 오프셋했습니다. 보시다시피 페이지 시작과 상자 시작 사이에 50px 간격이 있습니다. position:relative 및 left:50px 속성을 사용하여 이것을 만들었습니다.

상자 왼쪽에 생성된 공간은 다른 요소로 채워지지 않습니다.

고정 위치

고정 위치 값은 방문자가 임계값을 넘을 때까지 요소를 상대적으로 배치합니다. 그러면 요소의 위치가 고정됩니다.

고정 위치는 기본적으로 상대 위치와 고정 위치가 혼합된 것입니다. 끈적한 요소가 로드되면 상대적으로 배치됩니다. 사용자가 페이지의 특정 지점을 지나 아래로 스크롤한 후에도 요소는 고정된 위치에 고정된 상태로 유지됩니다.

문서의 흐름을 유지하려는 경우 고정 위치를 사용하는 것이 유용합니다. 방문자가 해당 요소를 놓치지 않도록 요소를 특정 위치에 고정할 수 있습니다.

고정 위치는 일반적으로 사용자가 페이지를 아래로 스크롤할 때 화면 상단에 고정되는 탐색 막대와 함께 사용됩니다.

페이지 상단에 상자가 나타나길 원합니다. 이 상자는 일부 텍스트 뒤에 나타나야 하며 사용자가 이미지를 아래로 스크롤할 때 상단에 고정되어야 합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

<html>

<p>Lorem ipsum dolor sit amet, … </p>
<div>
	<p class="inner">This is a positioned box.</p>
</div>
<p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p>

<style>

.inner {
	position: sticky;
	top: 0;
	border: 2px solid lightblue;
}

CSS 위치에 대한 단계별 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 이미지에서 상자가 텍스트의 첫 번째 단락 뒤에 나타나는 것을 볼 수 있습니다. 사용자가 아직 아래로 스크롤하여 상자를 만나지 않았기 때문입니다. 사용자가 상자를 지나 아래로 스크롤하면 다음과 같습니다.

CSS 위치에 대한 단계별 가이드

페이지 상단에 Lorem ipsum … 단락이 있습니다. 표준 텍스트. This is a positioned box 텍스트가 포함된 상자를 수정했습니다. 이 단락 아래에 있습니다. 또한 사용자가 선언한 위치 지정 상자까지 아래로 스크롤하면 상자가 화면 상단에 바인딩됩니다. 사용자가 계속 스크롤하면 상자가 화면 상단에 유지됩니다.

상자는 텍스트의 두 단락 사이의 초기 위치로 돌아갑니다. 이것은 사용자가 상자 위로 스크롤할 때만 발생합니다.

절대 위치

절대값은 이미 배치된 다른 요소를 기준으로 요소를 배치합니다.

절대 속성은 이미 배치된 다른 요소를 기준으로 요소를 배치합니다. 예를 들어, 절대 위치 요소는 텍스트 단락을 포함하는 상자 안의 텍스트일 수 있습니다. 이 상자는 상대적 위치 또는 고정 위치를 가질 수 있습니다.

우리는 다른 상자의 왼쪽 하단 모서리에 나타나길 원하는 상자를 디자인하고 있습니다. 다음 코드를 사용하여 이러한 상자를 만들 수 있습니다.

<html>

<div class="outer">
	<p>This is the outer box.</p>
	<p class="inner">This is a positioned box.</p>
</div>

<style>

.outer {
	position: relative;
	border: 2px solid lightblue;
	width: 300px;
	height: 300px;
}

.inner {
	position: absolute;
	left: 0;
	bottom: 0;
	border: 2px solid pink;
}

CSS 위치에 대한 단계별 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

HTML 파일에서 두 개의 상자를 정의합니다.

태그를 사용하여 첫 번째 상자를 선언하고 outer 클래스를 할당합니다. . 이는 상자에 외부와 연결된 CSS 스타일이 있음을 의미합니다. 수업.

태그를 사용하여 두 번째 상자를 선언하고 inner 클래스를 할당합니다. .

CSS 파일에서 외부 상자가 다음과 같아야 한다고 지정합니다.

  • 웹페이지의 다른 요소에 상대적으로 배치됩니다.
  • 2px 너비의 연한 파란색 테두리가 있어야 합니다.
  • 너비 300픽셀, 높이 300픽셀

내부 상자가 다음과 같아야 함을 지정합니다.

  • 절대적인 위치에 있어야 합니다.
  • 외부 상자의 왼쪽 하단에 위치합니다(left:0, bottom:0 사용).
  • 2px 너비의 단색 분홍색 테두리가 있어야 합니다.

이 예에서는 분홍색 상자(inner ) outer 왼쪽 하단 상자. 반면에 fixed 키워드를 사용하면 분홍색 상자가 웹 페이지 하단에 위치하게 됩니다.



결론

CSS position 속성은 웹 페이지에서 요소의 위치를 ​​정의합니다. top, right, bottom, left 속성은 웹 페이지의 특정 위치에 요소를 배치합니다. 이제 전문가처럼 position 속성을 사용하여 CSS에서 요소 배치를 시작할 준비가 되었습니다!