Front End/HTML + CSS + JavaScript

웹 사이트의 뼈대 HTML 웹 개발도구 vscode 작업공간 만들기

LoGinShin 2023. 5. 30. 17:27
반응형

 

 

 

 

코딩 언어 중 html은 '웹페이지'를 만들기 위한 언어로 Hyper Text Markup Language의 줄인 말입니다.

 

html을 공부하시면서 티스토리를 꾸미거나 사이트도 만들 수 있습니다.

물론 웹사이트가 인간이라고 한다면 뼈대 역할만 할뿐이지만요. css는 옷, javascript는 근육처럼 생각하면 되겠네요.

 

 

Tag는 웹 문서를 만들기 위한 가장 기본적인 요소입니다.

<html></html>이런 식으로 생겼죠.

<html>은 태그를 열었다하고, </html>은 열었던 태그를 닫아주는 겁니다.

 

 

 

HTML 대표적인 태그

제목과 본문 관련 태그

  • <h1> : 헤딩 제목을 표시합니다.
  • <p> : 본문의 내용을 표시합니다.

링크와 이미지 관련 태그

  • <a> : 다른 웹 페이지로 이동하거나, 문서 내의 위치로 이동하는 링크를 생성합니다.
  • <img> : 이미지를 표시합니다.

목록 관련 태그

  • <ul> : 정렬되지 않은 목록을 생성합니다. (unlist)
  • <ol> : 정렬된 목록을 생성합니다. (olderlist)
  • <li> : 목록 항목을 표시합니다.(list)

양식 관련 태그

  • <form> : 양식(form)을 정의합니다. 하나 이상의 입력 필드를 포함할 수 있으며, 폼(form)이 서버에 제출될 때 어떻게 동작해야 하는지 지정할 수 있습니다.
  • <input> : 사용자로부터 데이터를 입력받습니다. 입력 필드의 유형(type)을 지정하며, 유형마다 사용가능한 속성이 다릅니다.

 

 

 

시작하기(vscode)

 

저는 HTML을 독학하면서 Microsoft사의 VSCode 프로그램을 사용하려 합니다.

다운로드 링크 밑에 달아두겠습니다.

 

 

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

자기사용하는 컴퓨터의 OS를 맞춰 다운로드하여주세요

 

HTMl 개발도구로는 VSCode뿐 아니라 atom이라는 프로그램도 많이 사용하더라고요. 개발 도구는 취향껏 사용하세요!

 

개발 도구 프로그램을 사용하는 이유는 사용하시다 보면 아시겠지만 메모장은 순정으로 모든 것을 자기 손으로 직접 해결해야겠지만, 개발 도구는 자동으로 태그가 닫아지거나, text가 자동완성되는 기능도 있고, 무엇보다 깔끔하게 정하기 너무 쉬워서 필수라는 생각이...

 

처음 실행하면 vscode가 환영해 주는데 과감하게 꺼주시면 됩니다.

 

 

 

이런 화면에 도달하게 됩니다. 좌측상단에 파일 모양 누르면 볼 수 있는데 초기에는 아무것도 없지만 폴더 하나를 만들어 인식시켜주세요. 

(window기준 바탕화면에 두고 vscode에 드래그해 두면 폴더를 인식합니다)

 

 

파일 모양 눌러주시고 우클릭으로 NEW File을 클릭하면

 

 

파일 이름을 집어넣을 수 있는데 이름을 아무거나 적고 확장자명을 html로 잘 적어줍니다.

보통은 index.html로 초기 제목 많이 짓습니다.

 

그럼 VSCode 프로그램이 '이 파일은 HTML을 위한 파일이구나' 이해하고 HTML 작업을 위한 기술을 도입합니다.

 

' ! ' 찍고 엔터 눌러보시면 자동완성으로 HTML 기본 틀이 완성되지만 처음에는 직접 적어보세요.

 

<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

저희가 평소 웹 사이트에서 눈으로 볼 수 있는 글이나, 링크, 사진 등은 <boday> 태그 사이에 적으면 눈으로 볼 수 있는 정보입니다.

 

<head> 태그 안에 우리가 눈으로 보지 못하는 타이틀, 키워드, 웹사이트에 대한 설명 등이 들어갑니다. 기계, 검색엔진이 head태그를 보는 것이지요. 마음에 들면 상위노출!!!! 나중에 공부해 보세요 

 

 

728x90
반응형