MarkUp 썸네일형 리스트형 모바일 100vh 이슈 1. ios만 대응 https://injeblog.tistory.com INJE BLOG injeblog.tistory.com 2. ios, android 대응 css height: 100vh; height: calc(var(--vh, 1vh) * 100); js function appHeight() { const doc = document.documentElement doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px'); } window.addEventListener('resize', appHeight); appHeight(); svg 가로, 세로 css로 적용 안되는 이슈 해결방법 1. svg 태그의 width, height 속성을 제거한다. 2. svg 태그에 아래의 속성 추가 ios에서 오른쪽 정렬 후 space ios에서 오른쪽 정렬 후 space를 누르면 왼쪽에 공백이 생긴다 해결 방법 contentEditable Element에 아래 속성을 주면 된다. -webkit-nbsp-mode: initial; sprite_mixin이 제대로 동작 안하는 이슈 @import 'import/sprite_maps'; @import 'import/sprite_mixin'; sprite_maps와 sprite_mixin 순서가 바뀌면 sprite 이미지가 잘 안 나온다. 가상요소로 마우스 휠 이벤트 제어 이슈1 : iframe을 풀 스크린으로 삽입해서 마우스휠 이벤트가 먹지 않는 이슈가 있었다. 이럴경우는 빈 가상요소로 비디오 iframe을 덮어주면 마우스휠 이벤트가 정상적으로 작동한다. 이슈2 : disablekb를 통해서 유튜브 비디오로 삽입된 동영상을 키보드로 컨트롤 하는것은 막을 수 있었지만, 마우스 클릭에 대해서는 막을 수 없었다. 위와 같이 빈 가상요소로 살포시 덮어주면 마우스를 클릭으로 유튜브 동영상이 컨트롤 되는 것을 막을 수 있다. <Video> 태그 사용 예 Your browser does not support the video tag. 정의와 사용 태그는 무비 클립이나 다른 비디오 스트림과 같은 비디오를 지정 합니다. 현재 요소에는 MP4, WebM 및 Ogg와 같이 3가지 지원되는 비디오 형식이 있습니다. 태그는 HTML5의 새로운 태그입니다. Optional Attributes Attributes Value Description autoplay autoplay 동영상이 준비되는 즉시 재생을 시작하도록 지정 controls controls 비디오 컨트롤이 표시되도록 지정 (예: 재생/ 일시 중시 단추 등) height pixels 비디오 플레이어의 높이를 설정 loop loop 비디오가 끝날 때 마다 다시 시작하도록 지정 muted muted 비.. text-overflow text-overflow 정의텍스트가 영역을 넘쳤을 경우 생략기호로 보여주는 속성이다.자르거나, ...으로 표시하거나 사용자가 지정한 텍스트로 대치 할 수 있다 속성 종류 clip기본 값. 이 키워드 값은 텍스트 영역의 한계에서 텍스트를 자르기 때문에 문자 중간에 잘림 현상이 발생할 수 있다. ellipsis이 키워드 값은 '...'을 표시한다. '...'은 잘린 텍스트를 나타낸다. 내용 영역 내부에 '...'이 표시되어 표시되는 텍스트의 양이 감소한다. '...'을 표시할 공간이 충분하지 않으면 잘린다. 은 넘치는 인라인 콘텐츠를 잘라 지정한 텍스트로 대치한다. 문자열은 내용 영역 내부에 표시되며, 표시되는 텍스트의 크기를 줄인다. 문자열 자체를 표시할 공간이 부족하면 잘린다. fade이 키워드는 넘치.. 곤란한 상황에서 말 줄임 해야할 경우 CASE 1 * 조건조건 1 영역 1 이미지 사이즈는 유동적이다조건 2 영역 2 는 영역 1에 영향을 받아 가변 width에서 말줄임 한다.조건 1 영역 3 은 고정적인 위치에 위치한다. *구조.name_card - 전체를 감싸는 영역ㄴ .thumbnail - 영역 1ㄴ .image - 이미지ㄴ . information_area - 영역 2ㄴ .title - 제목ㄴ .description - 지점ㄴ .more_area - 영역 3 *정리 1. 전체를 감싸는 태그(.name_card)에 아래와 같은 속성을 준다. 2. 영역 1은 float3. 영역 2는 none float (포인트)4. 영역 3은 absolute CASE 2 * 조건조건 1 영역 1 이미지 사이즈는 고정이다조건 2 영역 2 는 말줄임 되지.. 이전 1 다음
