WEB/HTML_CSS

[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; } 속성은 {두께(우,하,좌..

[CSS] 특정한 요소를 제외시키는 :not 선택자

:not 선택자 이미 지정된 css스타일에서 특정한 요소를 제외시킬 경우 사용한다. 선택할 요소:not(제외시킬 요소){...} 예제 This is a normal paragraph. This paragraph has a "highlight" class and will not be affected. This is another normal paragraph. This is a third normal paragraph. 결과 HTML 삽입 미리보기할 수 없는 소스

[HTML] 모바일웹에서 자동링크 해제하기 format-detection

PC 개발자도구로 확인했을 땐 문제 없었는데 모바일에서 확인해보니 사업자번호에 '자동 전화 걸기'가 걸려있다. 대표번호에 걸려있는건 땡큐인데.. 대표번호의 '자동 전화 걸기' 는 살리면서 사업자번호에서는 해제하는 방법을 알아보겠다. 1. meta 태그로 '자동 전화 걸기' 기능을 해제 2. 전화번호에 '자동 전화 걸기' 기능 설정 대표번호 : 1234-1234 3. format-detection 속성 모바일 브라우저에서 특정 형식의 데이터를 자동으로 감지하고 처리하는 기능을 제어한다. content는 다음과 같은 값을 가질 수 있다. "telephone=no" : 전화번호 형식의 데이터 자동 감지 해제 "telephone=yes" : 전화번호 형식의 데이터 자동 감지 및 전화 걸기 링크 "telephon..