WEB

[html] <video> 태그 자동 재생

웹 브라우저에서 video를 자동재생하려면 autoplay 속성이 있어야 한다. 그래서 가볍게 autoplay와 controls 속성만 줬는데, HTML 삽입 미리보기할 수 없는 소스 보이는 것 같이 자동재생이 되지 않는다.. //왜 될까..?💦 이게 무슨 문제인고 하니, Chrome에서 사용자들이 원치않는 리소스를 받지않도록 2018년 4월부터 다음과 같이 자동재생 정책이 바뀌었다고 한다. 음소거 된 자동재생 허용 다음과 같은 경우, 소리와 함께 자동재생 허용 사용자가 도메인과 클릭, 탭 등의 상호작용 사용자가 이전에 소리와 함께 비디오를 재생한 적이 있음(미디어 참여지수가 높음) 사용자가 모바일의 홈 화면에 사이트를 추가했거나 데스크톱에 PWA를 설치함 자동 재생 권한을 iframe에 위임하여 소리와..

[CSS] 텍스트 길면 ... 표시하기

쇼핑몰 상품리스트를 만들 때, 상품명 길이를 처리하다가 정리하는 포스팅이다. 상품명이 길면 상품박스의 높이에 영향을 주지 않도록, overflow: hidden처리를 한다. 만약 상품명이 다음과 같이 일정한 길이라면 상관없겠지만, HTML 삽입 미리보기할 수 없는 소스 다음과 같이 들쑥날쑥하다면 보기에 안좋으니 처리를 해줘야하겠지..🍴 사실 상품명의 길이가 어떻게 될 지 모르니 뭐가 됐든 처리를 해주는 편이 낫겠다. HTML 삽입 미리보기할 수 없는 소스 .prdtBox .prdtName{ overflow: hidden; // 영역 벗어나면 숨기기 white-space: nowrap; // 줄바꿈 지정 text-overflow: ellipsis; // 영역 벗어나면 '...'로 표시 } HTML 삽입 미..

[CSS] border 안쪽으로 주기 box-shadow

모바일 웹 개발 중에, '내비게이션에 마우스 올리면 아래쪽에 두껍게 흰색 선 넣어주세요~~'라는 요청을 받았다. 불편하게 PC에서 모바일 웹을 볼 일이 있나 싶지만.. 어려운 일이 아니기 때문에 해놓기로 한다. 보통 아래쪽에 흰색 선이라고 하면 border-bottom을 생각하기 쉽지만, 다른 메뉴들과 라인을 맞춰주면서 해당 컴포넌트 안쪽으로 선을 넣어줘야 하기 때문에 box-shadow의 inset 속성을 사용한다. .menu-btn:hover { color: #c09e16; background-color: #dce255e0; border-color: #dce255e0; font-weight: bold; box-shadow: 0px -3px 0 0 #c09e16 inset; } 속성은 {두께(우,하,좌..

[PHP] VS Code로 PHP시작하기

📕 Visual Studio Code에서 PHP준비하기 (Extensions&Shortcut&기초문법) Visual Studio Code를 통해 php공부를 해보려 합니다. 가장 좋은 점은 Github와 연결이 된다는거죠😊 Github공부도 할 겸 Visual Studio Code로 PHP를 시작해보기로 하겠습니다. 📌 Extensions 먼저 PHP를 사용할 때 편리하게 코딩을 도와주는 extension들을 설치해줍니다. PHP IntelliSense PHP를 위한 고급 자동완성 및 리팩토링 지원 File > Preferences > Settings "php.validate.executablePath" : "C:/설치한 폴더/php.exe", "php.validate.run" : "onType", "p..

[PHP] Windows에 PHP7 설치하기

Apache 2.4 설치 apachelounge.com/download/ PHP7 설치 https://windows.php.net/download/ PHP8.0이 최신버전이지만 마루타가 될 수 있으므로 좀 더 밑으로 내려서 PHP7.4 Thread Safe ZIP파일을 다운받습니다.

[Javascript] 배열에서 교집합, 차집합, 배타적논리합 구하기

두 개 이상의 배열에서 차집합, 교집합, 배타적 논리합 등의 계산을 해야 할 때가 있다. let array1 = [3,6,9,12]; let array2 = [2,4,6,8,10,12]; 다음과 같은 array1, array2가 있다고 가정합니다. # 차집합 array1.filter(x => !array2.includes(x)); filter함수에서 array2에 포함되지 않은 값을 필터링하여 차집합을 구할 수 있다. # 교집합 array1.filter(x => array2.includes(x)); filter함수에서 array2에 포함된 값을 필터링하여 교집합을 구할 수 있다. # 배타적 논리합 array1.filter(x => !array2.includes(x)) .concat(array2.filte..