멋쟁이사자처럼 프론트엔드 스쿨 2기 11_Day

안녕하세요 Ayden 입니다.

CSS float 그리고 로그인 페이지 과제에 대해 말씀드리겠습니다.

1. float
2. 과제

1. float

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; 추가.

2. 과제

처음으로 피그마를 통해 만든 결과물로 강의 중 보고 느낀 부분에 대해 말씀드리겠습니다.

---

1. flex-box 사용은 지양.
   ➡ flex 박스의 경우, 정렬을 하기 위해 부모 박스 필요.
   ➡ flex 박스로 정렬을 하기 위한 부모 박스를 새로 만들어 비효율적.
   ➡ 상황에 따라서 적절히 사용 필요

---

2. 레이아웃 구현시 position 사용 지양.
   ➡ 나중에 추가되는 요소들에게 영향이 있을 수 있음.
   ➡ top, left 등 위치 값을 지정해야하는 불편함이 있음.

---

3. 피그마 값 참고
   ➡ width, height, 스타일링 속성값을 참고.
   ➡ position 관련된 속성 값은 적당히 무시.
   ➡ 피그마에서 소숫점 값은 참고하지 않음, 브라우저마다 소숫점을 반올림하는 경우도 있고 하지 않는 경우도 있음.

---

4. 시멘틱 태그
   ➡ "더 편리해진 위니브에 오신 것을 환영합니다."가 제목이라고 생각한다면 h1태그도 적절함.
   ➡ 제목이 아닌 거 같다면 h1 태그를 따로 만들어 IR 기법을 사용하고 환영멘트는 h2 정도가 적절함.

---

5. 클래스 네이밍
   ➡ 요소 전체에 클래스를 지정한 후 필요한 클래스만 사용, 사용하지 않는 클래스는 HTML에서 삭제.
   ➡ 취직 후 회사 컨벤션을 따라 네이밍.
   ➡ 학습 중에는 본인의 규칙을 만들어 네이밍.(형태-의미 = txt-login)