Problem with audio tag not playing when file format is ACM 이미지가 그렇듯이 audio도 파일 포맷이 존재한다.uncompressed (압축되지않은),이미지로 치자면 BMP(비트맵)에 해당하는 게 있으니 PCM(Pulse Code Modulation) 이라고 한다. 그리고 compressed (압축된)가 있는데, 이는 codec을 사용하여 압축 된 포맷을 말한다.  *codec : 파일의 부피를 줄여서 효율적으로 보관하고 전송시 부담을 줄이기 위해 압축하고 또 그 파일의 압축을 풀 때는 꼭 알집같은 프로그램이 필요하듯이 동영상, 음악을 압축하고 그것을 해제하는데 필요한 것이 코덱 wav 는 비 압축 오디오를 저장하기 위한 가장 일반적인 선택이다.mp3 는 인..

webkitdirectory 속성이란?HTML의 요소에 webkitdirectory 속성을 추가하면, 사용자가 파일 대신 **디렉토리(폴더)**를 선택할 수 있도록 설정할 수 있습니다. 즉, 하나의 폴더를 선택하면 그 폴더 안에 있는 모든 파일들이 함께 선택되는 효과를 얻을 수 있습니다.주요 특징:파일 대신 폴더 선택: 사용자는 파일 선택 대화창에서 폴더를 선택할 수 있습니다.하위 폴더 포함: 선택된 폴더의 하위 폴더에 있는 파일들도 함께 선택됩니다.File 객체: 선택된 각 파일은 File 객체로 나타나며, webkitRelativePath 속성을 통해 선택된 폴더 내에서의 상대 경로를 알 수 있습니다.브라우저 호환성: 주로 웹킷 기반 브라우저(Chrome, Safari)에서 지원되며, Firefox..

HTML에서 태그를 사용할 때 내용과 태그 사이에 공백이 생기는 이유는 HTML 해석 방식 때문입니다. HTML은 기본적으로 코드에 있는 모든 공백(스페이스, 탭, 줄바꿈 등)을 유효한 텍스트 콘텐츠로 간주합니다. 따라서, 아래와 같이 작성하면 text 태그 바로 뒤의 줄바꿈과 시작 위치의 탭이나 스페이스도 텍스트로 인식되어, 실제로 보여지는 텍스트 내용 앞에 공백이 생깁니다. 이를 해결하려면, 태그와 내용 사이에 공백이 없도록 작성해야 합니다. 아래와 같이 작성하면 공백이 생기지 않습니다 text

펌글 출처 : https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute (HTML) 데이터 속성 사용하기 (data attribute) 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 데이터 속성은 'data-'시작한다. velog.io Data- 속성 HTML5부터 HTML 요소의 'data-'로 시작하는 데이터 속성이라는 것이 생겼다. 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 브라우저는 'data-'로 시작하는 데이터 속성에는 어떠한 행동도 관여하지 않기 때..

태그의 accept 속성 태그의 accept 속성은 서버로 업로드할 수 있는 파일의 타입을 명시합니다. accept 속성에 하나 이상의 속성값을 명시할 경우에는 콤마(,)를 사용하여 구분합니다. 이러한 accept 속성을 유효성 검사를 도구로 사용해서는 안 되며, 업로드된 파일은 서버에서 검증되어야 합니다. 이 속성은 요소의 type 속성값이 “file”인 경우에만 사용할 수 있습니다. [예시] 아래에서 파일선택 버튼을 눌러 파일을 고르게 될 때, 이미지 파일만 보이는 것을 확인 할 수있습니다. Choose a profile picture: 속성값 파일 확장자 닷(.)으로 시작되는 파일 확장자 ex) .png, .jpg, .pdf, .hwp audio/* 모든 타입의 오디오 파일이 허용됨. video/*..

CSS 애니메이션은 기본값이 반복이다. CSS 애니메이션을 1회만 실행하도록 만드는 방법은 다음과 같습니다. animation-iteration-count 속성을 1로 설정합니다. animation-iteration-count 속성을 1로 설정합니다. animation-fill-mode 속성을 forwards로 설정합니다. 이렇게하면 애니메이션이 종료될 때 마지막 상태를 유지합니다. animation-fill-mode: forwards; 사용 예 .box { width: 100px; height: 100px; background-color: red; animation: myAnimation 1s forwards; //mode사용예 //animation: myAnimation 1s 1; //count사용예..

contentEditable HTML 요소의 contenteditable 속성은 요소의 편집 가능 여부를 나타냅니다. contenteditable 속성은 HTML 요소를 수정 가능한 편집 가능한 요소로 만드는 데 사용됩니다. 열거형 속성으로, 다음 중 하나의 값을 가질 수 있습니다. 'true' : 요소가 contenteditable임을 의미합니다. 'false' : 요소를 편집할 수 없음을 의미합니다. 'inherit' : 요소가 부모의 편집 가능 여부를 상속함을 의미합니다. (기본값) contenteditable 속성을 사용하면 사용자가 직접 HTML 요소 내부의 텍스트, 이미지 및 기타 콘텐츠를 편집할 수 있습니다. 이것은 특히 CMS (컨텐츠 관리 시스템) 및 블로그 등의 웹 애플리케이션에서 유용..

CSS 작업 후 확인 시 변경사항에 문제점이 없는데 계속 적용이 안될때 해결방법 정리 이런 문제는 브라우저가 이전에 사용한 CSS를 캐시에 보관해 사용하다 변화된 순간을 파악하지 못해 발생깁니다. 크롬브라우저 > 도구더보기 > 인터넷 사용기록 삭제 쿠키 및 기타 사이트 데이터에 체크를 확인하고 삭제해주면 됩니다. 간단한 방법 : F12를 눌러 개발자도구 켜놓기 > 좌측 상단에 새로고침 아이콘 우클릭 > 캐시비우기 및 강력새로고침