웹밤바

반응형웹에 적용될 카운트다운 만들기 W3C에 소개되어있는 카운트 다운 소스를 이용해 진행중인 프로젝트에 적용하였다 일단 var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); 이 부분을 개발에서 지정된 날짜로 넣어주면 그 날짜를 읽어 카운트 해 주는 방식으로 바꾸고 var dday = $(".mainBnr__timer").attr('data-dday'); var yy = dday.substr(0,4); var mm = dday.substr(4,2); var dd = dday.substr(6,2); var hhmmss = dday.substr(8,2)+':'+dday.substr(10,2)+':'+dday.substr(12,2); 저 mm 부분이 ..

반응형으로 작업하기위해 vw로 이용했었는데 pc에서 브라우저 사이즈와 video 사이즈가 일치하지 않아 오류 => em으로 작업 html에 font-size를 px로 주고 미디어쿼리로 일정사이즈 이하에서 vw로 변환 비디오사이즈보다 작게 브라우저창을 줄이지 않을거라는 가정하에 나는 pc video width 740으로 주었다 @media only screen and (max-width:740px) { html { font-size: 3.3956vw; } } 단 pc에서 740보다 작게 브라우저를 줄이면 UI는 vw로 변환되어 비디오사이즈는 고정, UI는 유동적으로 변환된다. .play-progress:before { font-size: 1.042em; position: absolute; right: -0..

아이폰에서 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로 주어 정렬을 하니 더 수월하게 된다

크롬 개발자도구 이거아주 요물 search 툴로 jsp, js, css 현재 페이지의 전체영역에서 검색이 가능하다 더보기에서 more tools > search를 꺼낸다 하단 console 옆에 srarch탭이 생긴다 하단 input영역에 검색하면 촤르르 나온다

모바일 작업시 보통 2배수로 작업이된다. 작업물 캡쳐후 확인해 보려면 스크린샷을 찍고 포토샵에서 열은 다음 디자인 산출물과 비교해보곤 하는데 개발자 도구에서 원 사이즈로 캡쳐하는 방법을 알았다. 이 외 full screen도 캡쳐가 되서 매우 편리하다