on&on
[CSS] position, float 이제는 알고 쓰자! 본문
✔️ position
position : static
position의 default value
html에 쓴 태그 순으로 정상적인 흐름에 따라 위치 지정
position : relative
원래 자신이 있어야 하는 위치에 상대적이다.
자신이 있던 자리를 기억하는 요소
position: relative; left: 50px; → 본인의 static 자리에서 왼쪽으로 50px 이동
자신이 원래 있어야 할 위치를 기준으로 자리를 잡기 때문에, 그 뒤에 오는 형제 요소들은 부모 요소의 자리를 침범하지 않고 따라오게 된다.
position : absolute
절대값을 주기 위해 사용
화면 전체를 기준으로 요소 이동
position: absolute; top: 20px; right: 30px; → 오른쪽 상단에 박스 위치
부모 요소를 기준으로 위치가 지정되는데 position의 속성을 가진 부모 요소가 있다면 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치한다.
바로 위의 부모 요소에 position 속성이 없다면 position 속성을 가진 상위 부모 요소를 계속해서 찾고, 그래도 없다면 html 태그를 기준으로 위치를 잡는다.
일반적인 흐름에 있는 요소들은 absolute가 적용된 요소를 인식하지 못한다 → absolute영역을 침범하기도 한다.
position : fixed
스크롤 시, 특정 요소가 고정되어 움직이지 않았으면 할 때 사용
사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치
ex) 중요한 요소, 내비게이션 메뉴, 검색 바 등
javascript, css, html 해더메뉴 마우스 스크롤 내릴 시 사라지게 하기
일정 이상 스크롤 시, fixed 해제하는 법
position : sticky
가장 가까운 부모 요소의 컨텐츠 영역에 달라붙는 속성
(overflow가 hidden, scroll, auto혹은 overlay 가 있어야 한다.)
z-index
요소가 더 위로 나타나게 할지 결정할때 사용
static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정
z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮는다.
부모가 z-index를 높여 자식 앞으로 나올 수 없다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능하다.
✔️ float
float 속성은 요소를 띄워서 좌 혹은 우로 정렬을 하는 속성
본래 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성
블록 박스 요소를 정렬하는 가장 기본적인 방법
float: left, float: right
아래 왼쪽 화면은 이미지에 float:left 속성, 오른쪽 화면은 float:right 속성을 둔 결과
블록 박스 태그 vs float 속성 태그
1번째 블록요소에 float: left; 를 준 결과
→ 컨텐츠가 차지하는 공간만큼만 넓이가 바뀌게되고 왼쪽으로 배치
float 요소들의 넓이의 합이 그들을 감싸는 컨테이너의 넓이보다 커지면 순차적으로 아래로 떨어진다.
inline 요소에 float 속성을 적용하면 display 속성값이 자동으로 block 으로 바뀐다.
적용되면 inline 요소도 width, height, margin, padding 속성값을 자유로이 사용할 수 있다.
자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못한다.
<style>
figure {
float: left;
margin: 0 10px;
background-color: royalblue;
}
</style>
<body>
<div>
<figure>
<img src="" alt="">
<figcaption>
Lorem ipsum
</figcaption>
</figure>
<figure>
<img src="" alt="">
<figcaption>
Lorem ipsum
</figcaption>
</figure>
<figure>
<img src="" alt="">
<figcaption>
Lorem ipsum
</figcaption>
</figure>
</div>
</body>
부모 요소인 div의 height의 높이가 0인 이유?
대부분의 요소들 즉, 블록 레벨 요소와 인라인 요소들은 normal flow 에 따라 레이아웃이 결정된다. 하지만 float, position(absolute, fixed) 의 방법을 사용하면 normal flow 에서 벗어난다. normal flow에 속한 요소들은 normal flow에서 벗어난 float, position 속성이 적용된 요소들을 인식하지 못한다.
해결 방안
- 부모 요소에 overflow 속성을 추가
overflow은 Block-Formatting-Context(줄여서 BFC)를 생성한다.
BFC는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어주고, 그렇기 때문에 컨테이너 요소에 overflow:visible; 을 제외한overflow:hidden; overflow:scroll; 등의 속성을 추가하여 해결
자식 요소 중에 부모 요소를 넘어가야 하는 box-shadow 와 같은 디자인이 있다면 overflow: hidden을 사용하면 안된다.
- 부모 요소의 높이 값을 직접 지정
자식 요소의 높이가 변경 되었을 경우 혹은 자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적
- clear 속성 사용
float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용
clear 속성을 통해 float 속성을 해제하는 것이라고 볼 수 있다.
left, right, both 가 있지만 주로 both 를 사용한다.
앞에 있는 요소의 float 속성을 해제하기 위해 div를 하나 더 설정하는 것
<div class="first"></div>
<div class="second"></div>
div{
width:100px;
height:100px;
background-color:black;
}
.first{
float:left;
}
.second{
clear:both; /* both 속성은 left, right 둘 다 클리어 합니다. */
background-color:pink;
}
- clear-fix 사용
CSS의 ::after 가상요소로 해결 (따로 빈 태그를 작성할 필요가 없다.)
부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법
.wrap::after {
content:'';
display:block;
clear:both;
}
부모 요소와 이후에 float요소를 따라오는 현상까지 모두 해결 가능하다.
display:block;대신 display:table;을 사용하기도 한다.
의미없는 요소를 html에 넣기에 적합하지 않아서 css로 제어하고자 만들어진 방법
💡 Block Formatting Context
웹페이지 화면에 CSS를 랜더링하는 과정의 한 부분으로,
block 레벨 요소들이나 float 된 요소들이 서로 상호작용 하여 화면에 보여지게 되는 방법(block formatting)을 결정하는 구역(context)을 말합니다.
다음과 같은 경우 BFC가 생성됩니다.
<html> 요소를 사용했을 때
float: left, rightoverflow : visible 을 제외한 속성값(auto, hidden, scroll)을 사용했을 경우
display: table-cell, inline-block, flow-rootposition:absolute, fixed 등등
BFC가 생성되면 다음과 같은 작용을 합니다.
내부, 외부 float을 해제합니다.
마진 컬랩싱 (margin collapsing) 현상을 막습니다.