Outputor

1. video 태그와 audio 태그 audio 태그는 video 태그와 거의 동일하다. 2. 선택사항인 src속성 audio 태그도 src속성은 선택사항이고, src속성을 쓰지 않을거면 source 태그를 audio태그 안에 작성해서 source 태그에 src 속성을 줘서 사용하면 된다. 3. multiple 속성 multiple 속성도 video, audio태그에 둘 다 있는데 audio태그로 설명하자면 등록한 여러개의 파일 중 맨 처음 파일이 브라우저에서 지원되면 맨 처음 파일을 열지만 지원하지 않으면 두번째, 세번째 이렇게 넘어가면서 지원하는 파일을 확인하고 지원하는 파일일 경우 그 지원되는 파일을 재생한다. Your browser doesn't support HTML5 audio. Here i..

1. 닫는 태그 img태그와 다르게 video태그는 닫는 태그가 있고 안에 내용을 쓸 수 있다. 내용은 비디오를 지원하지않는 브라우저에서 보여주는 에러 문구를 작성하는 경우가 많다. 2. 선택사항인 src속성 video태그에서 src속성은 선택사항이여서 src속성을 쓰지 않아도 된다. 하지만 src속성을 사용하지 않으면 source 태그를 video태그 안에 쓰고 source태그 안에 src속성을 줘서 비디오를 보여줄 수 있다 3. 새로고침해도 잘되는 autoplay controls 속성으로 비디오 컨트롤을 보여줄 수 있고 autoplay로 자동재생도 시켜줄 수 있다. 하지만 autoplay로 자동재생 시킬때 새로고침하면 동영상이 자동재생 되지 않고 멈춰있는 걸 볼 수 있다. 이렇게 되는 이유는 소리가 ..

1. width와 height img에 width값만 줘도 원본 이미지 비율에 맞춰서 자동으로 height도 값을 준다 2. srcset img에 srcset 속성은 반응형할때 사용된다. 맨 처음에 큰 이미지를 받으면 뷰포트 사이즈가 줄어도 그 큰이미지로 계속 적용되지만, 맨 처음에 작은 이미지를 받으면 뷰포트 사이즈가 커지면 큰 이미지를 다운받아 사용하는 방식이다. 그리고 맨 처음에 작은 이미지를 다운 받아서 보여줄 경우 뷰포트 사이즈가 커지지 않으면 다운받은 작은 이미지를 제외한 다른 이미지는 다운받지 않는다. srcset을 이용하면 이미지의 width가 뷰포트 width에 꽉 차있어서 이걸 해결하는 방법은 아래에 나와있다. 3. sizes img에 sizes 속성으로 뷰포트에 꽉차는 srcset 이..

dl 설명 목록을 나타냄 은 로 표기한 용어와 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성함 https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl - HTML: Hypertext Markup Language | MDN HTML 요소는 설명 목록을 나타냅니다. 은 로 표기한 용어와 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록) developer.mozilla.org dt 설명 혹은 정의 리스트에서 용어를 나타냄 요소 안에 위치해야 함 보통 요소가 뒤따름 뒤따르는 요소가 로 지정한 용어의 정의와 기타 관련 글을 제공함 와 의 형제로 div요소를 사용하면 안됨 https://..

ul 정렬되지 않은 목록을 나타냄 https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul - HTML: Hypertext Markup Language | MDN HTML 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다. developer.mozilla.org ol 정렬된 목록을 나타냄 특성 reversed : 역순으로 배열됨 start : 항목을 셀 때 시작할 수를 선택할 수 있음 type : 항목을 셀 때 사용할 카운터 유형을 선택할 수 있음 https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol - HTML: Hypertext Markup Language | MDN HTML 요소는 정렬된..

시맨틱 마크업 시맨틱 HTML은 주어진 목적을 위해 요소를 사용하기 때문에 검색 엔진 최적화(SEO), 접근성, 유지보수에 좋음 마크업을 할때는 div로만 하는 것이 아니라 header, footer, main, nav, aside, article, section 태그를 이용해서 마크업을 함

small 작은 텍스트를 나타냄 https://developer.mozilla.org/ko/docs/Web/HTML/Element/small : 덧붙임 글 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. developer.mozilla.org sub 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정함 https://developer.mozilla.org/ko/docs/Web/HTML/Element/sub : 아래 첨자 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. develo..

b 스타일만 주기 위해서 사용하면 안됨 (css 이용) https://developer.mozilla.org/ko/docs/Web/HTML/Element/b - HTML: Hypertext Markup Language | MDN HTML 요소는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. developer.mozilla.org strong 중대하거나 긴급한 콘텐츠를 나타냄 스타일만 주기 위해서 사용하면 안됨 (css 이용) https://developer.mozilla.org/ko/docs/Web/HTML/Element/strong : 높은 중요도 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는..