HTML37 embed 태그와 video 태그의 차이점 웹페이지에 동영상을 넣을 사용하는 태그는 입니다. 그런데 라는 비슷한 기능을 하는 태그가 있습니다. 두 태그의 차이점을 살펴보겠습니다. 사용법 및 호환성 embed : HTML5 전에 오디오, 비디오, 이미지를 삽입하는 태그입니다 video : 비디오 콘텐츠에 특화된 HTML5 시맨틱 태그입니다 구조 및 속성 embed : src 속성을 태그 내에서 사용합니다. video : src 속성을 직접 사용할 수도 있고, 태그 하위에 라는 태그를 이용할 수 있습니다. 브라우저 호환성 embed : 대부분의 웹브라우저에서 지원되지만 HTML5에서 권장되지 않기 때문에 앞으로 새로 나올 브라우저에서 호환될지는 미지수입니다 video : HTML5 표준을 준수하는 최신 브라우저에서 모두 지원됩니다. 정리하면 다음과 .. 2023. 7. 14. HTML audio , 오디오 컨텐츠를 웹페이지 넣을 수 있는 태그 AUDIO 태그란? HTML에서 audio 태그를 사용하면 오디오 콘텐츠를 웹페이지에 삽입할 수 있습니다. 오디오 콘텐츠란 음악, 음향 등을 말하는데요. MP3, WAV, OGG 등 확장자가 대표적입니다. 또한 태그는 시맨틱 구조를 만드는 요소이기도 합니다. 사용법 Your browser does not support the audio tag. 먼저 audio 태그를 엽니다. src 속성에 오디오 파일의 소스 URL을 지정합니다 controls : 이 속성을 넣으면 오디오 플레이어 컨트롤이 표시되어 사용자가 재생, 일시정지, 볼륨 조정 등을 처리할 수 있어요 autoplay : 웹페이지를 열때 자동으로 오디오를 재생합니다 muted : 이 속성을 쓰면 음소거를 할 수 있어요 preload : 웹페이지를 .. 2023. 7. 13. HTML Semantic (시맨틱) 이해하기 쉽고 검색이 잘되게 만드는 구조 시맨틱 구조란 무엇인가? 시맨틱 구조는 의미를 전달하고 웹페이지의 구조를 정확하게 보여주는 방법입니다. 아래 그림은 Codecademy를 공부하면서 나온 사례인데요. 좌측이 Non-Semantic, 우측이 Semantic 구조입니다. 왼쪽, 오른쪽을 비교하니까 우측은 박스만 보더라도 웹페이지 구성이 어떻게 되는지 대략적으로 알 수 있네요! 시멘틱에 필요한 태그 위의 그림을 코드로 구성해본 다른 예시입니다. 모든 시맨틱 태그를 사용하지는 않았네요. : 웹 페이지 상단에 있는 소개 콘텐츠를 묶습니다 : 탐색 링크, 메뉴가 포함된 섹션입니다 : body 영역 중 메인 콘텐츠 영역입니다 : body 영역 중 하단 정보영역(푸터)를 묶습니다 : main 영역을 다시 나누어 그룹화합니다 : section과 연관된 .. 2023. 7. 12. HTML textarea, 여러 줄의 텍스트를 입력하는 폼 생성 태그 TEXTAREA 태그란? HTML 태그는 여러 줄의 텍스트를 입력받을 수 있는 폼을 생성하는데 사용합니다. 이메일 폼을 만든다고 가정할 때 내용을 넣는 폼을 생각하면 이해가 빠릅니다. 사용법 New Blog Post: 과 태그를 엽니다 태그를 만듭니다 id, name : id는 해당 폼을 고유하게 식별하는데 사용하고, name은 해당 요소의 이름을 정의해서 서버로 데이터를 전송할 때 식별자로 이용합니다. id는 유일해야 하지만, name은 동일한 이름을 사용해서 묶을 수 있습니다. rows : 텍스트 입력할 수 있는 줄 수 입니다. cols : 텍스트를 입력할 수 있는 너비입니다. placeholder : 텍스트 입력란에 기본적으로 표시되는 임시 텍스트입니다 예시화면 See the Pen textarea.. 2023. 7. 11. 이전 1 2 3 4 ··· 10 다음
