실습 내용
1시간 안에 주어진 화면을 제작하는 실습이었다.
대략 아래와 같은 로그인 화면을 디자인 하는 내용이었는데...
그렇게 1시간이 지나고 내가 만든 결과물은 바로... 아래처럼 휑한 화면 😂
강사님께서 코드 리뷰를 해주신다고 했는데 제출은 하지 않았다 (너무 볼 게 없어 보여서... 다음 기회에는 꼭..!)
그럼에도 코드 리뷰 시간 동안 배운 내용이 정말 많았다!
코드 리뷰 자체를 오늘 수업에서 처음 경험했는데 다들 왜 중요시하는지 체감한 하루. 강사님의 리뷰는 물론 다른 수강생 분들의 코드를 보면서도 배우는 점이 많았다. 평소 직관적인 클래스명에 대해 고민이 많았는데 깔끔하게 작성하신 분의 코드가 인상 깊었다!
코드 리뷰 정리
▶ margin, padding 사용법
▷ margin: 요소와 요소 사이 여백을 주기 위해
▷ padding: 요소 안에 공간을 주기 위해
▷ 요소와 요소 사이의 간격은 가장 바깥의 컨테이너에 주는 게 좋다. 분석할 때 더 깔끔함.
▶ focus
▷ border로 focus를 주면 공간을 차지해 새로고침했을때 레이아웃이 바뀌고 위치가 흔들리니 주의.
▷ focus-visible
:focus는 포커싱 이벤트가 일어나면 무조건 작동하지만 키보드 입력이 일어났을 경우만 가상클래스를 적용한다.
특히 접근성을 위해 사용하는 경우, 마우스 이벤트로도 작동하는 focus는 시각적인 불편함과 체크를 해제했음에도 포커스되어 있다는 이유로 작동하는 혼란을 줄 수 있기 때문에 focus-visible 이 더 효과적이라고 볼 수 있다.
▶ nav에서의 font 사용
▷ 글꼴도 이미지다.
▷ img로 뽑은 font보다 font의 용량이 크면 빠른 렌더링이 필요한 탭에 img font를 넣기도 한다. (ex. daum 홈페이지)
▷ 이미지 로딩이 실패할 경우를 대비해 img 뒤에 font를 넣어준다.
▶ clip 이미지를 cliping하는 속성
▷ clip을 쓰려면 position apsolute가 반드시 필요하다.
▷ clip-path의 기본은 rect. 사각형으로 잘라준다.
▶ flex
▷ flex 사용하려면 반드시 컨테이너와 자식 요소가 있어야 한다.
▷ text-align 등으로 정렬이 가능하다면 flex를 남용해 코드를 늘리지 말자. 코드 최적화는 중요하다.
▶ button
▷ 버튼의 영역을 이미지보다 크게 주면 사용자 접근성에 좋다.
▷ 버튼 높이를 height가 아닌 padding으로 설정하면 고정되지 않고 여백을 유연하게 줄 수 있다. 어디에 사용하든 height를 고정하는 버릇은 좋지 않다.
▷ 버튼은 하단에 가는게 접근성상 좋다.
└ 모든 내용을 파악한 다음 버튼을 클릭해야 하기 때문에.
└ 예를 들어, 어떤 내용인지 모르는 상황에서 닫기 버튼이 나오면 당연히 불편할 것이다.
▶ a
▷ a href=#none" 으로 적으면 새로고침 되지 않는다. 페이지 내에 id=none으로 이동하라는 의미
▷ #none 대신 javascript:void(0)를 주면 undefined을 받아온다. 똑같이 새로고침 되지 않는다.
▷ a와 button을 부모자식으로 쓰면 안 된다. 브라우저에서는 a가 눌린건지 button이 눌린건지 모르기 때문에.
▶ filedset
▷ fildset 요소는 연관된 요소를 하나의 그룹으로 묶을 때 사용한다.
▷ 그룹으로 묶은 요소 주변에 박스 모양의 선을 그려주는데 요소를 사용하면 요소의 캡션(capton)을 정의할 수 있다.
참고 글: ('HTML fieldset 태그')
▶ 열린 태그와 닫힌 태그
▷ 열린 태그라고 가상요소를 쓸 수 없는 건 아니다. 종류에 따라 다르다.
▷ button과 input 중에 button은 닫힌 태그라 이미지 같은 것들을 넣어 더 커스터마이징 할 수 있다.
▶ 기억할 것들
▷ 블로그 글만 믿으면 안 된다. 실제로 작동하는지 내가 검증해봐야 한다. (기술은 계속 변화하고 발전하기 때문에)
▷ 클론 코딩 강의보다는 내가 하고 싶은 페이지를 직접 클론코딩 하자.
▷ 코딩에서는 내 고민의 흔적들, 어떤 생각을 하며 코딩을 했는지 드러나야 한다. 개수가 많은 건 중요하지 않다.
▷ 아직까지 지원 가능한 브라우저를 중요히 여기자.
▷ alt는 구체적으로 쓰는 게 좋다 (창닫기 X - 로그인창닫기 O)
▷ section이나 article 요소를 쓴다면 구역을 설명하는 제목 요소가 들어가는 것을 권장한다.
▷ 3개 이상 연속되는 아이템은 div처럼 의미 없는 태그를 사용하는 대신 li이나 ul로 감싸주면 좋다.
▷ 폰트 색상이 강조되는 중요한 정보는 strong 태그로 표현되면 좋다.
▷ form validation(폼 검증)을 위해 input에 requaired를 넣어주자.
