web.paper 1 페이지 | web.paper

w e b . p a p e r

[jquery/js] 메일 자동완성 코드 [css] position:absolute 가운데 정렬 [js/jquery] 배열에서 최고, 최소 값 찾아오기 (jquery array max, min) [js] jqGrid 무료 QR코드 생성기 favicon 만들기 홈페이지 제작에 필수 구글웹폰트 Korean [youtube] 동영상 플레이 하는 목록 / 화면 만들어보기

[css] position:absolute 가운데 정렬

/* absolute 가운데 정렬 : margin 사용*/.box{ width:500px; height:500px; position:absolute; top:50%; left:50%; margin-top:-250px; /* width의 절반값 */ margin-left:-250px; /* height의 절반값 */}/* absolute 가운데 정렬 : transform 사용*/.box{ width:500px; height:500px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

# CSS # 가운데정렬

20-12-28 16:33

3463

0
[html/css] a / button tag 로 버튼 만들기

기본적으로 화면에서 버튼을 만드는 방법은 여러가지가 있다. 1. a 태그로 만들기2. button 태그로 만들기 3. div 혹은 span 등등의 엘레멘트로 만들기 나는 주로 a 태그나 button으로 많이 만든다. 개발자들과의 협업도 많고, 키보드 제어를 위해서는 a태그 및 button으로 많이 만든다. a 태그로 만들경우 <a href="#" class="btn">버튼</a>기본 틀이 되겠다. href 에는 클릭 시 이동할 페이지의 주소를 보통 넣는다. 만약 javascript 를 실해야한다면, href="#" onclick='함수/스크립트' 이렇게 넣는다 이 때 만드시, 뒤에 return false; 를 붙여줘야 href='#' 가 동작하지 않는다. class='btn'은 css 로 스타일을 주기 위해서 내가 임의로 넣은 코드이다. button의 경우는 <button type='button' class="btn"> 버튼 </button>버튼 태크를 사용할 때는 type='button'을 넣어준다. 만약 form 태그 안에 있는 submit 용도라면 그냥 두어도 좋지만, 그 것이 아니라면 type='button' 를 넣어야 submit을 하지 않는다. class='btn'은 css 로 스타일을 주기 위해서 내가 임의로 넣은 코드이다. a.btn{ /* 가로 세로 사이즈를 만들고 싶다면, */ /* display:block 또는 inlne-block 를 써야 한다. */ } button.btn{ /* button은 기본적으로 border와 background를 가지고 있다. */ /* 스타일을 변경하려면 border와 background를 변경해야한다. */ }이렇게 css를 시작해본다. a.btn{ display:block; width:80px; line-height:30px; text-align:center; background-color:#222; color:#fff; } button.btn{ width:80px; height:30px; border:none; background-color:#222; color:#fff; }여기서 button 은 기본적으로 가운데 정렬 및 line-height를 높이와 동일하게 가지고 있다. 버튼 앞에 아이콘을 넣고 싶은 경우 <a href="#"><img src="search.png"> 검색</a>이렇게 할 수도 있다. 그리고 아래와 같이 할 수도 있다. a.btn, button.btn{ display:block; width:120px; line-height:30px; text-align:center; /* 이미지 크기를 30*30 정사각형으로 지정하는 경우 */ padding-left:40px; /* 이미지와 글자사이 10px의 간격을 줌 */ background-image:url(search.png); background-repeat:no-repeat; background-position:left center; }버튼안에 padding으로 공간을 만들어 배경이미지로 아이콘을 넣을 수도 있다. 다른방법은 :before / :after를 사용하는 방법도 있다.

# html버튼만들기 # HTML # CSS # CSS팁

20-04-22 14:10

19939

1
[js/jquery] 스크롤 Top 버튼 만들기

참 안외워 진다. 웬만하면 외워서 직접 작성하고 싶은데 매번 검색해서 쓰기되는 코드 <script> $(".goTop").click(function(){ $('body,html').animate({scrollTop:0},400); // 숫자는 움직이는 시간 클릭한 곳에서 Top 까지의 이동시간이라 보면 되겠다. return false; }); </script> <a href="#" class="goTop"> TOP </a>이제는 외워서 써보자

# jquery # javascript # CSS # HTML

20-04-22 13:44

3355

0
css animation

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

# keyframes # css # animation # CSS팁

20-04-08 17:45

2084

0
[css/js] 로딩화면 만들기

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

# CSS # HTML # javascript # loading화면

19-03-19 16:50

18598

1
[jquery/css] 간단한 탭메뉴 만들기 tab menu

jquery 와 css 을 이용한 간단한 탭메뉴 만들기 head 부분에 jquery 호출 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>tab 메뉴를 구현할 box 만들기 box는 가로 200px 세로길이는 컨텐츠에 따라 자동으로 늘어나는 auto height로 구성height:auto;overflow:hidden; .tab{ width:200px; height:auto; overflow:hidden; }<div class="tab"></div>클릭하여 동작할 tab 부분 css 작업 tab을 3개 넣을거라 33.3333% 로 작업 / 같은 크기의 3개의 탭높이는 텍스트의 line-height 로 잡음 (40px)tab을 클릭해야 함으로 cursor:pointer 로 마우스 커스를 올렸을때 손가락 모양이 나오게 함그리고 tab이 선택된 것을 표시하기 위해 .on 클래스로 표기함 마우스 오버와 선택된 것을 동일하게 적용하기 위해 .tab ul li:hover,.tab ul li.on{ /*css*/ }위와같이 구현함 .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; }<div class="tab"> <ul> <li class="on">tab #1</li> <li>tab #2</li> <li>tab #3</li> </ul></div>tab 선택에 따라 보여줄 content box 작업content box는 선택된 것만 보여줄 것이므로 기본적으로 display:none 으로 처리 선택된 것을 표시하기 위해 .on 클래스를 추가하여 display:block 속성을 줌 .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; } .tab .conBox{ width:100%; height:auto; overflow:hidden; min-height:200px; background:#ccc; display:none; text-align:center; } .tab .conBox.on{ display:block; }<div class="tab"> <ul> <li class="on">tab #1</li> <li>tab #2</li> <li>tab #3</li> </ul> <div id="con1" class="conBox on"> cont1 </div> <div id="con2" class="conBox"> cont2 </div> <div id="con3" class="conBox"> cont3 </div></div>이렇게 되면 기본적인 틀을 되었음 이제 jquery 작업 시작 <script> $(function(){ // tab 메뉴를 클릭하였을 때 동작함 $(".tab ul li").click(function(){ // 현재 선택되어있던 메뉴들을 초기화함 $(".tab ul li").removeClass('on'); $(".tab .conBox").removeClass('on'); // 선택된 메뉴에 on 클래스를 주어 표기함 $(this).addClass('on'); // 선택된 탭의 data 값으로 content box를 선택함 $("#"+$(this).data('id')).addClass('on'); }); });</script>선택된 li 에 대한 index 값으로도 content box의 id 를 호출 할 수 있고, 그외 다른 방법들로도 구현은 가능하나, 이번에는 data 값을 주어 그 값으로 호출함간단하게 jquery와 css를 이용하여 탭메뉴 만들기 끝 완성코드 CSS .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; } .tab .conBox{ width:100%; height:auto; overflow:hidden; min-height:200px; background:#ccc; display:none; text-align:center; } .tab .conBox.on{ display:block; }HTML / JAVASCRIPT<div class="tab"> <ul> <li data-id="con1" class="on">tab #1</li> <li data-id="con2">tab #2</li> <li data-id="con3">tab #3</li> </ul> <div id="con1" class="conBox on"> cont1 </div> <div id="con2" class="conBox"> cont2 </div> <div id="con3" class="conBox"> cont3 </div></div><script> $(function(){ $(".tab ul li").click(function(){ $(".tab ul li").removeClass('on'); $(".tab .conBox").removeClass('on'); $(this).addClass('on'); $("#"+$(this).data('id')).addClass('on'); }); });</script>

# jquery # CSS # 탭메뉴

19-03-05 10:22

25065

1
[css/jquery ui] box-shadow 설정하기

web.paper | CSS box-shadowcss box-shadow 설정하기http://www.webpaper.kr/box-shadow/ CSS box-shadow 설정 작업을 편리하게 하기 위한 페이지 작업 jquery ui 소스를 이용하여, 마우스로 편리하게 작업가능한 페이지 평소에 자주 사용하던 https://www.cssmatic.com/box-shadow 곳을 카피하여 작업한 페이지 Box Shadow CSS Generator | CSSmaticAre you a web developer? Would you like to collaborate on CSSMatic?https://www.cssmatic.com/box-shadow 설정한 CSS를 간편하게 복사하여 붙여넣기로 사용가능 함 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> $( function() { //좌우 var handle1 = $( "#custom-handle1" ); $( "#slider1" ).slider({ min: -200, max: 200, values:10, slide: function( event, ui ) { setshadow('horizontal',ui.value); } }); } ); <div class="sliderBox"> <div id="slider1"> <div id="custom-handle1" class="ui-slider-handle"></div> </div> </div>function copy_css(elementId){ var aux = document.createElement("input"); aux.setAttribute("value", document.getElementById(elementId).innerHTML); document.body.appendChild(aux); aux.select(); document.execCommand("copy"); document.body.removeChild(aux); alert('CSS가 복사되었습니다.');} <div id="css-text"></div> <button type="button" onclick="copy_css('css-text')">복사</button>

# CSS # box-shadow # jqueryui # jquery

19-02-20 09:31

4061

0
[CSS] DIV 가운데 정렬하기 - 페이지 정가운데 / 혹은 그냥 가운데 정렬

CSS 로 박스(컨텐츠)를 가운데로 정렬하기 #1. 그냥 가운데 정렬하기 #wrap{ width:100%; height:100%; background:#000;} #wrap .box{ width:300px; height:300px; margin:0 auto;}margin:0 auto; 이 친구를 넣어주면 왠만하면 가운데로 간다. 물론 img 나 text는 "text-align:center" 를 쓰길#2 정가운데 정렬 #wrap{ width:100%; height:100%; background:#000; position:relative;} #wrap .box{ width:300px; height:300px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px;}물론 다른 방법도 있다. 그런데 이 방법이 젤 편하고 안까먹게 된다. 원리는 일단 BOX의 position 을 absolute 로 준 다음에 left/top 를 50%로 준다. 그럼 x와 y 값에 따라서 50% 지점부터 box 크기 300px 이 먹게된다. 그러니 정가운데로 오려면 margin 값을 box width 값의 반으로 마이너스 해준다. 그럼 가운데로 간다. 난 가끔 이해가 안되면 그려가면서 하는데 한번 그려보면 이해가 될 것이다.

# CSS # 가운데정렬 # CSS팁

19-02-14 11:27

76091

1

반응형 테스터

반응형 테스트 / 해상도 별 화면

숫자 야구게임

간단한 PHP 3자리 숫자 야구게임

셀프 배너제작

간단한 이미지 제작 셀프로 쉽게!

Box-Shadow CSS

Box-Shadow CSS 설정 페이지

레이아웃 계산

배너사이즈 구하기