🐹 Position
HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있는 속성입니다.
HTML 태그의 박스 모델 성격에 따라 블록 성격이면 줄 바꿈, 인라인 성격이면 수평으로 요소가 배치되는 것을 기본 흐름에 따라 배치한다고 표현합니다.
position 속성값
-
static : 요소를 기본 흐름에 따라 배치
-
relative : 요소를 기본 흐름에 따라 배치하지만 좌표 속성을 사용 가능
-
absolute : 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치
-
fixed : 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치. 단 스크롤해도 해당 위치에 고정됨
-
sticky : 요소를 static 값처럼 기본 흐름에 따라 배치하지만, 지정한 좌표의 임계점에 이르면 fixed값처럼 화면에 고정됨
❤️🔥 relative
요소를 좌표 속성에 따라 배치할 수 있습니다.
top,right, bottom, left가 있고 기준점은 요소의 윈쪽 위 모서리입니다.
<style>
.red-box{
background-color:red
}
.green-box{
background-color: green;
position: relative;
left: 100px;
}
.blue-box{
background-color:blue
}
</style>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>라고 하면 다음과 같이 오른쪽으로 밀려납니다.
❤️🔥 absolute
relative처럼 좌표 속성에 따라 배치되지만 기준점이 다릅니다.
relative는 기준점이 요소의 왼쪽 위 모서리지만, absolute일 때는 웹 브라우저의 왼쪽 위 모서리입니다.
웹 브라우저는 기본 스타일 시트에 따라 body 태그에 margin 속성이 적용되어 있습니다. 그래서 요소와 웹 브라우저 사이에 여백이 있는데 absolute 값의 기준점은 웹 브라우저의 왼쪽 위 모서리이므로 웹 브라우저에서 표시될 때 기준점이 헷갈리지 않도록 body 태그의 margin 속성값을 0으로 지정하겠습니다.
relative 값일 때는 요소가 이동하더라도 요소가 원래 위치에 있는 것처럼 유지되지만 absolute일 때는 요소를 움직이면 요소가 원래 있던 공간은 빈 공간으로 인식됩니다.
그래서 파란색 요소가 초록색 요소가 원래 있던 위치로 올라옵니다.
그런데 absolute는 기준점이 웹 브라우저의 왼쪽 위라고 했는데, 빨간색 요소 옆으로 가지 않고 원래 위치에서 오른쪽으로만 이동했습니다.
그 이유는 position이 absolute일 때 top이나 bottom을 지정하지 않으면 left나 right 속성은 원래 위치에서 x축(가로) 방향으로만 움직이기 때문입니다
그래서 top 속성을 추가해준다면 다음과 같이 됩니다.
이전과 똑같지만 실제로는 top 속성이 사용되어 기준점이 아래로 이동했습니다.
따라서 기준점은 뷰포트(웹 브라우저의 왼쪽 위)의 왼쪽에서 100px, 위쪽에서 100px 떨어진 위치에 배치됩니다.
❤️🔥 fixed
해당 요소는 지정된 위치에 고정됩니다. body 태그의 높이를 크게 지정해 웹 브라우저에서 스크롤 할 수 있게 만들어 줍니다.
❤️🔥 sticky
스크롤하는 중에 일정 지점(임계점)이 되면 요소가 fixed 값처럼 작동합니다.
기존 코드에서 sticky로 하고 top: 0으로 지정하면 다음 그림처럼 됩니다
스크롤해보면 화면에서 사라지는 빨간색과 파란색 요소와 다르게 초록색 요소는 top 속성값이 0인 위치에 고정되어 있습니다.
❤️🔥 z-index
position 속성으로 배치한 요소의 z축 위치를 결정할 수 있습니다.
<style>
.box{
width: 100px;
height: 100px;
}
.red-box{
background-color: red;
position: relative
}
.green-box{
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
</body>
position 속성은 다른 요소들이 배치되면 나중에 작성된 요소가 앞에 표시되어 나중에 작성된 요소가 앞에 표시됩니다.
앞뒤 배치를 바꾸고 싶다면 z축 값을 지정하는 z-index 속성을 사용합니다 속성값의 숫자가 클수록 요소가 더 앞쪽에 배치됩니다.
모든 요소는 기본으로 0이므로 0보다 크게 설정하면 됩니다.
❤️🔥 float
left : 대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다.
right : 대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다.
<style>
div{
color: white;
}
.red-box{
background-color: red;
float: left;
}
.blue-box{
background-color: blue;
}
</style>
<body>
<div class="red-box">red-box</div>
<div class="blue-box">blue-box</div>
</body>
div 태그는 블록 성격이라서 width 속성을 다로 사용하지 않아도 그림처럼 가로 한 줄을 전부 차지합니다. 결과 화면으로는 빨간색 요소와 파란색 요소가 나란히 배치된 것처럼 보이지만 실제로 개발자 도구로 확인해보면 파란색 요소 일부가 빨간색 요소 밑에 깔려있습니다
이유는 float는 적용 대상을 공중에 띄워 배치하기 때문에 대상이 있던 위치를 빈 공간으로 인식해서 그렇습니다. 그래서 파란색 요소는 마치 빨간색 요소가 없는 거처럼 인식하고 해당 공간을 파란색 요소의 배경이 차지합니다.
파란색 요소도 float: left; 하면 float 속성이 작용된 대상끼리는 서로의 위치를 제대로 인식할 수 있습니다.
블록과 인라인
블록 요소는 부모 요소의 전체 너비를 차지하며 새 라인에서 즉 항상 새로운 줄에서 시작합니다. ex) div, h1, p, header, footer, section 등
이라인 요소는 필요한 만큼의 너비만 차지하며 같은 줄에 다른 인라인 요소와 함께 표시됩니다. ex) a, span, strong, em 등
div 태그로 작성된 빨강, 초록 요소가 있다고 할 때 빨간색 요소의 float 속성값을 left로 지정하면 실행 결과가 다음 그림처럼 됩니다. 초록색 요소가 빨간색 요소 밑에 들어갑니다.
.box에 float: left; 를 적용하여 float 속성을 사용하면 해당 자식 요소를 부모 요소가 제대로 인식하지 못합니다 그래서 clear 속성을 사용하거나 overflow 속성을 사용합니다.
<style>
.box{
width: 100px;
height: 100px;
float: left;
}
.red-box{
background-color: red;
}
.blue-box{
background-color: blue;
}
</style>
<body>
<div class="red-box">red-box</div>
<div class="blue-box">blue-box</div>
</body>
❤️🔥 부모 요소와 자식 요소
위에서 부모와 자식 요소란 .box 클래스를 가진 요소들이 부모 요소를 제대로 인식하지 못하는 것입니다.
자식 요소가 float 속성을 사용하고 있을 때 부모 요소의 높이가 0으로 계산되는 상황입니다.
자식 요소가 실제로는 부모 요소 안에 있지만, 부모 요소의 높이가 0으로 계산되어 부모 요소의 영역이 보이지 않게 되는 상황.
float 속성이 적용된 자식 요소가 있을 경우, 부모 요소는 자식 요소의 높이를 인식하지 못하게 되어, 부모 요소의 높이가 0으로 계산될 수 있습니다.
이 경우 부모 요소는 자식 요소가 화면에서 차지하는 공간을 보지 못하게 되어, 겉보기에는 자식 요소가 부모 요소 밖에 떠 있는 것처럼 보이게 됩니다.
❤️🔥 clear
float 속성을 해제할 대 사용합니다. float 에서 문제가 발생하는 원인은 float 속성이 대상 요소의 다음 요소에 영향을 주기 때문입니다 따라서 영향을 주지 않도록 float 속성을 해제해야 합니다.
float 속성이 마지막으로 적용된 요소 다음에 사용합니다.
