HTML

요소

폼

• name 속성
  => 저장될 때에 알아보기 위한 이름
• lable
  => for 속성과 이름표를 붙일 태그의 id 속성과 연결시킨다
• input
  => minlength, maxlength 속성으로 최소 또는 최대 글자 수를 정할 수 있다

CSS

BOX

여백

• margin, padding에서 auto
  => display: block;인 경우에는 auto가 먹지 않는다

color

• currentColor
  => 글꼴의 컬러와 동일하게 적용

반응형 웹디자인

• 사용자 환경에 상관없이 최적의 사용자 환경을 제공하기 위해
  사용자 기기에 응답하는 웹사이트를 디자인하는 프로세스
• 기기에 상관 없이 모든 리소스를 다운 받아야 하기 때문에 리소스 체크를 항상 해야 한다

유연한 그리드

• 사용자 기기의 화면 크기에 따라 최적화 된다
• px이 아니고 %, em, rem 같은 상대 측정 단위가 사용된다

유연한 미디어

• 미디어 유형에 max-width 속성을 적용해야 한다

미디어 쿼리

뷰포트 메타 요소

• 미디어 쿼리의 조건이 맞지 않을 경우 뷰포트 메타 요소에 적용된 코드가 작동한다
• 너비, 초기 배율 등 기기의 화면에 최적화 할 수 있다

<meta name="viewport" content="width=device-width; initial-scale=1">

positioning

• 모든 요소의 포지션 기본 값은 static
• absolute
  => 자신과 가장 가까운 상위 블록에서 position이 static이 아닌 것을 기준으로 삼아 움직인다
  => 상위 블록은 relative / 움직이고자 하는 블록은 absolute로 많이 한다