Nyong's Blog
0%

201020_TIL(BFC와 float 속성)

Posted on Edited on In

오늘 한 것

가운데 정렬

  • margin 값을 양쪽에 auto를 줘서 정해진 width값을 가운데로 몰아 넣기(해당 요소에 적용)
1
2
3
4
5
main {
  width: 940px;
  padding: 10px;
  margin: 0 auto;
}
  • flex를 활용한 콘텐츠 가운데 정렬(부모 요소에 적용)
1
2
3
4
5
6
body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

BFC(block Format context)

  • 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위.

  • 화면을 렌더링 할 때 블록 요소가 그려질 수 있는 환경적인 부분을 담당하고 컨트롤하는 내부 로직이다.

  • BFC는 레이아웃 안에 있는 별개의 작은 레이아웃 환경이다.

  • BFC는 스스로 독립적인 문서처럼 레이아웃을 적용시켜줄 수 있기 때문에, body영역도 BFC 정도로 이해할 수 있다.

  • position: absolute, position: fixed, float: {속성값}, overflow: hidden 등은 BFC를 발생시킨다.

  • 개인적으로 BFC는 float이나 position의 특정 속성 값으로 새로운 body 성격의 영역을 만들어줘 부유하거나 위치를 옮기려는 박스 요소의 상태, 재배치할 수 있는 영역 정도로 이해하였다.

  • 참고: BFC

float 해제

  1. float속성으로 인해 요소가 부유하거나 자식 요소가 부모 박스 영역을 벗어날 때가 발생한다. 이떄, 보통 부모 요소가 자식 요소를 잃고 규격이 변하며 자식 요소는 다른 범위로 침범할 경우가 있다.

  2. 이때 당황하지 않고 부모 요소 등를 overflow, clear 등을 활용하면 그 영역이 BFC 환경으로 바뀌며 자식 요소가 새로운 body 영역에 재배치되는 것 처럼 안정화된다.

  3. float 해제된 기쁨을 만끽한다!

  4. 아래는 float 해제 방법이다.

부모 요소에 height를 부여한다.

  • 부모 요소에 height를 부여하면 float이 해제된 것 같은 효과를 보인다.
  • 하지만 자식요소의 높이가 더 높을 경우 자식 요소가 넘치는 현상이 그대로 발생한다.

부모 요소에 float 속성 부여

  • 자식 요소와 마찬가지로 부모 요소에도 float 속성이 부여되면 자식 요소 float이 해제된 것으로 보인다.
  • 하지만 부모 요소 또한 float 상태이기 때문에 별로 좋지 못하다.

overview 속성을 이용

  • overview: hidden을 사용하여 float을 해제한다.
  • 단점은 자식 요소가 의도적으로 부모요소를 벗어나게 배치됐다면 자식요소의 벗어난 부분이 보이지 않는다.

clear 속성 이용

  • 부모요소 내부에 clear: both 속성을 품는 div를 첨부하여 float을 해제한다.
  • clear를 위한 의미없는 블록이 생기기 때문에 의미론적으로 좋지 않다.

가상요소를 이용한 clear 속성으로 float 해제

1
2
3
4
5
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  • overflow와 비슷하게 자연스럽게 float을 해제해줌.
  • 하지만 상위 요소에서 flex 사용 시 콘텐츠로 인식된다.

웹문서의 중요한 것

  1. 구조
  2. 논리적인 순서
  3. 시맨틱 마크업
  4. 네이밍

  • Aria-hidden=”true” 속성 검색결과에 영향 X / 스크린리더에서 인식 X

  • Position에 의한 Layout은 합리적이지 않다. 좌표값을 UI가 변하면 항상 변경해야함.

기타

  • HTML에서 font-size를 지정한 뒤 하위 요소에서 font-size를 em / rem단위로 적용하면 전체적인 font-size변경이 필요할 시 html의 font-size만 바꿔 전체에 영향을 줄 수 있어 관리가 용의하다.
1
2
3
4
5
6
html {
  font-size: 10px;
}
body {
  font-size: 1.5rem; //html font-size값에 따라 유동적으로 바뀜
}

  • float된 box끼리 겹치게 되면 box 내부 inline 요소는 영역 밖으로 밀려난다.

  • Reflow가 적게 발생해야 비용이 좋다. -> youtube “gecko reflow visualization” 검색 참고

참고자료

오늘 느낀 것

  • 슬슬 행복하기만 했던 쉬운 기초는 끝나간다. 항상 초반에는 재밌다가 어려워지면 포기하곤 했는데, 이번에는 포기 없이 끝까지 할 계획이다.

  • 항상 어떤 개념이 이해가 되지 않으면 우울해진다. 더 많은 자료를 읽고 더 많은 실습을 해봐야지.

  • 고정형 레이아웃 예제를 이용하여 콘텐츠 배치와 정렬 등을 연습하고 있다.(gitHub참조)

  • position, float, flex 등 생각보다 쉽지 않다. 아직까지 완벽히 개념이 잡히지 않는 기분이다. 좀 더 여러 상황을 만들어 보며 연습할 예정이다.

Nyong’s GitHub