BEM(Block Element Modifier)
CSS, JS 사용을 위해 요소들을 구분하게 되는데 태그, 클래스 위주로 구분을 하게 되었을 때는 장황해질 수 있어 블록(컴포넌트) 단위로 명명하면 아래 특징들을 보일수 있다.
1. 간결해진 선택자 - 코드량 감소
2. 명확한 선택자 - 중복 문제 해소
3. 높은 가독성, 이해하기 쉬운 구조
BEM 명명 규칙
Block: .block
Element: .block__element
Modifier: .block--modifier 또는 .block__element--modifier솔직히 잘 모르겠다 이 부분,,, 웹페이지 만들 때 다시 정리해야지..
SVG(Scalable Vector Graphic)
픽셀 단위가 아닌 vector 이미지로 깨지지 않는 해상도를 유지해야할 때 사용
.svg 파일을 img에 연결, 또는 svg 태그에 직접 작성 가능
SVG 관련 툴 ( 웹페이지 만들 때 사용해 보자)
오디오와 동영상
1. src 속성을 사용한 링크
| 속성 | 설명 | 비고 |
|---|---|---|
| src | 미디어 파일 위치 | source 태그로 대체 가능 |
| control | 제어 인터페이스 | 필수로 들어가야 함(보통) |
| autoplay | 자동재생 | 요즘 브라우저에서는 자동재생을 지양해서 디폴트로 막는경우가 있음 |
| loop | 반복재생 |
2.source 태그를 사용한 링크
브라우저마다 호환할 수 있는 파일 형식이 다를 수 있기 때문에 대안을 줄수 있는(여러개 소스파일) 태그 방식
audio 태그
<audio src="오디오 파일 경로" controls></audio>audio 태그는 항상 src속성과 함께 사용하며, 오디오 컨트롤 패널이 웹 브라우저에 노출되도록 controls 속성을 설정해야한다.
video 태그
<video src="비디오 파일 경로" controls></video>형식과 쓰임은 audio태그와 비슷하다. audio, video 태그는 웹 브라우저마다 지원 하는 파일 포맷과 미디어 타입이 다르니 참고하자.
source 태그
source 태그는 audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는데 사용한다. 필수는 아니지만 웹 브라우저별로 지원하는 포맷과 미디어 타입은 다르기에 해당 태그를 이용하여 모든 source 태그를 확인했는데, 전부 지원하지 않는 형식이라면 마지막에 작성한 텍스트가 사용자에게 노출된다. 웹접근성에 용이한 것이다.
