<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
보다 쉬운 레이아웃 배치를 위해 css3에 새롭게 추가된 display 속성
display: flex / inline-flex(inline-block과 같이 블록 형태의 인라인)
<크기 관련 속성>
- 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(기본값)
요소에 그래픽적인 효과를 주는 속성
- 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%