프로그래밍 맛보기(1부)

안녕하세요. 프로그래밍에 관심이 있지만 처음 접하시는 분들이

프로그래밍을 쉽고, 간단하고, 재밌게 맛보도록 해드리기 위해 다음 글을 쓰게 되었습니다. 

한번 경험해보시겠다면 저를 따라오시죠~

 

우선 프로그래밍을 시작하기에 앞서

개발환경, 개발툴을 갖추어야 하는데요.

저는 자바스크립트/HTML 로만 진행할것 이어서

컴퓨터에 notepad.exe(메모장) 만 깔려있으셔도 따라오실 수 있습니다. 

물론 VSCode나 SublimeText와 같은 텍스트 에디터가 있다면

더욱 편리하게, 또 격식있게 프로그래밍을 경험하실 수 있겠지만요

 

우선 처음이시니 작업표시줄의 시작, 돗보기 옆에 note...를 치시고 

메모장을 열어보겠습니다.

 

 

그리고 다음을 작성하겠습니다

아자! 개발 입문하기!
<script>

	//1. 변수와 연산
	var x = 1; //* 숫자 형(타입)
	var y = 2;
	alert(x+y);

</script>

작성 후에 저장을 하시는데요, 파일 형식을 모든 파일로 바꾸시고

아래와 같이 '파일명.html' 형태로 확장자를 .html로 저장하시는 것이 포인트가 되겠습니다!

 

여기까지 하셨다면 아래와 같이 파일이 생성 되셨을텐데요. 이것을 실행해봅시다.

 

그러면 이렇게 뚝허니 '3' 이라고 알람창이 등장합니다.

그렇습니다. 우리는 위의 코드를 작성하여 아래의 동작을 실행시킨 것입니다.

보아하니 3은 위의 코드에서 x=1, y=2 로 선언했던 값들을 x+y로 연산하였기 때문에

나타난 것임을 알 수 있습니다. 

뭐가 뭔지 아직 잘 모르시겠다구요? 

네 그럴 수 있습니다. 처음해본다면 모든게 낮설 수 밖에 없습니다.

그럼 조금 더 작성(프로그래밍)해보겠습니다.

아자! 개발 입문하기!
<script>

	//1. 변수와 연산
	var x = 1; //* 숫자 형(타입)
	var y = 2;
	alert(x+y);

	//2. 함수와 함수호출
	function fx() {
		alert("나는 함수라네~"); //* 문자 형(타입)
	}
	fx();

	//3. 서랍장 같은, 배열 
	var array = [10, 20, 30, 40];
	alert("3번. "+ array[0]);

</script>

그리고 해당 파일을 다시 실행해보면... 다음과 같은 결과를 확인하실 수 있습니다.

조금 적응되시는지요? 

그렇습니다 익숙해지시려면 지금까지 했던것 처럼 적응될때까지 계속 쓰고/보고 또 쓰고/보고 해야할 것입니다.

작성 안을 드릴테니 더 많은 코드를 작성해보고 경험해보시겠습니다.

아자! 개발 입문하기!
<script>
	//* 다음을 따라 적고, 그리고 브라우저 화면에서 확인해보세요~
	//  이것이 공부입니다. alert()의 주석을 풀어 결과물을 확인해보세요~

	//1. 변수와 연산
	var x = 1; //* 숫자 형(타입)
	var y = 2;
	//alert(x+y);

	//2. 함수와 함수호출
	function fx() {
		//alert("나는 함수라네~"); //* 문자 형(타입)
	}
	fx();

	//3. 서랍장 같은, 배열 
	var array = [10, 20, 30, 40];
	//alert("3번. "+ array[0]);

	//4. 반복 업무, 반복문(for, while) 
	//4_1.
	for(var i=1; i<=3; i++) { //세번 반복 
		//alert("4_1번. "+ array[i]);
	}
	//4_2.
	var j=1;
	while(j<=3) { //세번 반복 
		//alert("4_2번. "+ array[j]);
		j++;
	}

	//5. 만약에 이럴때, 조건문(if, switch-case) 
	//5_1.
	var jogun1 = 2 < 3; //2가 3보다 작다. '참' 으로 다음을 실행
	var jogun2 = true || false; //true || false 는 true를 반환 함으로 다음을 실행 
	if(jogun1) { 
		//alert("5_1번. "+ jogun1); //* true, false 는 논리 형(타입)이라고 부릅니다
	}
	//5_2.
	var jogun3 = "bannana";
	switch(jogun3) { //true || false 는 true를 반환 함으로 다음을 실행 
		
		//case "apple": alert("5_2번. 사과"+ jogun3); break;
		//case "bannana": alert("5_2번. 바나나"+ jogun3); break;
		//default: alert("5_2번. 종료"+ jogun3); break;
	}

	//6. 숙제. 반복문을 이용하여 구구단 9단까지 찍어보세요 
	//alert("구구단 시작!");
	var dan = 2; //힌트로, 이는 2단 예시입니다!
	for(var i=1; i<=9; i++) {
		//alert(dan + "x" + i + "=" + i*dan);
	}

</script>


<!-- 7. 따라해보기. 같이 따라해보아요~
	    흰벽에 내가 좋아하는 액자(.img)를 걸어보기 -->

<!-- 벽 입니다 -->
<div id="wall" style="padding:10">
	나는 벽. 여기에다 액자를 걸어두지..<br><br><br><br>
</div>

<script>

	//액자1 
	document.getElementById("wall").innerHTML += "<div class='frame'><img src='https://source.unsplash.com/random/500x500?sig=1' style='height:250;'></div>";

	//액자2
	document.getElementById("wall").innerHTML += "<div class='frame'><img src='https://picsum.photos/500/500' style='height:250;'></div>";

	//액자3
	document.getElementById("wall").innerHTML += "<div class='frame'><img src='https://random.imagecdn.app/500/500' style='height:250;'></div>";

</script>

<!-- 아래는 이미지를 액자스럽게 꾸며주는 스타일 소스 입니다. 작성하셔도 되고, 안하셔도 됩니다 -->
<style>
img {
  border:solid 2px;
  border-bottom-color:#ffe;
  border-left-color:#eed;
  border-right-color:#eed;
  border-top-color:#ccb;
  max-height:100%;
  max-width:100%;
}

.frame {
  background-color:#ddc;
  border:solid 5vmin #eee;
  border-bottom-color:#fff;
  border-left-color:#eee;
  border-radius:2px;
  border-right-color:#eee;
  border-top-color:#ddd;
  box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  box-sizing:border-box;
  display:inline-block;
  margin:5vh 5vw;
  height:40vh;
  padding:4vmin;
  position:relative;
  text-align:center;
  &:before {
    border-radius:2px;
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
    content:"";
    left:-2vmin;
    position:absolute;
    right:-2vmin;
    top:-2vmin;
  }
  &:after {
    border-radius:2px;
    bottom:-2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content:"";
    left:-2.5vmin;
    position:absolute;
    right:-2.5vmin;
    top:-2.5vmin;
  }
}
//액자스타일 출처: https://codepen.io/chris22smith/pen/PbBwjp

//9. 숙제. 구글링을 하셔서 이(액자 스타일)와 같은 꿀템 소스들을 잘활용해보세요~
</style>

 

여기까지 잘 따라오셨다면~ 이 처럼 프로그래밍으로 벽에다 액자도 걸어보셨을 겁니다. 

<script>
//+ 액자4
document.getElementById("wall").innerHTML += "<div class='frame'><img src='"
	+"https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbE1kG7%2Fbtq9qjY5W5x%2F7kXkyzYFZVD54qnMLGf2E1%2Fimg.png"
+"' style='height:250;'></div>";
</script>

 

고생하셨습니다~ 즐거운 하루되세요