다시 시작하는 CSS😐
GitHub Desktop을 사용해 실습 내용 commit 해보면서 github 익히기💕
(다른 글인지 모르고 아무생각 없이 지워버림.
다시 끄적인다. Ah... 😱🤯😭)
Float
길막의 성질을 갖고 있는 Block 요소들을 '가로배치'하기 위해 사용
(다음에 오는 요소들이 자신의 영역을 침범하지 않도록 하는 것)
◈ Float를 사용했을 때 일어나는 변화
float 처리한 요소는 위로 붕 뜨게 된다.
.box {
float: left; // 자신이 갈 수 있는 영역에서 가장 왼쪽으로 이동
float: right; // 자신이 갈 수 있는 영역에서 가장 오른쪽으로 이동
}1) float된 요소를 갖는 부모 요소는 붕 뜬 자식 요소를 알지 못한다.(없어진 요소라 생각하게 됨)
float 요소가 원래 있던 영역은 빈 공간으로 인식하고, 옆에 있던 형제 요소가 이동하여 공간을 차지한다.
이에 부모 요소는 빈 공간까지 차지할 필요가 없어져 부모 요소의 크기가 줄어든다.
2) Inline, Inline Block 형태였던 요소가 Block 요소로 바뀌어 block box일 때의 성질을 사용 가능하게 된다.
width, height, padding-top과 같은 위/아래 영향주는 속성을 선언할 수 있다.
3) ✨(block 요소지만 기본 성질인) 자신의 영역을 차지하는 길막 성질은 갖지 못한다.(옆에 다른 요소도 올 수 있음)
원래는 따로 width를 선언하지 않으면 부모의 content-box의 width가 적용되지만 float는 그렇지 않다.
float된 요소의 content-box의 width만큼(text) 자동 설정된다.
원래는 따로 width를 선언하면 남은 공간은 margin으로 자동으로 채워지지만 float는 그렇지 않다.(margin을 별도로 선언이 불가능하다는 것이 아님)
자동으로 생기는 margin이 사라져야 빈 공간이 생기고, 빈 공간에 float된 다른 요소도 나란히 옆에 올 수 있다.
자식 요소들이 float되면 붕 뜬 상태에서 '가로배치' 형태로 하나씩 빈 공간을 찾아 위치하게 된다. 한 줄에 요소가 다 차게 되면 '아랫줄'로 내려와 자신이 갈 수 있는 영역 중 가장 왼/오른쪽에 위치하게 된다.
모든 자식 요소가 float되면 부모 요소는 height가 0이 되며, 차지하는 영역이 없다(요소가 아무것도 없다)는 의미이다.
4) block 안에 콘텐츠 요소인 inline 요소들(ex. text, img)만 float된 요소들의 존재를 파악할 수 있다. (block 요소들은 존재 파악 불가)
💥float된 요소들의 가로 배치는 이루어졌지만 이로 인해 '레이아웃의 붕괴 '가 일어난다.😱😱😱
◈ Float를 사용해 발생한 레이아웃 붕괴 해결방법
1) float된 자식 요소를 갖는 부모 요소에게 overflow: hidden; 적용
부모 요소 입장에서 없다고 생각했던 자식 요소를 파악할 수 있게 되어 부모 요소의 height도 자식들의 height의 합으로 설정된다.
(쉬운 방법이지만 작동 원리를 알지 못하고 사용하는 것은 비추천)
2) Clearfix (정석. 선호하는 방식) : clear 속성을 적용해 요소를 fix
clear는 단지 float으로 인해 망가진 레이아웃을 고치기 위한 속성이고, block인 요소에만 사용 가능하다.✨
clear: left | right | both;
clear: left;' clear: left; ' 는 block인 형제 요소에게 ' float: left; '된 형제 요소 위치를 파악할 수 있게 된다.
clear 속성값과 동일한 float 요소에 대해 '영향 받지 않겠다'는 의미이다.
clear를 통해 float된 요소의 위치를 파악하게 되어 다른 형제 요소는 float된 요소의 위치와 겹치지 않도록 원래 자리에 위치한다.
이로 인해 부모 요소는 float된 자식 요소의 위치는 파악하지 못하지만 clear된 자식 요소를 기준으로 전체 자식 요소의 height를 파악할 수 있다.
단지 float 문제 해결을 위해 억지로 html에 의미 없는 요소를 추가하는 것은 바람직하지 못하다.
스타일적인 요소로만 html 작성 없이 css로만 처리 하는 방법으로
Pseudo-Element (HTML에는 존재하지 않는 가상 요소)에 clear 속성을 적용한다.
(생성된 가상 요소는 inline type이다.)
::before : float된 자식 요소를 갖는 부모 요소의 가장 첫번째 자식 요소로 가상 요소를 만든다.
::after : float된 자식 요소를 갖는 부모 요소의 가장 마지막 자식 요소로 가상 요소를 만든다.
가상 요소 생성 시 content 속성은 반드시 작성해야 한다.
속성값으로 화면에 표시될 내용(문자열)을 작성한다.
※ content 속성은 빈 문자열이라도 작성해줘야 화면에 요소가 나타난다.
=> after를 사용해서 float된 자식 요소를 갖는 부모 요소의 가장 마지막 자식 요소를 만들고 clear 속성을 적용해 레이아웃의 붕괴를 막는다.
.parent::after {
content: ""; // 가상 요소를 만들기 위해 반드시 필요한 속성
display: block; // clear 속성을 사용하기 위한 전제 조건
clear: both; // float 속성값과 동일한 값 작성
/* left | right | both */
}float 사용할 때, 이것만은 알자!
1. 가로배치 해야할 요소가 무엇인가 파악하고, float 적용하기
2. float 적용한 요소들을 감싸는 부모 요소에게 Clearfix 적용하기
(위와 같은 재사용 가능한 범용 클래스를 만들어 활용함😉)
☪ 이미 부모 요소가 block 형태인데 생성된 가상 요소에 'display: block;' 을 해주는 이유?
🅰 가상 요소를 만들기 위해서 content 속성이 필수인데 content는 'inline 요소'이다. clear 속성을 적용하려면 block인 요소에만 작용되므로 display: block을 해준다.
*CSS 렌더링 방법 참고 관련 링크 (overflow: hidden; 사용 이유)
MDN Block formatting context
☪ after를 이용해 가상 요소를 만드는 대신 부모 요소에 직접 height를 설정하는 방법은 가능한가?
🅰 height 값을 지정해서 높이를 유지하는 것도 float로 인한 레이아웃 붕괴를 막을 수 있다. 그러나 만약 float된 요소가 추가/삭제된다면, 그때마다 height값을 일일이 값을 바꿔줘야 하는 번거로움이 발생한다. (확장성이 떨어지고 비효율적)
그래서 가상요소 ::after로 처리를 하면 몇줄이 되든 항상 안정적으로 float를 사용할 수 있다는 장점이 있기 때문에 float 사용을 권장한다.
보통은 코드의 유지/보수라는 측면에서 ::after를 사용하는 걸 더 선호한다!
