TIL.26 위스타그램 코드리뷰 중간정리

출저

• 위키백과
• 위코드 강의자료

1. img 태그의 alt

• Alt태그 또는 Alt속성은 이미지의 대체문구(alternative text)이다.
• 보통 Alt태그는 사람들에게 보여지지 않는 html의 img태그에서 속성으로 쓰이며 이미지를 설명하는 목적으로 만들어진다.
• 검색엔진이 여러분의 웹사이트를 크롤링할때, Alt태그를 이용하여 컨텐츠를 더 잘 이해하고 검색결과 순위에서 적절하게 색인하거나(검색 엔진 최적화 SEO), 시각장애인이 음성기반의 소프트웨어로 웹서핑을 할 때 쓰인다.
• 검색 엔진 최적화(영어: search engine optimization, SEO)는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다.

2. 모든 input 태그에 이벤트 적용

• 로그인창에서 id, password 칸 모두 이벤트를 적용시켜 순서에 상관없이 이벤트가 적용될 수 있도록 한다.

//기존 코드: 패스워드칸에만 이벤트를 적용시켜 패스워드->아이디 칸 순서로 입력하면 이벤트가 실행되지 않았다.
const inputId = document.querySelector('.loginIdInput')
const inputPassword = document.querySelector('.loginPasswordInput')
const btn = document.querySelector('.btn');

inputPassword.addEventListener('keyup', moreThanOne)

function moreThanOne () {
    const id = inputId.value;
    const password = inputPassword.value;
   
    if ((id.length >= 1) && (password.length >= 1)) {
        btn.style.backgroundColor = "rgb(44, 134, 224)"
    } else {
        btn.style.backgroundColor = "#CAE3FC"
    }
}

//수정 아이디에도 이벤트 추가.

inputId.addEventListener('keyup', moreThanOne);

3. css 속성 순서 준수 여부

• 레이아웃에 영향을 많이 주는 순서, 인접 속성끼리 묶기

1. Layout Properties (position, float, clear, display)
2. Box Model Properties (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. Misc Properties (cursor, overflow, z-index)