반응형

알고리즘 문제를 풀이해 보겠다.

1 ~ 입력받은 숫자까지 데이터를 배열에 담을 때, 홀짝별로 정렬되어 들어가는 배열을 만들 것이다.

조건이 배열을 한개만 사용해야 한다는 부분이 신기하여 작성하여 보았다.

1. 입력받은 숫자까지 배열에 담는다. ex) 6을 입력시 1, 2, 3, 4, 5, 6

2. 배열에 어떻게 넣든 상관은 없지만 나중에 호출시

홀수부터 시작이면 1, 3, 5, 2, 4, 6 으로 출력된다.

짝수부터 시작이면 2, 4, 6, 1, 3, 5 으로 출력시킨다.

3. 배열은 한 개만 선언하여 사용한다. 2개이상 사용금지!

 

재미있는 조건의 문제같아서 풀이해보았다. 더 신박한 풀이 방식이 있다면 피드백 부탁드립니다.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>홀짝</title>
    <script type="text/javascript" src="js-sipping.js"></script>
    <style media="screen">
      .inputData{
        width: 80px;
        height: 30px;
      }
      .button{
        width: 60px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <input type="number" id="inputData" class="inputData">
    <button type="button" class="button" name="button" onclick="sipping()">실행</button>
    <div id="outPut">

    </div>
  </body>
</html>

 

js-sipping.js

function sipping(){
  var num = document.getElementById("inputData").value;
  num = parseInt(num);
  if(num > 1){

    var arr = new Array();
    var half;
    var idx = 0;
    var orderBy = confirm("홀수 부터 정렬할까요?");

    if(orderBy){
      half = Math.ceil(num/2);
    }else{
      half = Math.floor(num/2);
    }

    for(i=1; i<num+1; i++){
      if(orderBy){

        if(i%2 == 0){
          arr[half] = i;
          half++;
        }else{
          arr[idx] = i;
          idx++;
        }
      }else{

        if(i%2 == 0){
          arr[idx] = i;
          idx++;
        }else{
          arr[half] = i;
          half++;
        }
      }
    }

  }else{

    alert("2이상부터 동작합니다.")
    return;
  }

  document.getElementById("outPut").innerHTML = arr;
}

 

작성 한 코드는 2이상부터 동작하도록 설정하였다.

짝부터 정렬한다고 가정하고

0번인덱스부터 차례대로 짝수값만 %연산자를 통해 집어넣고

배열길이의 절반위치부터 차례대로 홀수값만 입력하여 완성시키는 코드이다.

홀부터 정렬할경우엔 반대로 동작

입력값이 2, 4, 6 등의 짝수 값을 입력시엔 반값이 정확하므로 문제가 없지만

입력값이 3, 5, 7 등의 홀수 값을 입력하면 반값이 소숫점으로 나오므로 정렬순에 따라 올림 또는 버림이 필요했다.


 

ex) 7이 입력된 경우 부터 정렬하면 홀수의 시작 위치가 3이다.(길이의 반 값(3.5)을 내림을 해야함)

숫자 2 4 6 1 3 5 7
배열[인덱스] 0 1 2 3 4 5 6
숫자 2 4 6 1 3 5 7
배열[인덱스] 0 1 2 3 4 5 6

 

ex) 7이 입력된 경우 부터 정렬하면 짝수의 시작 위치가 4이다.(길이의 반 값(3.5)을 올림을 해야함)

숫자 1 3 5 7 2 4 6
배열[인덱스] 0 1 2 3 4 5 6

 

반응형
반응형

BootStrap cdn을 활용하여 네온사인 버튼을 만들어 봅니다.

 

Bootstrap-cdn을 활용한 버튼

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Bootstrap-cdn 적용 -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="CheckButton.css" />
<title>CheckButton</title>
</head>
<body>
<ul>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
                <!-- 이미지 적용(비행기) -->
				<i class="fa fa-plane" aria-hidden="true"></i>
			</div>
		</label>	
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
                <!-- 이미지 적용(트위터) -->
				<i class="fa fa-twitter" aria-hidden="true"></i>
			</div>
		</label>	
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
                <!-- 이미지 적용(신용카드) -->
				<i class="fa fa-credit-card" aria-hidden="true"></i>
			</div>
		</label>	
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
                <!-- 이미지 적용(윈도우) -->
				<i class="fa fa-windows" aria-hidden="true"></i>
			</div>
		</label>	
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
                <!-- 이미지 적용(유튜브) -->
				<i class="fa fa-youtube" aria-hidden="true"></i>
			</div>
		</label>	
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
                <!-- 이미지 적용(인스타그램) -->
				<i class="fa fa-instagram" aria-hidden="true"></i>
			</div>
		</label>	
	</li>	
</ul>
</body>
</html>

 

 

CheckButton.css

*{
  margin: 0px;
  padding: 0px;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #111; 
}
ul{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	border: 3px solid #000;
	border-radius: 10px;
	padding: 20px 0;
	box-sizing: border-box;
	overflow: hidden;
	width: 240px;
	background: linear-gradient(0deg, #000000, #0c0c0c);
}

ul:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.05);
	bottom: -50%;
	pointer-events: none;
	z-index: 1;
}
ul li{
	position: relative;
	list-style: none;
	text-align: center;
	margin: 15px;
}
ul li label{
	position: relative;
}
ul li label input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
ul li label .icon-box{
	width: 60px;
	height: 60px;
	background-color: #101010;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 3px solid #000;
	border-radius: 10px;
	transition: 0.5s;
}

ul li label .icon-box .fa{
	font-size: 30px;
	color: #222;
	transition: 0.5s;
}
ul li label input[type="checkbox"]:checked ~ .icon-box{
	background-color: #000;
	border: 3px solid #fff;
	box-shadow: 0 0 10px rgba(33,156,243,.5),
				0 0 20px rgba(33,156,243,.5),
				0 0 30px rgba(33,156,243,.5);
	
}
ul li label input[type="checkbox"]:checked ~ .icon-box .fa{
	color: #fff;
	text-shadow: 0 0 10px rgba(33,156,243,.8),
				 0 0 10px rgba(33,156,243,1);
}

 

다른 아이콘들을 확인 하고 싶으면

https://fontawesome.com/v4.7.0/icons/

 

Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

위 사이트로 접근하여 원하는 이미지로 적용시키면 된다.

 

아래 빨간색으로 처리된 class부분을 변경해주면 된다.

 

반응형
반응형

위의 gif와 같은 버튼을 만들어 보겠습니다.

 

See the Pen rotateBorderButton by myhappyman (@myhappyman) on CodePen.

반응형
반응형

HTML, CSS로만 구성된 사각형박스가 올라오면서 원형으로 변하고 사라지는 배경을 작성해보겠습니다.

HTML PAGE

 

index.html


<!doctype html>
<html>
<head>
<title>Bubbles Background</title>
<link rel="stylesheet" type="text/css" href="BubbleBackground.css" />
</head>
<body>
  <ul class="bubbles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</body>
</html>

 

BubbleBackground.css


*{
  margin: 0px;
  padding: 0px;
}
body{
  background: #DDD;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bubbles{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bubbles li{
  position: absolute;
  list-style: none;
  display: block;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, .5);
  animation: animate 25s linear infinite;
  bottom: -150px;
}
.bubbles li:nth-child(1){
  left: 5%;
  width: 90px;
  height: 90px;
  animation-delay: 0s;
}
.bubbles li:nth-child(2){
  left: 15%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}
.bubbles li:nth-child(3){
  left: 20%;
  width: 150px;
  height: 150px;
  animation-delay: 4s;
}
.bubbles li:nth-child(4){
  left: 30%;
  width: 35px;
  height: 35px;
  animation-delay: 0s;
  animation-duration: 18s;
}
.bubbles li:nth-child(5){
  left: 40%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}
.bubbles li:nth-child(6){
  left: 50%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}
.bubbles li:nth-child(7){
  left: 60%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}
.bubbles li:nth-child(8){
  left: 65%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}
.bubbles li:nth-child(9){
  left: 70%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}
.bubbles li:nth-child(10){
  left: 80%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}
.bubbles li:nth-child(11){
  left: 85%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}
.bubbles li:nth-child(12){
  left: 95%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
  animation-duration: 8s;
}
@keyframes animate {
  0%{
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100%{
    transform: translateY(-500px) rotate(360deg);
    opacity: 0.5;
    border-radius: 25%;
  }
  100%{
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
 
반응형