HTML 코딩으로 웹페이지에 문구 출력하기 ‘Good day!’ #4

jeahyun

·

지난 번 글에서는 프론트앤드 웹 언어 중 하나에 해당하는 HTML 기본 구조와, 프론트앤드와 백앤드에 차이점에 대해서 알아보았다.

그리고 이번 글에서는 비쥬얼 스튜디오 코드 프로그램을 활용하여 크롬(Chrome) 웹페이지에 ‘Good day!’라는 문구를 출력해보려 한다.

만일 비쥬얼 스튜디오 코드가 설치되어 있지 않은 경우라면, 아래 링크된 글을 통해 비쥬얼 스튜디오 코드 설치 및 기본 세팅을 하면 된다.

지금부터 HTML 코딩을 통한 웹 페이지 문구 출력의 기본적인 방법과 그 원리에 대해서 알아보도록 하자.

비쥬얼 스튜디오 코드 설치 및 기본세팅


HTML 코딩으로 크롬 화면에 문구 출력

비쥬얼 스튜디오 코드

가장 먼저 지난 시간에 설치했었던 비쥬얼 스튜디오 코드를 실행시킨다. 그리고 원래 작성해 놓았던 코드들이 있다면 전부 지워준다.

HTML 코딩 2

이후 File > New Text File 탭을 클릭해서 새로운 코드 입력창을 열어준다.

HTML 코딩 3

그 다음에는 좌측의 Select a Language 문구를 클릭한 뒤, 상단 검색창에 ‘html’을 검색하여 <>HTML(html) 버튼을 클릭한다.

HTML 코딩 4
HTML 코딩 5

그 다음에는 위 이미지의 순서대로 1번 코드 입력창에 html을 입력 후 바로 아래 보이는 스페너 모양 html을 클릭해 준다.

정석대로 하려면 원래 직접 코드를 작성해야 하지만, 비쥬얼 스튜디오 코드 프로그램에서는 자동 완성 기능을 지원하기 때문에 간편하고 수월하게 코드를 작성할 수 있다.

엔터(Enter)를 눌러 중간에 새로운 코드가 들어갈 여백 공간을 만들어준다.

HTML 코딩 6
HTML 코딩 7

그리고 생성된 <html></html> 사이에 위와 같은 방식으로 똑같이 head를 입력하여 코드를 작성한다. 이번에도 마찬가지로 엔터를 눌러서 새로운 코드가 들어갈 여백 공간을 만들어준다.

HTML 코딩 8

이번에는 body 코드를 입력 후 똑같이 진행한다.

HTML 코딩 9

그리고 해당 문서가 HTML5 문서라는 것을 웹 브라우저에게 선언을 해주기 위해, 가장 상단에 <!DOCTYPE html>을 입력한다.

이 코드도 마찬가지로 자동완성 기능이 있기 때문에 잘 활용한다면 추후 생산성도 높아지고 매우 효율적이다.

HTML 코딩 10

이런 식으로 완성시키면 된다.

HTML 코딩 11

html5 독타입(DOCTYPE) 선언 코드를 기입했다면, 그 다음으로는 가장 처음 기입했던 <html> 코드 사이에 lang=”ko”코드를 기입한다.

이 코드는 해당 문서가 한국어로 이루어져 있다는 것을 알리기 위한 코드로, 만약 영어라면 “en”이 된다.

HTML 코딩 12

그 다음으로는 인코딩 방식을 거의 대부분의 문자를 지원하는 UTF-8 형식으로 설정하기 위한 코드를 기입한다.

<head> 코드 사이에 <meta charset=”utf-8″> 코드를 기입해준다.

HTML 코딩 13

마지막으로 <body> 사이에 화면에 띄울 문구를 작성해 준다. 나는 ‘GOOD DAY! 첫 문장을 작성했다’라고 작성했으나, 자신이 원하는 형식으로 작성하면 된다.

HTML 코딩 14

모두 작성했다면 화면에서 마우스 오른쪽을 클릭한 뒤, Open In Default Browser 버튼을 클릭한다.

그러면 아마 오류가 뜰 것이다. 그 이유는 파일을 아직 저장을 안해서 그렇다.

그리고 만약 해당 버튼이 보이지 않는 사람들은 인스턴트를 설치하지 않은 것이니, 이전 글로 돌아가서 2개의 인스턴트를 설치하면 된다.

이전 글

HTML 코딩 15

무튼 좌측 상단의 File > Save 버튼을 클릭해서 본인이 원하는 위치에 파일을 저장한다.

HTML 화면 출력

그리고 다시 Open In Default Browser 버튼을 클릭하면, 위와 같이 크롬(Chrome) 브라우저 화면에 내가 작성한 글자가 노출되는 것을 볼 수 있을 것이다.

브라우저 선택창이 뜨면 크롬(Chrome)으로 설정하면 된다.

오늘은 HTML 웹 언어를 활용하여 페이지에 문구를 출력하는 기본적인 과정에 대하여 알아보았다. 여기까지 진행을 했다면, 웹 페이지의 문자들이 어떠한 원리로 화면에 출력되는 것인지 어느정도 이해가 될 것이다.

이러한 기본적인 이해도가 바탕에 깔리게 되면, 이제부터는 늘상 해오던 검색이나 블로그 활동 등이 새로운 관점으로 보이기 시작할 것이다. 다음 글에서는 조금 더 심화된 내용으로 들어가보자.

이 포스팅은 파트너스 활동으로 소정의 수수료를 제공받을 수 있습니다.

Leave a Comment