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 태그를 이용해서 마크업을 함

a mailto: ➡ 이메일 주소로 연결함 tel: ➡ 전화번호로 연결함 https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. developer.mozilla.org Entity 앰퍼샌드( &)로 시작하고 세미콜론(;)으로 끝나는 텍스트("문자열")임 https://developer.mozilla.org/en-US/docs/Glossary/Entity#reserved_characters Entity - MDN Web..

메타데이터 콘텐츠 (Metadata Content) 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소임 플로우 콘텐츠 (Flow Content) 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소, 보통 텍스트나 임베디드 콘텐츠를 포함함 섹션 콘텐츠 (Section Content) 웹 문서의 구획(Section)을 나눌 때 사용함 헤딩 콘텐츠 (Heading Content) 섹션의 제목(heading)과 관련된 요소임 프레이징 콘텐츠 (Phrasing Content) 문단에서 텍스트를 마크업 할 때 사용함 임베디드 콘텐츠 (Embedded Content) 이미지나 비디오 등 외부 소스를 가져오거나 삽일할 때 사용되는 요소임 인터랙티브 콘텐츠 (Interactive Content)..