211018 필기내용

css

• transform:

  • translate() : 위치 이동
    • translate(x, y); : x축, y축으로 이동 / 1개의 값만 쓰면 x축
    • translateX(); : x축으로 이동
    • translateY(); : y축으로 이동
    • translateZ(); : z 축으로 이동
    • (00%) : translate에 % 는 부모의 값이 아닌 자신이 기준
  • scale() : 크기
    • scale(x, y); : x축, y축으로 크기 변경 ex) 1.2배 - 120%, 1.2 둘 다 가능
      • scale() : 한개만 쓰면 x, y동시에 같은 비율로 크기 변경
    • scaleX(); : x축으로 길어지거나 줄어듬, 안의 글자나 내용물도 같이 변경
    • scaleY(); : y축으로 길어지거나 줄어듬, 안의 글자나 내용물도 같이 변경
  • skew() : 기울기
    • skew() : (각도) 각도만큼 뒤틀기
    • skewX() : x축을 기준으로 각도만큼 뒤틀기
    • skewY() : y축을 기준으로 각도만큼 뒤틀기
  • rotate() : 회전
    • rotate() : (각도) 각도만큼 오른쪽으로 회전 / 기본 축이 z 축
    • rotateX() : x축을 기준으로 회전
    • rotateY() : y축을 기준으로 회전
      • +backface-visibility : 뒤집힐 경우 뒷면은 보이지 않게 함 (hidden || visible)
    • rotate3d(x, y, z, a) : x축, y축, z 축, 앵글(각도) / 나머지 축들은 0~1 사이
  • perspective() : 원근법
    • perspective : trsnform에 들어가는 값과 동일한 기능이지만 그 범위를 설정할 때 사용하는 기능
    • perspective(10px); : 모니터에 최대한 가깝게 붙임 / 숫자가 적을수록 모니터와 가까움
  • 복합으로 사용하기
    • translate와 rotate는 사용하는 순서에 따라서 하는 행동이 다름 (시간 초 넣어서 보면 움직이는 게 보임)
  • transform-origin: x y; : transform 기준의 좌표를 지정 (0 0 / 100% 100% 등등 가능)
• overflow, visibility, border-radius

html

• video

  • video : mp4, ogg, ogv(음성을 뺀 영상), webm
    • poster="" : 썸네일 개념
    • controls : 컨트롤 바 생성
    • autoplay : 자동으로 재생 ► 웹 접근성 때문에 사용 X
      • 3초 이상 소리가 나는 경우에는 제어가 가능
    • preload : 로딩을 일정 부분 미리 해놓음
    • loop : 반복 재생
    • muted : 음소거
    • volum="0" : 볼륨 조절 - 잘 먹지 않음

• audio

  • audio : mp3, ogg

  • <audio controls>
      <source src="../multi/audio/freedom-inspired-cinematic-background-music-for-video-5606.ogg" type="audio/ogg">
      <source src="../multi/audio/freedom-inspired-cinematic-background-music-for-video-5606.mp3" type="audio/mp3">
      <p>현재 사용하고 있는 브라우저는 audio파일을 지원하지 않습니다. <br>
        <a href="http://google.com/chrome">최신 브라우저</a> 를 사용하세요.
      </p>
    </audio>

  • audio/video 요소의 기능은 소리가 담겨 있거나 재생이 되는 요소이기 때문에 display: none;보다는 우선 muted, 가장 좋은 방법은 코드(태그)를 삽입/삭제

• iframe

  • iframe : 외부의 문서를 불러와서 삽입하는 코드(facebook, twitter, instagram, youtube)
    • 코드 복사 후 width, height, frameborder는 삭제 후 css로 옮기기

---

html : 먼저 처리하는 것을 수행, 동일하지만 나중 요소를 배제

css : 하나의 속성에서 여러 개 작성하는 경우, 앞의 것을 수행하고 뒤에 것은 배제 (font-family)

css : 동일 속성이 여러 개가 존재하면 마지막 것을 수행 (masrgin: auto; margin-top : 10px;)