코드공부방

inputbox 포커스 효과 (유튜브 댓글 입력 폼) UI Clone 나는 유튜브를 즐겨보는 편인데 영상을 보기만 하지 댓글을 단다거나 추천을 누른다거나 하는 등의 리액션은 잘 안하는 편인데, 어떤 영상을 보다가 너무 영상이 와닿아서 영상에 댓글을 달려고 하는 중 인풋박스(inputbox)에 재밌는 UI를 발견했다. (직업병 ㅠㅠ) 바로 인풋박스에 포커싱이 되면 인풋박스 하단에 라인이 그려지는 애니메이션인데 단순히 좌에서 우로 그려지는 라인이 아닌 가운데서 펼쳐지는 모션이었다. "오 신선한데?" 라는 생각을 하고 나니 갑자기 어디선가 본 것같은 느낌이 들었고 찾아보니 자주 가는 웹사이트의 메뉴에서도 사용되고 있는 효과였다. 우선 폼을 만들어보자. /* CSS */ .box {padding:40px; bo..

window popup 새창(팝업창) 열기, 띄우기 (javascript window.open()) 예전엔 아주 많이 사용했던 윈도우 팝업(window popup)창, 요즘은 보기 힘들다. 주로 내부 시스템, 관리자 같은 곳에 쓰이는 편이다. 가끔 필요할때마다 검색해서 사용하다가 그냥 정리해서 갖고 있으면 좋을 것 같아서 정리해본다. 사용방법은 window객체의 open메소드를 사용하면 된다. //Javascript window.open('경로', '팝업 이름', '옵션'); 아래는 팝업창 함수 사용 예제이다. 팝업창 열기 //javascript function openWindowPop(url, name){ var options = 'top=10, left=10, width=500, height=600,..

페이지 프린트(print)할때 background 안나오는 현상 해결 오프라인에서 사용할 문서를 온라인에서 출력할 수 있는 페이지(팝업창)를 작업해달라는 요청이 와서 작업을 진행했다. 진행할 업무 얘기를 들었을때부터 "아 뭔가 프린트할때 이슈가 생기겠구나" 예상은 하고 우선 보내준 엑셀 파일을 참고하여 UI 작업을 진행했다. 별도 디자인이 없는 상황에서 참고용으로 준 엑셀문서보다는 보기좋게 결과물이 나와야 했기 때문에 여기저기 테이블 스타일을 참고하여 웹페이지 작업은 마무리됐다. 그리고 별 기대없이 해당페이지를 출력해봤다. 결과는? 역시 보란듯이 background-color가 표시되지 않았다. 예상했기에 덤덤하게 관련 키워드로 검색해보니 @media print 안에 -webkit-print-color-..