CSS 위치 속성 마스터! HTML 요소 자유자재로 배치하는 꿀팁 5가지

HTML 요소 배치하기: 위치 속성 완전 정복!

이번 시간에는 HTML 요소를 원하는 곳에 딱딱 배치할 수 있게 도와주는 CSS의 위치 속성에 대해 알아볼 거야.

1. 기본 흐름? 그게 뭔데?

HTML 요소들은 원래 자기들끼리 약속된 순서대로 배치돼.

• 블록(Block) 요소: 줄바꿈하면서 세로로 쌓여. (예: <div>, <p>)
• 인라인(Inline) 요소: 줄바꿈 없이 가로로 나란히 배치돼. (예: <span>, <a>)

이런 기본 흐름을 벗어나서 요소를 원하는 곳에 옮기고 싶을 때 위치 속성을 사용하는 거지!

2. position 속성: 요소를 어디에 놓을까?

position 속성은 요소를 좌표로 배치할 때 써. 여러 가지 값이 있는데, 하나씩 살펴보자.

2.1. static (기본값)

• 이건 아무것도 안 하면 기본으로 적용되는 값이야.
• 요소를 기본 흐름대로 배치하라는 뜻이지.
• 굳이 position: static;이라고 안 써도 똑같이 작동해.

2.2. absolute (절대 위치)

• 이걸 쓰면 요소가 기본 흐름에서 완전히 벗어나 버려.
• 마치 공중에 뜬 것처럼 다른 요소들을 인식하지 못하고 자기 마음대로 움직여.

• top, right, bottom, left 속성으로 웹 브라우저의 왼쪽 위 모서리(0,0)를 기준으로 원하는 위치에 배치할 수 있어.

  • left: 200px; : 왼쪽에서 200px 떨어진 곳에 배치.
  • top: 100px; : 위에서 100px 떨어진 곳에 배치.
  • right: 50px; : 오른쪽에서 50px 떨어진 곳에 배치.
  • bottom: 30px; : 아래에서 30px 떨어진 곳에 배치.

• 주의! absolute로 배치된 요소는 다른 요소들이 그 자리를 채워버리기 때문에, 원래 있던 자리에 있던 요소들은 밀려나게 돼.

2.3. relative (상대 위치)

• absolute와 달리, relative는 원래 자기 자리를 그대로 유지하면서 움직여.
• 마치 원래 있던 자리에 "임시로" 다른 곳으로 이동하는 느낌이지.

• top, right, bottom, left 속성으로 자기 원래 위치를 기준으로 이동해.

  • absolute와 가장 큰 차이점은 원래 자리를 보존한다는 거야!

2.4. fixed (고정 위치)

• 이걸 쓰면 요소를 화면에 딱 고정시켜 버릴 수 있어.
• top, right, bottom, left 속성으로 웹 브라우저 화면 기준으로 위치를 정해.
• 페이지를 스크롤해도 이 요소는 항상 같은 자리에 떠 있어.
• 주로 오른쪽 상단 배너 같은 걸 만들 때 많이 써.

2.5. sticky (달라붙는 위치)

• 이건 비교적 최신 속성이라 모든 브라우저에서 지원하지 않을 수도 있어.
• 평소에는 static처럼 기본 흐름대로 보이다가, 스크롤해서 특정 위치에 도달하면 fixed처럼 화면에 고정돼.
• 예를 들어, top: 0;으로 설정하면 스크롤해서 해당 요소가 화면 상단에 닿는 순간부터 고정되는 거지.

3. absolute의 기준점 바꾸기!

absolute로 배치할 때, 기본 기준점은 웹 브라우저 전체였잖아? 근데 만약 특정 부모 요소 안에서만 움직이게 하고 싶을 때가 있어.

이럴 때는 부모 요소에 position 속성을 static이 아닌 다른 값 (보통 relative)으로 설정해주면 돼!

그러면 absolute로 설정된 자식 요소의 기준점이 부모 요소가 되는 거지.

4. z-index: 누가 위에 보일까?

position 속성을 사용해서 요소들이 겹칠 때, 누가 위에 보일지 결정하는 게 바로 z-index야.

• z-index 값이 높을수록 더 위에 보여.
• 기본값은 0이고, 숫자가 클수록 더 위에 올라와.

5. float 속성: 요소를 띄워서 배치하기

float 속성은 요소를 왼쪽이나 오른쪽으로 띄워서 배치할 때 사용해.

• float: left; : 요소를 왼쪽으로 붙여서 배치.
• float: right; : 요소를 오른쪽으로 붙여서 배치.
• float: none; : float 효과 없음 (기본값).

float를 사용하면 요소가 공중에 뜬 것처럼 인식돼서, 다른 요소들이 그 자리를 채우려고 해.

5.1. float와 clear의 만남

float를 사용하면 부모 요소가 자식 요소의 높이를 제대로 인식하지 못하는 문제가 생길 수 있어. 마치 부모가 자식의 존재를 잊어버린 것처럼 말이지.

이럴 때 clear 속성을 사용해서 float의 영향을 취소시켜 줘야 해.

• clear: left; : 왼쪽 float 효과 취소.
• clear: right; : 오른쪽 float 효과 취소.
• clear: both; : 왼쪽, 오른쪽 float 효과 모두 취소.

보통 부모 요소에 overflow: hidden;이나 overflow: auto;를 주거나, 자식 요소 중에 마지막 요소에 clear: both;를 주는 방식으로 이 문제를 해결하곤 해.

float는 원래 인쇄물처럼 이미지 주변으로 텍스트가 흘러가게 하는 디자인을 위해 만들어졌지만, 요즘은 레이아웃을 잡는 데도 많이 쓰인다는 걸 알아두자!