앱 개발만 주구장창 하던 중 전에부터 관심을 두고 있던 웹 개발이 머리에 맴돌았다 그래서 당장 React를 해볼까? 하던 찰나에 기초가 많이 부족해 보여서 기록으로 남길 겸 이렇게 정리를 해보기로 했다
기본 세팅
흔히들 쓰는 플랫폼으로 VScode를 선택을 했다 아무래도 많이들 쓰는 플랫폼이기도 하고 많은 기능들을 제공 해주기 때문에 고민도 없이 VScode로 사용하기로 했다
설정방법
VScode를 처음으로 실행을 하면 이런 화면이 보일 것이다 나를 포함하여 처음으로 접하는 코린이들은 당황 할 수 있다. 하지만 걱정하지말고 따라가보자
편하게 연습을 하고 싶거나 프로젝트를 만들때 기초 공사를 위해 파일을 생성한다
필자는 바탕화면에 JS 라는 파일명으로 생성을 했다
다음으로는 프로젝트를 만들기 위해 위의 창에서 폴더열기를 하여 방금 생성한 파일명을 찾아서 불러오면 기본 세팅은 끝
코드 작업
HTML 생성
웹개발을 위한 기초는 HTML CSS JS 이 세개로 이루어져 있는데 가장 뼈대가 되는 HTML을 생성을 해야한다 필자는 index.html로 생성을 하였다
일일히 저 코드를 따라 칠 필요없이 !+[tap] 버튼으로 html의 기본 틀을 만들 수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행우의 자바스크립트</title>
</head>
<body>
</body>
</html>
CSS 생성
다음으로 색과 틀을 잡아줄 CSS를 생성해보도록 하자 필자는 main.css로 CSS를 생성했고 HTML과 연동하기위해 링크를 걸어 놓았다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행우의 자바스크립트</title>
<link rel = "stylesheet" href="main.css"> <!--여기에 링크 -->
</head>
<body>
</body>
</html>박스 알림 만들어보기
기본적인 틀은 만들었으니 이제 기본적인 JS를 사용해보도록 하자 JS는 위의 정적인 틀에서 동적으로 구동하기위해 사용한다
가장먼저 박스를 띄우고 숨겨보는 기능을 구현해 보기로 했다
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행우의 자바스크립트</title>
<link rel = "stylesheet" href="main.css"> <!-- 여기에 링크 -->
</head>
<body>
<div class = "alert-box" id="alert" >
행우의 자바스크립트 입니다
<button onclick="document.getElementById('alert').style.display= 'none';">닫기</button>
</div>
<button onclick="document.getElementById('alert').style.display= 'block';">열기</button>
</body>
</html>CSS 코드
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none; /* 박스창 숨기기 default value*/
}분명 JS를 쓴다 했는데 파일도 없고 [script] 태그도 안보이는데 어디서 쓰는건지 모를 수 있다. 위에는 버튼 태그에서 onclick 속성에 스크립트를 적용한 것으로 기본적인 스크립트의 모습을 보일 수 있다
_실행했을때의 모습_그렇다면 같은 기능이지만 보다 깔끔하게 보이기 위해서는 어떻게 해야할까 script 태그에 function을 사용하여 깔끔하게 보이도록 해보겠다
function을 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행우의 자바스크립트</title>
<link rel = "stylesheet" href="main.css"> <!-- 여기에 링크 -->
</head>
<body>
<div class = "alert-box" id="alert">
행우의 자바스크립트 입니다
<button onclick="Alert('none')">닫기</button>
</div>
<button onclick="Alert('block')">열기</button>
<script>
function Alert(buttonFun){
document.getElementById('alert').style.display= buttonFun;
}
</script>
</body>
</html>위와 같이 function(){} 같은 형식에서 ()안에 파라미터를 설정하여 위와 같은 가변적인 기능에는 유용하게 쓰일 수 있다.
JavaScript의 기초중에 기초를 첫 블로그에 정리를 해보았다 처음으로 쓰는 기술 블로그 이기에 어려움이 있지만 점점 쓰다보면 개발자 다운 모습으로 보이지 않을까 싶다.
다음 포스팅에는 보다 나은 글로 소개해 보겠다
