산책하는 댕발자

프로젝트를 하면서 HTML에서 HLS(M3U8) 형식의 영상을 재생하기 위해 다양한 방법을 시도했다.Safari에서는 기본적으로 HLS를 지원하지만 Chrome 및 다른 브라우저에서는 추가적인 설정이 필요했다. Chrome에서 m3u8 영상을 재생하려면 Video.js 또는 HLS.js와 같은 라이브러리를 활용하면 된다는 글을 보고 간단하게 해결할 수 있을 거라고 생각했지만 여러 문제를 마주하여 해결 과정을 정리해 보았다.   첫번째 시도 - video.js 라이브러리 사용유튜브 영상을 보면서 똑같이 실행해보았으나 Safari에서는 재생되었으나 Chrome에서는 "The media could not be loaded, either because the server or network failed or b..

PrettierPrettier는 코드 포맷터 중 하나로 코드의 모양과 스타일을 자동으로 조정하여 일관성 있게 코드 스타일을 유지해주는 도구다.JavaScript, TypeScript, CSS, HTML 등 웹 개발 언어에서 코드를 더 쉽게 읽고 이해할 수 있다.   Prettier를 적용한 예시를 살펴보자.HTML 코드에서 화살괄호가 줄바꿈되어 코드가 지저분해보인다.   Prettier 적용 방법1. .prettierrc 파일을 생성한다.  2. 아래 내용을 작성하고 저장한다.{"printWidth": 3000}  3. 확인한 줄로 깔끔하게 정렬되었다 : )

HTML에서 자주 사용하는 태그 참고 요소 내용 문서 제목 외부 리소스 연결 본문 외부 스크립트 포함할 때 사용하며 보통 JavaScript 코드와 함께 사용 제목 href 특성을 통해 다른 페이지를 url로 연결할 수 있는 하이퍼링크 (단독 사용x) 이미지 삽입 줄바꿈 block 요소｜문단 block 요소｜class나 id 속성으로 꾸밀 수 있는 컨테이너 inline 요소｜특별한 기능은 없으며 CSS 적용시 사용 버튼 삽입 표 정렬되지 않은 목록 숫자 목록 목록의 항목 데이터 입력 문장 입력 양식 그 중 헷갈리는 , , 는 하나의 문단을 나타냅니다. 순수 컨테이너입니다. 은 하나의 구문을 나타냅니다. 포함여부 div - p, span p - span span - x 참고 : https://develop..