웹개발이든 어떤 개발이든 간에 기초가 상당히 중요 합니다.
웹개발이면 자바, jsp, php, asp, c#등 많치만 자바와 jsp 리액트 그리고 뷰를 많이 쓰는 추세 입니다.
프론트앤드의 기초는 html, javascript, stylesheet 입니다. 이걸 기본적으로 알고 있어야 리액트든
뷰든 간에 접근하기가 쉽고, 기초적인건 아주 중요하기 때문에 알고 있는게 이롭습니다.
먼저 html 코딩을 할려면 에디트플러스, 울트라에디트, 비주얼스튜디오코드등이 있는데, 에디터플러스, 울트라에디트는
유료이기 때문에 30일 트라이버전만 가능 합니다. 하지만 비주얼스튜디오 코드는 무료이기 때문에 쓰기가 부담스럽지
않습니다.
비주얼스튜디오 코드 다운로드 사이트 입니다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
여기서 다운을 받아서 설치를 하면 됩니다.
버전에 맞는 걸 다운로드 합니다. 윈도우면 download for windows를 다운로드 합니다.
오른쪽 화살표를 누르면 위처럼 나오는데 본인 피시에 맞는걸 다운로드 하면 됩니다.
내피시 > 다운로드에 다운로드 된걸 더블 클릭을 해서 설치를 합니다.
동의합니다 체크 후에 다음을 클릭을 합니다.
체크후에 다음을 클릭을 합니다.
설치를 클릭을 해서 설치를 합니다.
Visual Studio Code 실행을 체크후에 종료를 클릭을 해서 비주얼스튜디오코드를 실행을 합니다.
실행을 하면 welcome 창은 종료를 하고 Extentions를 클릭을 해서 코딩을 좀 편하게 할수 있게 외부적인걸 설치를
하는게 코딩할때 좀 더 편합니다.
여기서 Prettier, colorize, vscode-styled-components, ESLint, java server pages(jsp) 를 설치를 해줍니다.
검색창에 Prettier 라고 입력하면 오른쪽에 설치 목록이 나오는데 설치할거를 클릭후에 설치를 하면 됩니다.
이제 설치를 다 했으면 Settings 에서 설정을 해줍니다.
세팅에서 Prettier 입력후에 설정을 합니다.
하단에 가면 그림과 같이 설정을 해주면 됩니다.
세팅에서 Format를 입력후에 Editor: Format On Save를 체크를 해줍니다.
이렇게 하면 비주얼스튜디오 설치 및 설정이 끝났으니 html 파일을 작성해 보겠습니다.
비주얼스튜디오코드를 종료를 하고서 cmd 창을 엽니다.
실행에서 cmd를 입력을 하고 명령프롬프트를 클릭을 합니다.
그리고 원하는 곳에 빈 폴더를 하나 생성을 합니다.
test_web 이라는 폴더를 생성후에 해당 폴더로 이동후에 code . 를 입력하고 엔터를 칩니다.
그러면 해당폴더로 비주얼스튜디오가 거기에 파일을 만들 준비를 합니다.
test_web 이라는 폴더에 프로젝트로 인식을 한걸 볼수 있습니다.
표시된곳은 첫번째가 파일, 두번째가 폴더 입니다.
여기서 test.html 이라는 파일을 만들어 줍니다.
이제 오른쪽 창에서 코드를 입력을 하면 됩니다.
html의 기본 구조 입니다.
<html>
<head>
<title>test_web</title>
</head>
<body>
html 파일 입니다.
</body>
</html>
ctrl+s 로 저장후에 해당 폴더로 이동후에 test.html 파일을 더블클릭을 하면 html 파일이 인터넷 브라우저에서 보이는걸
확인할수 있습니다.
결과)
이렇게 하면 웹에서 제일 기본적인 html 파일이 만들어 졌습니다.
이제 javascript, stylesheet를 <head> 안에 넣어서 테스트를 해보겠습니다.
head 안에 <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
이걸 넣으면 jqeury 사용이 가능 합니다.
폴더를 만들때 그림을 클릭을 하지 않고 마우스 오른쪽을 눌러서도 만들수 있습니다.
해당 폴더 아래에 만들려면 폴더를 선택후 만들면 되고, 최상위에 만들려면 검은색 빈공간을 클릭후 만들면 됩니다.
이제 폴더 css, js 를 만들고 test.css (stylesheet), test.js (javascript) 파일을 만듭니다.
이제 최종 소스를 만듭니다.
test.html
<html>
<head>
<title>test_web</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="./css/test.css">
<script type="text/javascript" src="./js/test.js"></script>
</head>
<body>
html 파일 입니다.<br>
<div class="color" onClick="clickTest();">
color
</div>
<div class="colorblue" onClick="clickTest1('test');">
color blue
</div>
</body>
</html>
test.css
.color {
background-color: #e0d7d7;
}
.colorblue {
background-color: #7d7cda;
}
test.js
function clickTest() {
alert("color");
}
function clickTest1(value) {
alert(value);
}
이렇게 소스를 최종 완료를 하고 test.html 파일을 더블클릭을 해서 테스트를 합니다.
onClick은 해당 내용을 클릭을 했을때 스크립트를 실행을 하라는 겁니다.
결과)
이렇게 color, colorblue를 클릭을 하면 경고창이 보이는걸 볼수 있습니다.
그리고 html 파일 하나에 한번에 코딩을 할수도 있습니다.
test.html
<html>
<head>
<title>test_web</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.color {
background-color: #e0d7d7;
}
.colorblue {
background-color: #7d7cda;
}
</style>
<script>
function clickTest() {
alert("color");
}
function clickTest1(value) {
alert(value);
}
</script>
</head>
<body>
html 파일 입니다.<br>
<div class="color" onClick="clickTest();">
color
</div>
<div class="colorblue" onClick="clickTest1('test');">
color blue
</div>
</body>
</html>
이렇게 style(stylesheet), script(javascript)를 html 파일안에 넣을수도 있습니다.
'IT, 인터넷 > HTML, JQUERY, JAVASCRIPT, CSS' 카테고리의 다른 글
| 룰렛 플러그인으로 룰렛 돌리는 프로그램 만들기 (0) | 2021.09.28 |
|---|---|
| html의 기본문법(코드)에 대해서 설명 해 드리겠습니다 (0) | 2021.09.27 |
| jquery 사용해서 배열 json 데이터 만들기 (array, object) (0) | 2021.09.16 |
