BD 28일차

---

CSS 위치 속성 학습 가이드 📌

CSS에서 요소의 위치를 조정하는 방법을 배워보겠습니다! 🚀

1. display 속성 🖥️

CSS에서 display 속성은 요소의 기본적인 배치 방식을 결정합니다.

🔹 block vs inline

• block 요소: 한 줄을 꽉 차지하며, 다음 요소는 아래로 내려갑니다.
  예) <div>, <h1>, <p>, <ul>, <ol> 등
• inline 요소: 자신의 내용 크기만큼만 차지하고, 옆에 다른 요소가 올 수 있습니다.
  예) <span>, <a>, <img> 등

🔹 display 속성 변경 예제

.first {
  display: inline;
  background-color: aqua;
}
.second {
  display: inline;
  background-color: green;
}
.third {
  display: inline;
  background-color: yellow;
}

💡 div는 기본적으로 block 속성이지만, inline으로 바꾸면 한 줄을 차지하지 않고 내용 크기만큼만 표시됩니다.

🔹 display: inline-block

• inline처럼 옆에 배치 가능하면서도 block처럼 너비와 높이 조정 가능
• 예제:

  .box {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: pink;
  }

2. position 속성 📍

요소의 위치를 지정하는 방법입니다.

다음 4가지 방식이 있습니다.

🔹 static (기본값)

• 모든 요소의 기본 위치값으로 HTML 문서의 흐름을 따릅니다.
• position 속성을 지정하지 않으면 static입니다.

🔹 relative (상대 위치)

• 요소가 기본 위치를 기준으로 이동합니다.
• 예제:💡 원래 있던 자리에서 top: 20px, left: 30px 만큼 이동합니다.

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

🔹 absolute (절대 위치)

• 가장 가까운 position: relative 요소를 기준으로 위치가 설정됩니다.
• 만약 relative 부모가 없다면, body를 기준으로 위치가 정해집니다.
• 예제:💡 부모 요소에 relative를 설정하면, 그 요소를 기준으로 absolute 위치가 결정됩니다.

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

🔹 fixed (고정 위치)

• 뷰포트를 기준으로 고정된 위치에 배치됩니다.
• 스크롤해도 항상 같은 위치에 유지됩니다.
• 예제:💡 팝업 창, 네비게이션 바 등에 사용됩니다.

  .fixed-box {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: red;
  }

3. float 속성 🚢

float 속성은 이미지나 텍스트를 가로 정렬할 때 사용됩니다.

🔹 float: left vs float: right

.image {
  float: left;
  margin-right: 10px;
}

💡 이미지가 왼쪽에 정렬되고, 오른쪽 공간에 텍스트가 위치합니다.

🔹 clear: both; 사용

• float을 사용하면 다음 요소들이 영향을 받을 수 있습니다.
• clear: both;를 사용하면 float 영향을 제거할 수 있습니다.

  .clearfix {
    clear: both;
  }

4. 정리 ✨

속성	설명	예제
display: block	한 줄을 다 차지	<div>, <p>
display: inline	내용만큼 차지	<span>, <a>
display: inline-block	inline과 block의 장점 결합	버튼, 네비게이션
position: static	기본값 (위치 변경 없음)	-
position: relative	현재 위치 기준 이동	top, left 사용
position: absolute	가장 가까운 relative 부모 기준	모달창, 툴팁
position: fixed	뷰포트 기준 고정	네비게이션 바, 팝업
float: left/right	가로 정렬	이미지, 레이아웃

💡 실습해보면서 직접 확인해 보세요! 🎯

CSS의 위치 속성을 이해하면, 웹 디자인을 더욱 유연하게 조절할 수 있습니다. 😃