webpaper | 웹페이퍼

/* absolute 가운데 정렬 : margin 사용*/        .boxA{            width:500px;            height:500px;            position:absolute;            top:50%;            left:50%;            margin-top:-250px; /* width의 절반값 */            margin-left:-250px; /* height의 절반값 */            background-color: #fff;        }        /* absolute 가운데 정렬 : transform 사용*/        .boxB{            width:500px;           ..

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

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

@keyframes@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes CSS 애니메이션 사용하기CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.https://developer.mozilla.org/ko/docs/We..

로딩화면을 만드는 방법 간단하게.. #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 가 사라집니다.

jquery 와 css 을 이용한 간단한 탭메뉴 만들기 head 부분에 jquery 호출 tab 메뉴를 구현할 box 만들기 box는 가로 200px 세로길이는 컨텐츠에 따라 자동으로 늘어나는 auto height로 구성 height:auto; overflow:hidden; .tab{ width:200px; height:auto; overflow:hidden; } 클릭하여 동작할 tab 부분 css 작업 tab을 3개 넣을거라 33.3333% 로 작업 / 같은 크기의 3개의 탭 높이는 텍스트의 line-height 로 잡음 (40px) tab을 클릭해야 함으로 cursor:pointer 로 마우스 커스를 올렸을때 손가락 모양이 나오게 함 그리고 tab이 선택된 것을 표시하기 위해 .on 클래스로 표기함 ..

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