-
JavaScript 입문 (끝말잇기 게임) : HTML 기본구조컴퓨터 알아가기/JavaScript 2022. 1. 20. 19:30728x90반응형
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다.
VS Code를 실행하여 프로그래밍 연습을 해봅니다.
1. 사용폴더와 파일만들기
VS Code에서는 언제나 폴더로 만들어 하나의 프로젝트를 진행합니다. 폴더를 만들거나 파일을 만들거나 하는 기준은 폴더내에 연동될 파일들이 있으면 폴더로 만들어 진행합니다.
저는 WordChain이라는 폴더를 생성하고 마우스 우측 클릭으로 VS Code를 열었습니다.
그리고 다음 그림과 같이 New File을 클릭해서 (물론 상단의 메뉴바를 활용해도 됩니다.) word-chain.html이라는 파일을 만듭니다. 웹에서의 Frame을 만드는 역할은 HTML이 한다는 것은 아시죠?
2. VS Code 기본 HTML 테이블 만들기
VS Code를 사하는 이유중 하나가 단축키를 사용하여 HTML의 기본 프레임을 완성하는데 있습니다.
① doc + Tab키
아래와 같이 doc를 입력하고 tab키를 누르면 기본 HTML 프레임을 만들어 줍니다.
기본 HTML 프레임 ② 기본추가
여기서 우리가 하고자 하는 내용을 약간 수정해 주면 기본적 HTML 구조를 가지고 시작할 수 있습니다.
한글을 사용하기 위해 언어를 한글로 입력하였고 타이틀을 잡아 주었습니다.
3. 입력창 만들기
이제는 웹페이지에서 입력창을 만듭니다. 순서도에서 다음 그림과 같이 구체적으로 생각할 포인트가 나왔습니다.
물론 각각의 포인트에서 아주 구체적으로 만들어내어 프로그래밍의 좋은 결과를 내는게 아주 중요하겠죠.
다음과 같이 입력창을 만들어 봅니다.
관련된 HTML과 CSS는 꼭 한번씩 읽어보시기 바랍니다.
만일 HTML과 CSS를 모르면 동시에 같이 공부해도 됩니다. 단, 무조건 따라쳐보고 해당줄에서 궁금한 부분들은 여러 검색을 통해서 확인할 수 있습니다.
시간이 없다고 하는 분들은 아래 3가지 글은 최소 읽고 진도를 나가도록 합니다.
2021.02.16 - [컴퓨터 알아가기/HTML CSS] - HTML 기본은 알고가자 (1탄) : HTML구조, Body 태그, P 태그, Head태그, Div 태그
HTML 기본은 알고가자 (1탄) : HTML구조, Body 태그, P 태그, Head태그, Div 태그
컴퓨터 프로그래밍 언어에 대한 나름 대로 로망이 생기기 시작했다. 하지만 확실한 건 개발자 수준까지는 올라갈 수 있는 능력(?).. 음 거기까지는 이제 너무 시간이 지난 것 같다. 최초 언급했듯
happygunja.tistory.com
HTML 기본은 알고가자(2탄) : 속성, 글씨쓰기, Text꾸미기, 줄바꿈, 순서 및 비순서 목록, 이미지 및
지난 시간까지 HTML구조, Body 태그, P 태그, Head 태그, Div 태그에 대해 간략하게 개념을 살펴 보았습니다. 물론 각각에 대하여 많은 실제 예를 들어 연습도 필요합니다만 최소한 어떤 형태로 이루지
happygunja.tistory.com
HTML 기본은 알고가자(3탄) : HTML 문서선언, html tag, head tag, page title, 웹페이지링크, 같은페이지내
이제 HTML 3번째 시간으로 지난 시간까지는 전체적인 HTML에 대한 기본 개념에 대한 소개였습니다. 그리고 Codecademy에서는 하나의 과정이 완료될 때 마다 다음 그림과 같은 인증도장을 찍어주는데
happygunja.tistory.com
☞ 실시간 서버를 통한 확인
작업한 내역을 실시간으로 확인할 수 있는 서버를 설치합니다. VS Code에서 확장프로그램으로 가서 Live Server를 설치합니다.
설치후 하단에 Go LIve를 클릭햐면 포트5500번을 사용하는 라이브 서버가 작동됩니다.
실시간 서버 작동후 웹페이지가 다음과 같이 반영이 됩니다.
입력창에서 좀 더 추가되는 기본을 만들어봅니다.
<button>태그에서 입력이라는 단어와 밑에 <script>테그를 만들어 놓고 <head>태그안에 <style>태그를 추가합니다.
항상 저장 (Ctrl + S)을 하고 LIve Server를 봅니다.
참고로 <style>태그는 CSS를 <script>태그에서는 JavaScript 코딩을 할겁니다.
반응형'컴퓨터 알아가기 > JavaScript' 카테고리의 다른 글
JavaScript 입문 (끝말잇기 게임) : HTML 태그선택자 document.querySelector( ) (0) 2022.01.25 JavaScript 입문 (끝말잇기 게임): prompt( ), alert( ), confirm( ) (0) 2022.01.21 JavaScript 입문 : VS Code 마우스우측 클릭 메뉴 활성화 (Open with Code) (0) 2022.01.19 JavaScript 입문 (끝말잇기 게임): 프로그래밍 사고방식 (0) 2022.01.18 JavaScript 입문 : 객체의 비교 (0) 2022.01.15