[Project - A] 레이아웃과 구성요소 | Issue & Solution & Review

- 웹 프로젝트를 진행하면서 생긴 Issues와 Solution기록

- Review 내용을 정리하고 Refactoring 

 

Project A-1 (레이아웃 만들기)

 

🙌 Reviews

 

- flex는 IE 하위 브라우저 크로스브라우징 이슈가 존재해 웹 프로젝트 사용엔 조심스럽다. 참고사항

- ':hover' 는 클릭 가능한 요소에 선언하여 <a> 태그에 바로 :hover를 선언하는 것이 좋음

---

Project A-2 (구성요소 만들기)

🤷‍♀️ Issues

 

1.  table의 thead와 tbody사이에 알 수 없는 여백이 생김

 

 

- thead인 구분과 tbody인 미국남아를 보면 border가 묘하게 두껍게 나타났다. 

 

✅ 해결 

- 알고보니 table의 caption 문제였다. 공통요소를 묶어서 소제목은 h4로 마크업하기 위해 caption에 'hidden' class를 주고 평소하던대로 hidden에 reset css에서 사용하던 style을 가져와서 썼는데 그게 문제 였다. hidden에 absolute가 있다보니 저런 이슈가 생긴거였다.. 그냥 h4를 제거하고 caption으로 소제목을 달아서 해결!

 

 

2. 한줄에서 글자의 위치가 정확히 가운데 배치가 되지 않는 오류

 

 

 

- checkbox와 묶은 label의 라인이 안맞아서 높이가 달라졌다.

 

✅ 해결 

- 'position: relative;' style을 적용하여 부모 기준으로 위치를 잡고 'top' 으로 조절하여 chekbox와 label의 높이를 맞췄다.

 

 

3. table의 scope=row

 

- 테이블의 가로 라인의 첫번째에 소제목이 있다면 'scope=row' 를 지정해야 한다고 알고 있었는데, 가로 3줄이 모두 '미국 남아'의 소제목을 가진 라인들이어서 'scope=row'를 넣는게 맞는지 헷갈렸다.

 

✅ 해결 

- 'scope=row'를 넣는게 맞다고 comment를 주셨다.

( rowspan의 라인이 몇개든 가로라인 소제목에는 'scope=row' 넣기!)

 

---

🙌 Reviews

- caption을 table의 제목으로 지정하기

- 용어를 설명해주는 리스트 목록은 'dl' 로 사용하기

- img의 width, height 값 명시해주기

- !important 의 사용은 추후 유지 관리가 어렵기 때문에 최대한 지양하기. 꼭 필요한 상황에서만 사용

- overflow:hidden는 부모를 벗어나는 자식 요소가 생길 경우에 자식 요소가 잘려보일 수 있으니 다른 방식으로 해제하는 것도 참고