404 Not Found

플로팅 속성

• 플로팅 요소의 너비는 수축하고 일반적인 흐름에서 벗어난다.
• 인접 후행 블록 요소는 플로팅 요소와 겹치고 인라인 요소(+텍스트 요소)는 플로팅 요소 주변으로 흐른다.
• clear, flow-root 속성으로 해제할 수 있다.
• 컬럼을 배치하는 속성이 아니다.

MORE

• vmin, vmax: viewfort-min, viewfort-max
• padding의 %값: 컨테이너 블럭의 너비값을 참조한다. (padding-top이든, padding-left이든 너비를 참조함)
• margin의 %값: 컨테이너 블럭의 너비값을 참조한다.

MORE

display

inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, tabel-caption, none, inherit

MORE

BEM

• Block: 재사용 가능한 독립적인 블록.
• Element: 블록을 구성하는 종속적인 하위 요소.
• Modifier: 블록 또는 요소의 변형(모양, 상태, 동작) → 확장할 때 이용

MORE

• 대부분의 초기화 스타일은 쓸모 없거나 덮어쓴다.
• 개발자 도구에서 coverage를 검색해 사용되지 않는 CSS를 확인할 수 있다.

MORE

값 정의 구문: css 속성의 유효한 값과 순서
| : 파이프라인, only. 양쪽에서 하나만 사용할 수 있다.

MORE

이미지 포맷

• .jpg/.png
  • 모든 브라우저에서 지원하는 폴백 이미지
• .webp (알파 채널, ie 미지원)
  • jpg/png 대비 30-70% 수준의 용량
• .avif (알파채널, 크롬/삼성인터넷 지원)
  • 저용량+고품질

MORE

a, button

• a
  • 실행 결과를 가리킬 수 있는 url이 있을 때
  • 현재페이지 특정 섹션 스크롤 이동
  • 대화 상자를 참조하는 경우. a 요소의 href 값은 dialog 요소의 id(해시 url)을 참조
  • 링크 열기 가능. (button보다 더 많은 기능을 제공)
• button
  • 참조할 url이 없을 때
• pointer: 링크를 의미하기 때문에 button일 때는 pointer 하지 않는 것이 좋음.

MORE

• div, span은 아무 의미가 없다.

sectioning

• hx, hgroup, header, footer → 섹셔닝은 아니지만 함께 쓰는 요소
• article, aside, nav, section → 섹셔닝 요소

MORE

• headingmap
• 헤딩
• 섹셔닝
• 명시적/암시적 섹션
• 어색한 섹션

MORE