CSS - Positioning

목차

CSS Position이란?

안녕하세요, 미래의 CSS 마스터 여러분! 오늘 우리는 CSS 위치 지정의 흥미로운 세상으로 뛰어들어가 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 이 여정을 단계별로 안내해 드리겠습니다. 믿으세요, 이 수업이 끝나면 프로처럼 요소를 위치 지정할 수 있을 것입니다!

CSS 위치 지정은 방에家具를 배치하는 것과 같습니다. 여러분이 소파나 책장을 어디에 두지 결정하는 것처럼, CSS 위치 지정은 웹 페이지에서 요소가 어디에 나타나는지 제어할 수 있게 해줍니다. 이는 고정된 디자인을 동적인 레이아웃으로 변환할 수 있는 강력한 도구입니다.

문법

다양한 위치 지정 유형에 뛰어들기 전에, 기본 문법을 간단히 살펴보겠습니다:

셀렉터 {
position: 값;
}

여기서 셀렉터는 위치를 지정하고 싶은 HTML 요소이며, 값은 적용하고 싶은 위치 지정 유형입니다. 간단하죠? 이제 각 위치 지정 유형을 자세히 탐구해 보겠습니다.

정적 위치 지정 요소

정적 위치 지정은 모든 요소의 기본값입니다. 보드 게임의 시작 지점과 같아요 - 모든 기물이 게임이 시작하기 전에 시작하는 곳입니다.

div {
position: static;
}

정적 위치 지정으로는 요소가 문서에서 자연스럽게 흐릅니다. 상단, 하단, 왼쪽, 오른쪽 속성에 영향을 받지 않습니다. 이는 요소가 "정상적인" 방식으로 행동하는 것입니다.

상대적 위치 지정 요소

상대적 위치 지정은 요소에게 "보통 위치에서 조금 움직여"라고 말하는 것과 같습니다. 다른 요소의 흐름을 방해하지 않고 작은 조정을 할 때 유용합니다.

.box {
position: relative;
top: 20px;
left: 30px;
}

이 예제에서, 우리의 .box 요소는 정상적인 위치에서 20 픽셀 아래로와 30 픽셀 오른쪽으로 이동합니다. 기억하세요, 다른 요소는 우리의 상자가 움직인 것처럼 행동하지 않습니다!

절대적 위치 지정 요소

절대적 위치 지정은 CSS 세계의 반逆児입니다. 일반 문서 흐름에서 벗어나 최근 위치 지정된 조상에 대해(또는 위치 지정된 조상이 존재하지 않으면 초기 포함 블록에 대해) 자신을 위치 지정합니다.

.absolute-box {
position: absolute;
top: 50px;
right: 30px;
}

이 .absolute-box는 최근 위치 지정된 조상과 50 픽셀에서 상단과 30 픽셀에서 오른쪽에 위치 지정됩니다. 이는 요소에게 제트 팩을 주는 것과 같아요 - 페이지 어디서나 날아다닐 수 있습니다!

고정 위치 지정 요소

고정 위치 지정은 컴퓨터 화면에 메모를 붙이는 것과 같습니다. 스크롤을 어떻게 하더라도 고정됩니다.

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

이 코드는 스크롤을 내리더라도 화면 상단에 고정된 네비게이션 바를 만듭니다. 이는 네비게이션 메뉴나 사용자가 항상 볼 수 있도록 원하는 중요한 메시지에 적합합니다.

점진적 위치 지정 요소

점진적 위치 지정은 CSS 위치 지정의 변신의 마법사입니다. 요소가 지정된 임계값에 도달할 때까지 relative 위치 지정처럼 행동한 다음, fixed로 변합니다.

.sticky-header {
position: sticky;
top: 0;
}

이 코드는 헤더가 페이지와 함께 스크롤되다가 상단에 도달하면 고정되어 계속 스크롤됩니다. 이는 웹 페이지에 마법의 트릭을 만드는 것과 같습니다!

이미지에 텍스트 위치 지정

이제 위치 지정 기술을 결합하여 이미지 위에 텍스트를 위치 지정하는 것을 만들어 보겠습니다:

<div class="image-container">
<img src="landscape.jpg" alt="아름다운 풍경">
<p class="image-text">자연의 아름다움</p>
</div>

.image-container {
position: relative;
}

.image-text {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

이 코드는 텍스트를 이미지의 하단 오른쪽 모서리에 위치 지정합니다. 텍스트 그림자는 다양한 배경에 대한 가독성을 높이는 데 좋은 터치를 더합니다.

CSS 위치 관련 속성

마무리로 중요한 CSS 위치 관련 속성을 표로 정리해 보겠습니다:

속성	설명	예시
top	상단 가장자리 위치 설정	top: 10px;
bottom	하단 가장자리 위치 설정	bottom: 20%;
left	왼쪽 가장자리 위치 설정	left: 5em;
right	오른쪽 가장자리 위치 설정	right: 15vw;
z-index	스택 순서 제어	z-index: 100;

기억하세요, 이 속성들은 사용하는 위치 지정 방법에 따라 다르게 작동합니다. 이를 통해 흥미로운 레이아웃을 만들어 보세요!

그리고 여러분의 제자 여러분! 우리는 CSS 위치 지정의 세상을 함께 여행했습니다. 정적에서 점진적까지 모두 다루었습니다. 연습이 완벽을 만들어 냅니다, 그러니 이 기술들을 실험해 두려워하지 마세요. 언제쯤 경험 많은 개발자들도 "와우!"라고 할 웹 레이아웃을 만들 수 있을 것입니다!

이제 자신감 있게 요소를 위치 지정해 보세요. 그리고 항상 기억하세요 - CSS의 세상에서는 " 위치를 벗어났다"는 것이 없습니다!

Credits: Image by storyset