CSS position
CSS의 'position' 속성은 요소가 문서 또는 부모 요소에 대해 어떻게 위치를 잡을지 정의한다. position 속성은 static, relative, absolute, fixed, sticky와 같은 여러 값들을 가질 수 있다.
- static (기본값):
- 기본적으로 모든 요소에 설정되어 있는 값입니다. 이 값이 설정된 요소는 일반적인 문서 흐름에 따라 배치됩니다. top, right, bottom, left 및 z-index 속성이 적용되지 않는다. (위치 임의 설정 불가)
- relative:
- 상대적 위치 지정을 한다. static 위치에서 top, right, bottom, left 속성값만큼 이동한다. 원래 자신이 차지하던 공간을 유지하고, 해당 공간을 기준으로 상대적으로 이동한다. (문서 흐름에 따라 배치. 원래 있던 위치를 기준으로 위치 설정)
- absolute:
- 절대적 위치 지정을 한다. 가장 가까운 위치 지정 조상 요소 (즉, relative, absolute, fixed, 또는 sticky 속성을 가진 요소)에 대해 상대적이다. 그러한 조상이 없으면 body 요소를 기준으로 한다. absolute 위치 지정은 해당 요소를 문서의 흐름에서 제거하므로, 주위 요소들은 그 요소가 없는 것처럼 배치된다.
- fixed:
- 고정된 위치 지정을 한다. 브라우저 창에 상대적으로 위치를 잡으며 스크롤해도 움직이지 않고 항상 같은 위치에 있다. 해당 요소는 문서 흐름에서 제외된다. (뷰포트를 기준으로 배치)
- sticky:
- 상대적(relative) 및 고정(fixed) 위치 지정 방식의 혼합형이다. 스크롤 위치에 따라 상대적으로 위치가 변경될 수 있다. 즉, 요소는 일반적인 문서 흐름에 따라 배치되지만 스크롤 오프셋이 일정 값에 도달하면 고정되어 뷰포트 내에서 스크롤되지 않는다. 이것은 "스티키" 헤더 또는 푸터를 만드는 데 유용할 수 있다.
이들 각각은 다양한 유스케이스에 맞춰 다르게 사용되며, 적절하게 사용하면 웹 페이지 레이아웃을 유연하게 다룰 수 있습니다.
실습
<body>
<header>...
</header>
<div id="category-bar">...
</div>
<main>...
</main>
<button id="floating-map-button">
<img class="src" src="./imgs/map-trifold.png" alt="map icon" >
</button>
</body>#floating-map-button {
position: fixed;
background-color: white;
border-radius: 24px;
}
이 CSS 규칙은 #floating-map-button이라는 id를 가진 요소에 적용된다. 다음은 각 속성에 대한 설명이다.
- position: fixed; - 요소의 위치는 브라우저 창에 상대적으로 고정된다. 즉, 스크롤을 해도 요소의 위치는 변하지 않습니다.
- left: 50%; - 요소의 왼쪽 가장자리가 부모 요소의 너비 중간(50%)에 위치하게 된다.
- bottom: 125px; - 요소의 하단 가장자리가 부모 요소 하단에서부터 125픽셀 위에 위치하게 된다.
- background-color: white; - 요소의 배경색을 흰색으로 설정한다.
- border-radius: 24px; - 요소의 모든 모서리를 둥글게 만들며, 반경은 24픽셀이다.
- transform: translateX(-50%); - 요소를 가로축(x축)으로 왼쪽으로 자기 자신의 너비의 50%만큼 이동시킨다. 이를 통해 요소는 부모 요소의 정중앙에 위치하게 됩니다. 왜냐하면 left: 50%; 속성에 의해 요소의 왼쪽 가장자리가 중앙에 위치하므로, 왼쪽으로 요소 너비의 50%만큼 더 이동시켜야 요소 전체가 중앙에 정확히 위치하게 되기 때문이다.
이 CSS 코드는 버튼을 화면의 아래쪽 가운데에 고정시키는 데 사용될 수 있다.
이제, 지도 표시하기 버튼에 글자를 입력하고 스타일을 다듬어보자.
<body>
<header>...
</header>
<div id="category-bar">...
</div>
<main>...
</main>
<button id="floating-map-button">
<span>지도 표시하기</span>
<img width="20" src="./imgs/map-trifold.png" alt="map icon" >
</button>
</body>#floating-map-button {
position: fixed;
display: flex;
padding: 14px 19px;
align-items:center;
left: 50%; /*부모의 50%*/
bottom: 125px;
background-color: white;
border-radius: 24px;
transform: translateX(-50%);
color: black;
font-size: 14px;
font-weight: 600;
gap: 8px;
cursor: pointer;
}
이제, 지도 표시 버튼에 마우스를 올렸을 때, transform이 적용되도록 해보자.
#floating-map-button {
position: fixed;
display: flex;
padding: 14px 19px;
align-items:center;
left: 50%; /*부모의 50%*/
bottom: 125px;
background-color: white;
border-radius: 24px;
transform: translateX(-50%);
color: black;
font-size: 14px;
font-weight: 600;
gap: 8px;
cursor: pointer;
}
#floating-map-button:hover {
box-shadow: 0 0 0 1px transparent, 0 0 0 4px transparent, 0 6px 16px rgba(0,0,0,0.12) !important; /*그림자가 세개지만 마지막것만 표시된다.*/
transform:scale(1.04);
}box-shadow: 0 0 0 1px transparent, 0 0 0 4px transparent, 0 6px 16px rgba(0,0,0,0.12) !important; - 이는 총 세 개의 박스 그림자를 설정한다.
- 첫 번째 그림자는 위치와 크기가 없고, 색상이 투명하므로 볼 수 없다.
- 두 번째 그림자도 위치와 크기가 없고, 색상이 투명하므로 볼 수 없다.
- 세 번째 그림자는 가로 위치가 0, 세로 위치가 6픽셀, 흐림 반경이 16픽셀로 설정되어 있다. 그림자의 색상은 검은색으로 알파값이 0.12인 rgba 색상을 사용하여 어둡지만 반투명한 그림자가 생성된다.
- !important 키워드는 이 스타일을 우선적으로 적용하도록 지시한다.
transform: scale(1.04); - 요소의 크기를 원래 크기의 104%로 확대한다. 이 효과는 마우스를 버튼 위에 올려놓았을 때만 적용된다.
문제가 생겼다. 마우스를 올리면, 그림자가 생기고, 버튼이 살짝 확대되는 효과만 나타나야 하는데, 버튼의 위치가 움직이고 있다.
코드를 잘 살펴보면, transform이 floating-map-button과 floating-map-button:hover에 각각 다르게 적용되고 있다.
floating-map-button에는 자신의 너비의 50퍼센트 만큼 왼쪽으로 이동시키는 반면, floating-map-button:hover에서는 살짝 확대만 시키므로, 마우스를 올렸을때 너비 기준 왼쪽 이동의 효과가 없어지고, 확대 효과만 나타나는 것이다. 이 오류는 다음과 같이 코드를 변경해서 해결할 수 있다.
#floating-map-button {
position: fixed;
display: flex;
padding: 14px 19px;
align-items:center;
left: 50%; /*부모의 50%*/
bottom: 125px;
background-color: white;
border-radius: 24px;
transform: translateX(-50%);
color: black;
font-size: 14px;
font-weight: 600;
gap: 8px;
cursor: pointer;
}
#floating-map-button:hover {
box-shadow: 0 0 0 1px transparent, 0 0 0 4px transparent, 0 6px 16px rgba(0,0,0,0.12) !important; /*그림자가 세개지만 마지막것만 표시된다.*/
transform: translateX(-50%) scale(1.04);
}이렇게 코드를 수정하면, hover 상태에서도 위치가 변경되지 않는다.
