[SeSAC DT 과정] HTML video, audio 태그 / CSS flex, filter

1️⃣ HTML

1) video,audio 태그

• 비디오파일, 오디오파일을 문서에 삽입할 때 사용
• 형식(audio태그도 동일)

  • <video src="" type="video/mp4" controls></video>

  • <video><source src="" type="video/mp4"></video>

• 속성값

src/width/height/controls/autoplay/loop(반복)/poster(썸네일 같은 것)/preload

      - autoplay는 사용자가 제어할 수 없는 상황을 만드므로 웹접근성 차원에서 브라우저 상에서 금지됨.
      다만 음소거일 때는 (muted 속성)가능

      -	preload :  비디오가 재생되기 전에 내용을 읽어오는 방식 지정.
      preload = auto(사용자 편리. 이미 데이터 다운로드 전부 받아놓음. 페이지 로딩 속도 느려질 수 있음) 
      / metadata(권장. 기본정보만. 영상길이, 형식 등)
      / none

---

2️⃣ CSS

1) flex

🐸 flex 속성 연습 게임

• 보다 쉬운 레이아웃 배치를 위해 css3에 새롭게 추가된 display 속성

• 형식

  	display: flex / inline-flex(inline-block과 같이 블록 형태의 인라인)

  • 상위요소 부모요소 flex container
  • 하위요소 자식요소 flex item(float 동시 적용 x)

• 속성

<크기 관련 속성>

• flex-grow 확장, 팽창
  • 0(기본값, 확장 x) / 1(1배율만큼 확장,균등배분) / ...
• flex-shrink 축소, 수축
  • 1(기본값, 축소되어있음 - 설정한 너비에서 넘치지 않음) / 0 (축소 안됨) / ...
• flex-basis 특정값 부여, 아이템의 너비(width에 우선순위 가짐, 덮어씀)
  • auto(기본값) / px
  • 방향에 따라 너비(수평), 높이(수직)로 유연하게 적용됨
• flex : grow shrink basis; (축약속성 but 쓰기 까다로우므로 각 속성 따로 써주는 게 나음)
  • flex: none => 0 0 auto
  • flex : grow 값만 // shrink 1 basis 0
  • flex: grow shrink 두 개만 // basis 0
  • flex: basis 값만 // grow 1 shrink 1

<방향 순서 관련 속성>

• flex-direction : row(기본값) / row-reverse / column(수직) / column-reverse

• flex-wrap (줄바꿈 속성) : nowrap(기본값) / wrap(줄바꿈) / wrap-reverse

• flex-flow (위의 두 속성 축약) : direction wrap

• flex-order (flex item에 적용) : 0(기본값, 원래 순서)

  • 음수, 양수 모두 가능
  • 낮은 값부터 배치

  💡 위 3개(flex-direction, flex-wrap, flex-flow)는 flex container에 적용, flex-order만 flex item에 적용!

< 정렬 간격 관련 속성>

• justify-content : 메인축 아이템들의 정렬 간격 조정(flex-container)
  • flex-start(기본값) / flex-end / center / space-between(사이 간격 동일하게) / space-around(좌우간격 동일하게)
    💡 space-between과 space-around 구분하기!
• align-items : 교차축 아이템들의 정렬 조정(flex-container)
  * Flex-start / flex-end / center / baseline / stretch(기본값, 꽉꽉채움)
  
• Align-self : 교차축 아이템 개별 정렬(flex-item)
  • Flex-start / flex-end / center / baseline / stretch / auto(기본값 => align-items값 따라감)
• Align-content : flex-wrap:wrap일 때만 (여러 줄로 이뤄졌을 때) 교차축의 정렬과 간격을 조정(flex-container)
  • flex-start / flex-end / center / space-between(사이 간격 동일하게) / space-around(좌우간격 동일하게) / stretch(기본값)

2) filter

• 요소에 그래픽적인 효과를 주는 속성

  • none : 이펙트 없음
  • blur(px)
  • brightness(%)
    • 0 검정 - 100(기본값) -100% 이상 밝게
  • contrast(%)
    • 0 대비 낮게 - 100(기본값) -100% 이상 대비 높게
  • drop-shadow(x y blur 색상)
  • grayscale(%) 흑백처리
    • 0(기본값) - 100% 완전 흑백
  • hue-rotate(deg) 이미지의 색상환 돌려서 이미지 색상의 변화를 줌
    • 0 - 360 deg
  • invert(%) 색상 반전
    • 0(기본값) - 100% 완전 반전
  • saturation(%)
    • 0 채도 낮게 - 100(기본값) -100% 이상 채도 높게
  • sepia(%)
    • 0(기본값) - 100%