위와 같은 코드에서 비디오를 재생하려면autoplay =”autoplay”를 넣어야 한다.→ 근데 안되는 경우도 있다. 소리가 있다면 재생이 되지 않는다. muted=”muted”→ 음소거 처리를 해야 영상 재생이 된다 loop=”loop”→ 재생을 계속하겠다. 위 속성들은 값이 생략이 가능하다.autoplaymutedloop이렇게 값 생략이 가능하게 속성만 사용 가능하다.

위와 같은 코드가 있다면 이미지 태그에서 alt 경우 이미지 로드가 안되었을 때, 사용할 수 있다. 이미지 로드가 되지 않았을 때, 혹은 시각 장애인을 위한 스크린 리더로 사용된다. 이미지가 로드가 되지 않았을 때, 사용자에게 중요한 정보를 전달하는 역할을 한다. 여기서 title은 마우스 호버를 했을 때, 이 이미지에 대한 설명을 보여줄 수 있는데,  이는 흔히 툴팁이라고 한다. 아래 사진을 보면 유튜브의 구독 버튼인데, 마우스를 올려 놨을 때 일정시간이 흐르게 된다면 아래와 같이 보여지게 된다. 둘다 어찌 보면 비슷한 기능을 하고 있다. 그래서 이거 둘다 사용해? 아니면 하나만 사용해? 라고 물었을 때는 당연하게 둘다 사용하자 이다.그 이유는 alt의 경우는 seo 측면에 이점을 가지고 있으며, ti..

1. 상대 단위란?상대(relative) 단위란 고정되지 않고, 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 여기서는 rem과 em를 다룰 것인데, 상대 단위에서 대표적인 것은 %, vw, vh 등이 있다. 반면 절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 대표적으로 px, pt를 들 수 있으며, 실생활에서는 cm, inch 등과 같은 것들이 있다. 2. em, rem 공통점여기서 em과 rem은 둘다 font-size 속석값에 비례해서 결정되는 상대 단위이다. 만약 font-size: 16px 일 경우 다음과 같이 브라우저에서 계산이 된다0.5em = 16px * 0.5 = 8px1em = 16px * 1 = 16px2em = 16p..

1. font-family : serif이는 보통 명조체를 뜻한다. 2. font-family: sans-serifsans가 붙으면 고딕체이다. font-family: 'arial', sans-serif; 이는 맨처음 arial를 적용하고 적용이 안될 시 쉼표(,) sans-serif를 적용한다 라는 뜻이다. 그리고 font-family: monospace가 있는데,이는 글자 간격이 동일한 것인데 보통 코드 관련 글씨는 이러한 적용을 받는다. 예를 들면) 1111, 2222, 3333, abcd 라는 글자가 있다면, 특성상 서로 다른 너비를 보여야 하는데, monospace를 하면 글자의 간격들이 동일해진다.  그리고 폰트를 적용할 시에 로컬 폰트가 있고 웹 폰트가 있는데, 로컬 같은 경우는 내 컴퓨터에..

object-fit: cover,cover: 이는 background-size: cover와 같은 기능을 하게 된다.빈 공간에 대해서 가로 혹은 세로로 늘려주지만, 공간에 맞게 늘린다. 하지만 필연적으로 가로를 늘리면, 세로가 잘릴 수도 있고, 세로를 늘리면 가로가 잘리 수도 있다.containcontain : 이것은 background-size: contain 와 같은 기능을 하게 되며, 이미지를 전체적으로 보여준다. 여백이 생기더라도 컨테이너 기준으로 해당 이미지를 무조건 연출하게 한다. 비율은 유지되며, 사이즈는 조정이 되어 보여지게 된다.위와 같은 내용으로, 어떤 이미지를 div공간 안에서 이미지의 전체 모습을 보여주게 하며, 여백이 생겨도 이미지를 전체적으로 보여주게 한다.

1. aspect-ratioaspect-ratio는 에전에 한 번 다룬 적이 있다. 여기서 좀 더 추가하자면aspect-ratio는 비율을 유지하는 블록 레벨 요소를 만드는 것이다. 예를 들면 16 대 9와 같은 비율을 만들어낸다. 이러한 비율을 유지하기 위해서 몇가지 속성을 더 추가해야 한다. min-height: 0auto를 주지 않는 이유는 auto의 경우 내부 콘텐츠 높이만큼 강제로 커지게 만드며, 유연하게 가능하지만 내부컨텐츠가 많아지면 요소 또한 커지게 되므로 auto을 주게되면 비율이 유지가 되지 않는다. 그래서 0을 주는 이유는, 내부 컨텐츠의 높이와 관계 없이 이미지가 aspect-ratio가 유지되게 한다.overflow: hidden이는 자식요소가 부모요소고와 분리되게 만드는 속성이다..