CSS 방법론 - BEM

CSS 방법론에는 OOCSS, BEM, SMACSS 등이 있습니다. 그 중 BEM 방식!! 1. BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻한다. 이 세 가지로 구성된 이름을 짓는 것을 말한다. 그리고 각각 __ 와 -- 로 구분한다. .header__navigation--navi-test{ color: red; } 위 코드에서 header는 Block, navigation은 Element, navi-text는 Modifier가 된다. BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다. 또 '어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 짓는다. 예를 들어, 에러 메시지를 띄우는 P 태그에게는 .red가 아닌, .error 라는 이름을 줘야..

2022.05.09

HTML5 Multimedia - Video Elements

1. Video Elements - 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시 - Control API 제공 src 비디오 자원의 경로지정 사용 시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 poster 포스터 이미지를 지정함 (영상이 없을 때, 시작 전에 보여지는 이미지) 영상의 크기와 동일한 크기의 이미지를 준비한다. controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 비디오 코덱 정보를 지정 muted 비디오 사운드 제거 preload 영상을 로딩하면서 재생이 동시에 이루어짐 (필수) /* 크로스 브라우징을 위한 문법 */ Your browser is old. Download th..

2021.11.11