개발자 도담씨

인스타그램 api를 연동하면서 생각못했는데 비디오가 있더구만... 그래서 새로 비디오 태그 작업을 하게 되었다 👀 영상을 넣는데 어려울건 없었지만 알아야할 사항들이 몇가지 있었다. W3CSchool 비디오 태그 - https://www.w3schools.com/tags/tag_video.asp 해당 문서를 보면 알다시피 비디오 태그는 아래처럼 작성해주면된다. 이미지 태그와 별반 다를게 없다. Your browser does not support the video tag. 하지만 내가 메모하려는 정보는 옵션부분이다. 문서에도 있듯 비디오태그에는 여러 옵션이 있다. 우선 나는 autoplay를 해주고싶었다. 그리고 문서에 설명되어있는 것 처럼 autoplay를 작성해주었지만 실행되지 않았다. 검색해본 결과 ..

카페24 모바일 쇼핑몰 제작 인스타그램 그래프 API 연동 ( 완료 : 검수 난이도 실화..ㅠ ) 메일발송 관련 관리자 페이지 - 프론트엔트 웹사이트 관리자 페이지 리뉴얼 - 프론트엔드 웹사이트 병원소개 페이지의 관리자 페이지 제작 - 풀스택 웹사이트 관리자 페이지 유지보수 예약통계, 상담통계 내기 ( 그래프 관련 자바스크립트 사용 ) - 풀스택 베트남 웹 사이트 및 관리자페이지 제작 - 프론트엔드 ( 기존의 사이트 복사후 변형 ), 다국어 지원 슬라이드 팝업 ( 관리자/사용자 ) 추가 선택된 이벤트 리스트를 불러와 캔버스 저장 ( 페이지 추가, 그룹 추가 예외처리 스크립트의 난이도가 어려웠음 ) 캔버스 url생성후 백단에서 zip파일 생성및 다운 병원고객관리 페이지 유지보수 및 추가 개발

요즘 시간이 남아 드디어 블로그나 꾸며볼까 하면서 조금씩 수정 중이다. 디자이너가 아니라 디자인 감각은 떨어질 수 있겠지만 나름 만족 중이다!😊 (아직 미완성) 음... 프런트엔드 쪽을 하다 보니 나의 경우는 쉽게 만질 수 있지만 분명 이런 쪽을 하지 않으시는 분들이라면 어려우실 거라 생각한다 :_(... 조금이나마 도움이 되었으면 하면서 그냥 간단한 방법 정도 설명하려 한다. ps. 해당 글을 바꾸고자 하는 친구를 쉽게 찾는 방법 위주로 포스팅할 예정이다 :D 우선 가장 마음에 드는 스킨을 적용시켜놓은 후 찾는 게 편하다. 초보자 분들은 마음대로 디자인하기 쉽지 않을 테니 아래 링크에서 스킨 하나를 적용시켜준다. 디자인이 다들 반응형에 적합하게 잘 만든 것 같다 https://www.tistory.co..

seo작업이 중요한 웹 페이지들을 제작하면서 여러 참고 사이트를 봤는데 한가지 의문점이 드는게 생겼다. seo작업 시 이미지로 하지 않아도 되는 것들은 그러니까 텍스트들은 이미지로 사용하는 것이 아니라 텍스트로 작업을 하라라고 seo가이드라인에 떡하니 적혀있었는데... 많은 홈페이지들이 그냥 이미지만을 사용하고 있었다. 클라이언트에게도 가서 seo작업을 하려면 이미지로 다 사용해선 안된다...라고 말했었는데 다들 seo작업을 하지 않는건가??하고 찾아봤다. 역시나 히든 작업을 하고 있었다. 1. display:none 및 visibility:hidden 히든작업이라고 하면 가장 처음 생각될 속성들. 그리고 실제로 이용되고 있던데 seo작업에서 히든작업에 사용하면 안되는 속성들이다. 부정적인 영향을 끼친다..

홈페이지 클릭시 광고를 하기 위해 뜨는 팝업창을 하나 만들어 봤다.나는 공지글에 옵션을 주어 팝업창을 띄우도록 해서 공지사항으로 표시 되고 있는것이니팝업의 내용은 무시하고..ㅎㅎ 코드 분석을 해보쟈!😘 당연히도 팝업창의 내용을 (뼈대를) 만들었다고 가정하에 핵심 코드만 살펴보겠다 :) 처음 메인 화면에서 팝업창을 띄우는 코드이다. ( 자바스크립트 ) // popup //var noticeCookie = getCookie("name"); // 쿠기 가져오기if (noticeCookie != "value"){ // 팝업창 띄우기 window.open('/web/main/popup.php', 'width=500, height=650, status=no, scrollbars= 0, toolbar=0, menub..

제목을 정하기 너무 힘든 포스팅이었습니다..오늘 하려는 포스팅은 단계 디자인을 퍼블리싱 해보려고합니다. 그림으로 설명하자면 출처 : 쏘카 사이트 이러한 단계를 나타내는 디자인입니다. 배워보니 이것도 하는 방법이 있더라구요 ! 우선 뼈대 (html)을 먼저 만든 후에 스타일 작업으로 넘어가겠습니다.12345678910111213141516171819202122232425262728293031 쏘카 이용방법 가입하기 앱 또는 홈페이지에서 운전면허증과 결제 카드만 등록하시면 쉽고 빠르게 가입하실 수 있어요. 예약하기 출발·반납 위치를 선택하고, 원하는 시간 만큼, 지금 필요한 차종으로 예약하세요. 차량찾기 앱의 스마트키에서 대여존 주소를 확인할 수 있으며 경적, 비상 등을 이용해 차량 위치를 확인하세요. 차량..

1편 - [Web Programming/Frontand Challenge] - 웹 페이지의 랜더링 과정 1편참고 블로그 : http://12bme.tistory.com/140 1편에서 웹 페이지의 랜더링 순서를 1단계부터 5단계 까지 알아보았다. 이번 2편에서는 리플로와 리페인트에 대해 알아보겠다...레더링이 모두 완료된 상태에서 ( 페인트까지 끝낸 상태 ) 스타일이 바뀌거나새로 나타나는 노드가 있다면...? 또는 데이터 변경으로인해 ( ex. AJAX ) 다시 표시해 주어야하는 일이 생긴다면?아마 다시 스타일을 적용하고 ( 랜더 트리 작업 ) 페인트 해주어야 할 것이다.이럴 경우에 발생하는 것이 리플로와 리페인트이다. 리플로 ( Reflow )란?변경이 생긴 랜더 트리에 대해 유효성 확인을 하고 노드의..

/* Di it! 프런트엔드 웹 디자인 입문 책을 참고로 작성한 글입니다.*/ 매번 이용하는 아이콘 사이트에는 PNG뿐만 아니라 SVG도 있었는데드디어 무슨 친구인지 알아냈다. 😠별로 어려운 것도 아닌데 왜 알아볼 생각을 안했지... 우선 SVG는 Scalabe Vector Graphic의 약자로 역시 직관적으로 느낌이 온다.확장을 해도 깨지지 않는 친구구나! SVG는 아래와 같은 장점을 가지고 있다.* 스타일 수정이 쉽다.* XML 기반의 문서다.* 애니메이션이나 CSS3효과를 적용할 수 있다. 필자는 XML을 안드로이드 스튜디오를 사용하면서 많이 접해봤는데 여기서도 활용이 되는구나 알았다. 그렇다면 SVG는 어디에서 사용 이 될까?요즘 웹 트랜드인 반응형 웹을 만들다보면 로고나 아이콘 이미지를 축소했..

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기[Web Programming] - [ jQuery ] 슬라이드 배너 만들기 2편 이전에는 플러그인을 써서 만들어봤다면드디어 슬라이드(캐러셀)를 만들어봤다. 내가 생각한 알고리즘은 아래와 같다. 처음 슬라이드에서는 0번째 친구만 보여지고 나머지 친구들은 1번다음에 쌓여서 대기하고있다.그다음 슬라이드가 왼쪽으로 이동하는데 현재 인덱스와 ( 0 ) 그다음 나타날 인덱스 ( 1 )이 왼쪽으로 이동한다.그리고 나서 지나간 0번의 친구가 다시 대기 중인 영역에 와서 기다리고있는 것! Colored by Color Scriptercshtml은 위와 같이 간단하다, bxSlider을 참고로 div안에 목록태그를 사용해서 틀을..

아직 직접적으로 복잡한 애니메이션을 구현할 실력은 안되지만 !인터넷엔 많은 정보가 있다 ㅎ3ㅎ원하는 효과를 찾아 그냥 ctrl + c / v만 하는건 재미도 없고 실력도 늘지 않을 테니분석해서 포스팅 하는 카테고리를 만들어 봤다. 😚 첫번째로 만나볼 친구는 Input 태그의 CSS 효과이다.참고 : https://codepen.io/andreasstorm/pen/gKGbxo webkit 관련 속성들은 되도록 빼면서 한줄씩 분석했다.( webkit이 나쁘다는게 아니라 익스플로러는 되지 않으니 최대한 호환 되게끔... )코드는 해당 참고 사이트에서 보면서 같이 분석해주시면 감사하겠다. XD 위에서부터 처음 만나는 친구들을 정리해 놓으려고 한다.box-sizing: border-box;해당 속성을 지정하면 해..