float은 요소를 띄워서 정렬을 하는 속성이다.
float: left;
float:right;
로 왼쪽 오른쪽 정렬이 가능하다. 띄워서 정렬하는 float의 특징 때문에 두 가지 문제가 발생하게 된다.
🤔 1. 첫 번째 사진처럼 자식 요소들이 전부 float 속성일 경우, 부모는 자식 요소들의 높이를 인식 할 수 없다!
🤔 2. 두 번째 사진처럼 형제 요소들끼리는 float을 인식하지 못 한다!
✍ 참고 내용: 형제 요소 모두 float이 되어 있다면, 1번 부모가 자식 요소의 높이를 인식할 수 없는 문제가 발생합니다. 형제 요소 중에 float으로 지정된 요소가 있고 없는 요소가 있다면 2번 문제가 발생한다.
물론 해결 방법은 있다.
😊 1-1. 부모 요소에overflow:hidden;
을 추가.
😊 1-2. 부모 요소에 height 지정.
😊 1-3. 부모 요소에 가상 요소를 추가하여clear:both;
추가..wrap::after { content: ""; display: block; clear: both; }
😊 2-1. 형제 요소 중 한 요소에
inline-block;
지정.
😊 2-2. 형제 요소 중 한 요소에clear:both;
추가.
- flex-box 사용은 지양.
➡ flex 박스의 경우, 정렬을 하기 위해 부모 박스 필요.
➡ flex 박스로 정렬을 하기 위한 부모 박스를 새로 만들어 비효율적.
➡ 상황에 따라서 적절히 사용 필요
- 레이아웃 구현시 position 사용 지양.
➡ 나중에 추가되는 요소들에게 영향이 있을 수 있음.
➡ top, left 등 위치 값을 지정해야하는 불편함이 있음.
- 피그마 값 참고
➡ width, height, 스타일링 속성값을 참고.
➡ position 관련된 속성 값은 적당히 무시.
➡ 피그마에서 소숫점 값은 참고하지 않음, 브라우저마다 소숫점을 반올림하는 경우도 있고 하지 않는 경우도 있음.
- 시멘틱 태그
➡ "더 편리해진 위니브에 오신 것을 환영합니다."가 제목이라고 생각한다면h1
태그도 적절함.
➡ 제목이 아닌 거 같다면h1
태그를 따로 만들어 IR 기법을 사용하고 환영멘트는h2
정도가 적절함.
- 클래스 네이밍
➡ 요소 전체에 클래스를 지정한 후 필요한 클래스만 사용, 사용하지 않는 클래스는 HTML에서 삭제.
➡ 취직 후 회사 컨벤션을 따라 네이밍.
➡ 학습 중에는 본인의 규칙을 만들어 네이밍.(형태-의미 = txt-login)
덕분에
float
속성의 특징과 해결 방법 복습 잘 했습니다!!😊오늘도 수고하셨습니다!!🤗🤗