웹밤바

아이폰에서 video 태그 play하면 기본적으로 전체화면으로 재생이 된다. (안드로이드는 현재 영역에서 재생) 안드로이드와 같이 현재화면 영역에서 재생을 원할시 video 태그 속성에 playsinline 을 넣어준다

text-underline 색상이나 위치가 기본 underline보다 아래에 위치해 있는 디자인이 나올때가 있다 기본 underline span { text-decoration: underline; } text-underline-position: under; 를 이용하면 기본 언더라인 위치보다 조금 아래에 위치할수 있다 span { text-decoration: underline; text-underline-position: under; } 결과 : 위 방법은 세세한 위치조정은 어렵다 더 정밀한 위치조정과 색상변경을 위해선 아래 2가지 방법이 있다 1. ::after position 으로 띄워서 위치변경 height로 두께변경 background로 색상 변경 span { position: relative..

홀수 리스트 디자인 스타일 맞추기 마지막 2개 라인은 없는 디자인 그렇지만 마지막 1개만 있어도 라인은 있어야 한다 조건 1. 컨텐츠 하단 라인 2. 마지막 열은 하단 라인 없음 3. 마지막 열 컨텐츠 1개일 경우 빈 칸 윗쪽 컨텐츠는 하단라인 삭제 일단 flex로 정렬 &__list { margin-bottom: -1px; overflow: hidden; display: flex; flex-wrap: wrap; } &__item { position: relative; // float: left; margin:0 12px 0 0; padding:20px 10px 20px 130px; width:516px; height: 143px; font-size: 0; border-bottom:1px solid #e..

안드로이드, 아이폰은 폰트의 여백사즈가 달라서 박스안 텍스트같은 스타일을 중앙정렬하기 어렵다 line-height로 맞출시 높이보다 line-height 1px 크게주면 둘다 잘 맞음 height:rem(60); line-height:rem(62);

Data-URI란? RFC 2397에 정의 이미지 등의 외부 바이너리 파일을 웹페이지에 인라인으로 넣기 위해 사용. 바이너리 파일? => 컴퓨터 파일로 컴퓨터 저장과 처리 목적을 위해 이진 형식으로 인코딩된 데이터파일 ( 이미지를 메모장으로 열었을때) 형식은 data:[][;charset=][;base64], 이미지 URI 외부 데이터를 별도의 파일로 두지 않고 하나의 HTML파일로 관리할수 있음 리퀘스트 수를 줄여 빠른 전송효과 볼 수 있음 [단점] HTML파일에 포함이다 보니 캐시가 되지 않음. 데이터가 base-64로 인코딩 되면서 크기가 1/3정도 증가. IE7이하버전은 지원하지 않음. => 사용할수 있는 환경이 아주 많지는 않지만 경우에 따라서 아주 유용할수 있음 ( 작은 아이콘이 아주 많을 경..

모바일 좌, 우 정렬은 정말 잘 안맞는다 안드로이드와 ios pc웹 다 제각각.. 좌 우 요소끼리 정렬을 원하고는 하는데 margin이나 padding으로 맞추면 이상하게 잘 적용이 되지 않는다 적립/사용안내 박스가 44px이라면 왼쪽 텍스트 line-height를 44px로 주어 정렬을 하니 더 수월하게 된다

photoswipe로 이미지 뷰어를 사용하고 있는데 tablet 테스트중 ipad mini2 구형기계에서 회전시 반응이 느려 resize 오류가 발생되었다 1. 화면 회전후 $(window).trigger('resize') 를 해봤는데 반응없음. 2. @medea query로 디바이스 width, height 넣고 회전시 높이, 넓이 재 지정 반응은 있지만 위치가 자기 마음대로 아무데나 가있음.. 3. 2번후 javascipt로 회전체크해서 0.1초후 resize해줌 var styleNode = document.createElement('style'); styleNode.type = "text/css"; var $win = $(window); var winWidth = $win.width(); var w..

swiper js버전 See the Pen swiper 선택요소 중앙정렬 by soohyeon (@sooh) on CodePen. 스크롤 버전 선택된 요소가 박스의 중앙정렬 될수있도록scrollLeft값 조작 listWidth : 요소 전체 길이boxHarf : 스크롤될 부모요소 가로값의 절반 (중앙정렬 기준)targetLeft : 선택된 요소의 position left 값selectTargetPos : targetLeft + 선택된요소 중간값 var selectTargetPos = (targetLeft + target.outerWidth()/2);if (selectTargetPos

다단으로 나열되어 있는 리스트 열의 빈 칸이 아래 이미지처럼 디자인되어 있는 경우 ​ 운영중인 사이트에 작업되어 있는 방식은 마지막 줄에 list item이 4개가 되지 않을때 나머지는 이런식으로 작업이 되어있었다 위 사진일은 li 빈태그가 3개 개발코드를보니 정말.. 힘들어 보였다 ​ 비효율적인 코드를 css로 해결가능해 보여 수정. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ul:after { content: ''; display: block; clear: both; width: calc(25% + 1px); height: 38px; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; box-sizing: border-b..

// textarea 높이 측정 prop('scrollHeight'); ​ textarea 최소크기에서 타이핑 줄바꿈을 최소크기 이상 할경우 줄 수에따라 textarea height 늘어나게 할때. ​ ​ function textareaSize(obj){ if (obj) { obj.style.height = "0px"; obj.style.height = (0 + obj.scrollHeight) + "px"; } }