webpaper | 웹페이퍼

기본적으로 화면에서 버튼을 만드는 방법은 여러가지가 있다. 1. a 태그로 만들기2. button 태그로 만들기 3. div 혹은 span 등등의 엘레멘트로 만들기 나는 주로 a 태그나 button으로 많이 만든다. 개발자들과의 협업도 많고, 키보드 제어를 위해서는 a태그 및 button으로 많이 만든다. a 태그로 만들경우 버튼 기본 틀이 되겠다. href 에는 클릭 시 이동할 페이지의 주소를 보통 넣는다. 만약 javascript 를 실해야한다면, href="#" onclick='함수/스크립트' 이렇게 넣는다 이 때 만드시, 뒤에 return false; 를 붙여줘야 href='#' 가 동작하지 않는다. class='btn'은 css 로 스타일을 주기 위해서 내가 임의로 넣은 코드이다. button의..

참 안외워 진다. 웬만하면 외워서 직접 작성하고 싶은데 매번 검색해서 쓰기되는 코드 TOP 이제는 외워서 써보자

로딩화면을 만드는 방법 간단하게.. #1 먼저 css 로 로딩중에 보여줄 화면을 만듭니다. 보통 화면을 덮어서, 만듭니다. .loading{ width:100%; height:100%; position:fixed; left:0px; top:0px; background:#fff; z-index:1000; /* 이 값으로 레이어의 위치를 조정합니다. */ } #2 로딩으로 보여줄 div 를 화면에 넣습니다. 보통 body 바로 담에 넣으면 됩니다. #3 페이지가 로드되었을 때 로딩화면을 감춥니다. 이렇게하면, 일단 페이지가 로드되면 하얀 loading div 가 보이고, 페이지가 로드되면, 그 div 가 사라집니다.

CSS 작업을 하다보면 box-shadow가 필요한 경우가 있다. 너무 진하게 쓰거나, 잘못하면 자칫 촌스러워 보이지만, 잘 조절해서 쓰면 또 의외의 고급스러움을 제공하는 경우도 있다. box-shadow의 설정은 사실 외워서 사용하기가 어렵다. 크롬 개발자 도구에서 지원해주는 방법도 있는데, 평소에는 "https://www.cssmatic.com/box-shadow" 사이트에서 종종 설정해서 사용하기도 했다. 그러다 그냥 나도 한번 만들어보자는 생각이 들어 만들어 보았다. 제공하는 기능은 그림자의 위치 및 흐림 / 투명도 / 반경 등을 드래그 형식 또는 입력하는 형식으로 조절이 가능하다. 드래그 기능은 Jqueryui 라이브러리를 사용했다. $( function() { //좌우 var handle1 =..