특강주제
1. 시맨틱 태그 – 시맨틱 태그를 언제 사용할지 어떻게 결정합니까?
2. 축소된 여백 / 여백 및 패딩 사용
3. 위치 및 변형
4. 양식 및 테이블 요소의 유효성 검사
5. 최소 및 최대 너비 사용 |
증거금
▷ 요소 사이의 거리(마진)와 부모와 자식 사이의 거리(패딩)를 생각하십시오.
└ 그래서 마진합병 스트레스가 없어요!
마진 합병 현상 해결 방법
1. 오버플로 속성 값을 부모에 적용합니다.
2. display: inline-block 값을 상위 요소에 적용합니다.
3. 부모 요소에 테두리 값을 적용합니다.
4. 상위 표시 속성으로 flow-root를 사용합니다.
(IE는 지원하지 않습니다)
하지만 한계가 있습니다!
overflow:hidden 특성을 사용하면 요소가 잘릴 수 있습니다.
인라인 블록은 요소의 너비를 내용의 크기로 제한합니다.
테두리 값을 적용하면 원하지 않는 선이 생깁니다.
따라서 Flow-Root를 사용하는 것이 가장 깔끔한 방법입니다.
리버루트
▷ flow-root는 Edge 병합을 방지하기 위해 BFC(Block Formatting Context)를 생성합니다.
그렇다면 BFC는?
웹 페이지 화면에서 CSS를 렌더링하는 프로세스의 일부입니다.
블록 레벨 요소 또는 플로팅 요소가 이 프로세스에 포함됩니다.
BFC가 생성되면 이렇게 작동합니다.
1. 내부 및 외부 플로트를 풉니다.
2. 가장자리가 무너지는 것을 방지하십시오.
라벨
▷ 사실적으로 균일한 섹션에 사용됩니다.
▷
