위니브 로그인 폼 코드리뷰 (html/css)

1. 안쓰는 class는 빼버려라
2. 쓸모없는 요소들은 css에서 가상요소로 주어도 괜찮다
3. 웹표준에 맞게 작성되었는지 w3c validation 확장 프로그램 설치해서 살펴보기

4. 버튼/p 태그 정렬 맞추기

클래스 네이밍 : 형태 + 의미
컨테이너는 [cont-?] 라고 이름 짓기

보이지 않는 요소 처리할때
hidden, display:none 으로 숨기지 말고
아래 속성 지정해놓고 reset.css에 넣어놓기

브라우저 입장에서는 display:none 으로 맞춰놓으면, 랜더링 하지 않는다. 존재하지 않는 것으로 처리하기 때문에 스크린 리더가 읽을 수 없다.

.txt-hide {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

위 속성 사용하기.
+clearFix 요소도 reset.css 에 넣어주자

margin/padding 사용 차이는?
margin: 요소와 요소 사이 간격
padding: 요소가 자기 안(자식) 요소들에 간격을 줄때

선택자 두단계로 작성하기
.부모 .자식

브라우저가 랜더링 하는 순서
html > css or js
html을 제일 먼저 해석. html 양을 줄이는 것을 우선적으로!

css 속성 작성할때 순서 팁
디스플레이에 영향을 미치는 속성 ex)display:flex
넓이/높이
패딩/마진
순서대로

float 해제하는 방법
clearFix 요소

article 가장 마지막에 clearFix 가상요소 생성

.clearFix::after{
    display:block;
    content:"";
    clear:both;
}

find 영역에 float:left; 지정
요소에 float 넣게 되면, 디스플레이 설정 바뀐다.
간단히 끝낼 수 있는거면, 간단히 끝내는것이 좋다.
flex 쓸 필요 없음

• | 같이 의미없는 이미지 만드는것도 가상요소 활용하기