🦁_21.11.25 TIL

21년 11월 25일

📝 Sass

📎 미디어쿼리

📎 조건문

📎 반복문

📎 함수

참고링크

• Sass Guidelines

📝 CSS

float은 flex-container 안에서 적용되지 않는다.

• flex-container에는 float 적용 가능
• flex-item의 자식 요소에 float 적용 가능

인라인 레벨 요소에 position 속성을 적용

• 블록 레벨 요소가 된다.
• 하지만 width: 100%의 속성은 잃는다. (인라인-블록처럼)

border의 속성

• border의 속성만으로 딱지 모양, 삼각형 모양을 이미지가 아닌 css 로 만들 수 있다.
  border - MDN

📎 코드 리뷰 & 함께 코드 작성 - select box custom

📎 반응형 컨텐츠 만들기 - 이미지

이미지 포맷

• gif : 256색의 컬러만 표현 가능, 선명하지 않지만 용량이 적다. 투명 표현 가능하지만 그 정도를 조절하는 건 불가능(그림자 표현 불가능), 애니메이션 처리 가능
• jpg/jpeg : 화소가 매우 높고, 용량 적지만 투명처리 불가능
• png : 대부분의 컬러 모두 표현 가능, 투명 영역 처리 가능하지만 용량이 큼
• svg : svg 형식의 벡터 이미지는 손실이나 품질 저하없이 모든 크기에서 렌더링 가능

반응형 이미지 만들기

• width: 100%
• max-width: 100%

📎 반응형 컨텐츠 만들기 - 백그라운드 이미지

backgroud-size 속성

• background-size: px : 이미지의 크기 고정
• background-size: auto : 이미지의 종횡비를 통해 자동으로 다른 축의 크기를 결정
• background-size: % : %를 사용하면 컨테이너의 넓이에 비례하도록 사이즈를 조절 가능
• background-size: contain : 컨테이너 전체를 덮지만 이미지를 자르지 않게 유지
  => 기획 단계에서 이미지가 잘려도 될 경우 사용 가능
• background-size: cover 컨테이너 전체를 완전히 덮음
  => 이미지가 잘리면 안되거나, 배경색과 배경 이미지가 잘 어우러지는 경우 또는 알파값이 있는 이미지에 사용 가능

반응형 백그라운드 이미지 만들기

background: url("...") center /cover no-repeat;

📎 반응형 컨텐츠 만들기 - 동영상

• 브라우저가 지원하는 비디오 포맷 - MDN
• <vided> 속성
  • autoplay : 자동 재생 지정
    => 크롬, 파이어폭스에서는 muted 속성이 없으면 autoplay가 적용되지 않는다.
  • controls : 사용자가 비디오 재생을 제어할 수 있는 컨트롤러 제공 지정
  • loop : 비디오의 반복 재생 지정
  • muted : 소리 음소거 지정
  • preload : 페이지를 로드할 때, 영상을 미리 로드할지 말지 결정
  • poster : 비디오를 내려받을 동안 또는 영상을 재생할 때까지 표시할 이미지 지정

<video autoplay controls loop src="next_level.mp4"></video>

<!-- <iframe>을 이용한 youtube 영상 삽입 -->
<iframe class="video-next-level"
        src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
        title="YouTube video player" 
        frameborder="0" 
        allowfullscreen>
</iframe>

반응형 동영상 만들기

<article class="cont-video">
  <iframe class="video-next-level"
          src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
          title="YouTube video player" 
          frameborder="0" 
          allowfullscreen>
  </iframe>
</article>

.cont-video {
  position: relative;
  padding-top: 56.25%;
  /* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례합니다. */
  /* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같습니다. */
} 

.video-next-level {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

---

마무리

• 와아아아아 TIL 밀리고 있다아아아
  => 주말의 나 화이테에에에엥!!!!!!