춘식이를 좋아하는 개발자

[HTML] HTML BASIC 첫 시작! 본문

Study/HTML

[HTML] HTML BASIC 첫 시작!

NaChoon 2022. 5. 19. 16:17

HTML (Hyper Text Markup Language)

다양한 텍스트 에디터들이 있으나 깃허브(GitHub)와의 연동도 쉽게 이용할 수 있고, Window, MacOS, Renux 모두 지원하고, 다양한 언어를 이용할 수 있는 VS Code로 HTML을 구현하겠다!

 

 

HTML의 특징

웹디자이너, 프로그래머(프론트, 백앤드), 웹기획자, 블로거, 쇼핑몰 운영 등 다양한 분야에서 사용되며

 

논리적이고 연산적인 요소가 필요가 없다.

 

컴파일(comfile)작업이 필요가 없으며 화면으로 바로 확인할 수 있어 시각적인 요소가 강해 프론트 개발자의 기본이라고 할 수 있다!

 

브라우저마다 보이는게 조금씩 다르다. (크롬, 사파리, 웨일즈, 파일폭스, 앳지 등)

 

 

구성

<head> tag에서는 웹사이트의 제목, 링크(link), 기본 세팅, 언어 등 구성 환경을 만드는 역할을 하고, 

 

<body> tag에서는 본격적으로 웹페이지를 제작한다.

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

 

위와 같은 형식으로 구성되어 있으며 추후 다양한 기능들에 대해서 하나씩 알아보자!

 

쉬운 예제
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>풋살이 하고싶다.</h1>
    <input type="text" placeholder="공이 차고싶다고 말해 어서!">
    <input type="password" placeholder="This is password">
    <h3>공이 언제 차고싶니?</h3>
    <input type="date">
    <h3>파이리 귀엽다</h3>
    <img src="img.jpg" alt="파이리">
    <h3>인원을 고르시오.</h3>
    <p>이것은 문단이요, <span>이것</span>은 강조이니라.</p>
    <button>누르고싶늬</button>
    <select name="" id="">
        <option value="몇명에서 찰래">몇명에서 찰래</option>
        <option value="4">4명!</option>
        <option value="5">5명!</option>
        <option value="6!">6명!</option>
        <option value="7!">7명!</option>
    </select>
    <h2>CSS를 열심히 하자!</h2>

</body>
</html>

위의 코드를 작성하고 실행하면 (img file은 같은 저장소에 저장한 뒤)

다음과 같은 html 화면을 확인할 수 있다.

 

VS Code에서 확인하는 방법은 Extensions(Ctrl+Shift+X)에서 Live Server를 검색후 install 한 뒤

VS Code화면 오른쪽 아래의 port, go live 버튼을 누르면 Crome 등으로 실시간으로 작성한 코드를 확인할 수 있다.

저장(Ctrl+s) 할 것!