문서를 작성하려면 워드프로세서가 필요하듯이,
client-side 개발에 앞서 우리는 텍스트에디터가 필요합니다.
물론 메모장으로 작성하고 확장자를 .txt가 아닌 .html로 바꾸는 형태로 진행할 수도 있습니다.
그러나 편의성을 위해서 텍스트에디터를 다운받아 설치하고 진행해봅시다.
텍스트에디터는 다양하지만, 저는 서브라임텍스트를 이용해서 개발을 진행하겠습니다.
https://www.sublimetext.com/ 에서 다운받으시고 설치하시면 됩니다.
설치 후에는 간단한 설정 몇가지 진행하겠습니다.
1. 결과물을 브라우저로 출력해주는 단축키를 설정하는 것.
은 http://bitly.kr/Zq14clZ 를 참고하셔서 진행하시면 되겠습니다.
2. Emmet이라는 강력한 자동완성plugin을 설치하는 것.
은 https://webdir.tistory.com/399 을 참고해주세요.
브라우저는 Chrome으로 사용하겠습니다.
크롬이 없으시다면 https://www.google.co.kr/chrome/ 에서 다운받으시고 설치하시면 됩니다.
설치하셨다면 초기화면이 보이실겁니다.
우측 아래 Plain Text를 눌러주시고 HTML를 찾아 바꾸어 줍시다.
다 되셨다면 위와 같이 작성하여 주시고 tab키를 눌러주시면...
아래와 같이 html문서 기본양식이 자동생성 됩니다.
여기서 <!DOCTYPE html>는 해당 문서를 HTML 형식임을 선언하는 부분입니다.
<html>은 HTML 문서의 시작을 알리는 부분이며,
</html>는 HTML 문서의 끝을 정의해줍니다.
이 꺾쇠(<)로 구성된 요소를 태그라 하며 또한 DOM 엘리먼트(The Document Object Model)라고도 부릅니다.
즉 HTML 문서에서 미리 선언되어 있는 HTML 언어의 문법입니다.
파일을 저장하고 Ctrl+b를 누르면 위와 같이 브라우저에서 백지로 출력됩니다.
html파일에 아무것도 작성하지 않았기 때문입니다.
그러나 아래와 같이 <body></body>부분에 문서 내용을 작성하고 다시 단축키를 눌러보시면
아래와 같이 다음과 같은 button 요소가 출력됨을 확인 할 수 있습니다.
이것을 CSS 효과를 주어 다른 형태로 꾸밀수도 있습니다. 한번 해보겠습니다.
요소가 더 세련되게 변한것 같습니다.
마지막으로 JavaScript를 활용하여 서비스는 아니지만 알람을 띄우는 간단한 동작을 구현해보겠습니다.
버튼을 누르면 alert이 발생합니다.
if 문법을 응용해 입력하는 값이 숫자인지 체크 할수도 있겠습니다.
client-side 맛보기는 여기까지 하겠습니다.
'웹개발 > client-side' 카테고리의 다른 글
| 1탄) node.js 기반 React + MongoDB + graphQL 프로젝트 (0) | 2020.03.27 |
|---|---|
| 1탄) .NET Core, WPF GUI 프로그래밍 스터디 (0) | 2020.03.14 |
| 3탄) PHP, DB 연동 및 배포 (0) | 2020.03.13 |
| 2탄) PHP, DB 연동 및 배포 (0) | 2020.03.12 |
| 1탄) PHP 웹 개발 환경 세팅 (0) | 2020.03.06 |