안녕하세요. 아르나입니다.
웹 코딩을 공부할 때 가장 먼저 접하게되는 HTML 코드를 알아보고 VS Code 를 이용해서 실행해보겠습니다.
1. HTML 이란
HTML 이란 웹 페이지를 만들기위한 언어입니다. 영어로 풀어쓰자면 HyperText Markup Language 입니다. HyperText 가 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것이라고 합니다.
2. HTML 구성
1. element (요소) : 컨텐츠를 감싸는 태그.
- open tag : 여는 태그.
- close tag : 닫는 태그.
<span>내용을 입력하세요</span>- 위의 코드를 예시로 span 이라는 element 를 작성한 것입니다. 좌측의 <span> 이 open tag 이고 우측의 </span> 이 close tag 입니다. open tag 와 close tag 사이에 내용이나 다른 element 를 입력할 수 있어요.
2. close tag 가 없는 element : 단일 태그
<span>내용을 입력하세요</span> <br /> <span>내용을 입력하세요</span>- 위의 코드를 예시로 <br /> 이라는 태그는 open tag 와 close tag 가 따로있지않은 단일태그의 element 입니다.
3. 속성 (attributes) 과 value : element의 open tag 안에 넣어줄 수 있는 명령어들.
- 속성 명령어 = "value" 으로 정의합니다.
<span class="spanClass">내용을 입력하세요</span>- 위의 코드를 예시로 <span> 이라는 element 안에 class 라는 속성에 spanClass 라는 value 를 이용한 것을 확인할 수 있습니다. 속성값은 매우 많으니 차근차근 알아가시기바랍니다.
3. HTML 코드 실행하기
VS Code 에서 좌측 메뉴중 가장 아래있는 퍼즐버튼을 클릭하고 open in browser 를 입력합니다. 여러가지가 나올 수 있는데 가장 위에있는 버전을 받으시면 됩니다.
새폴더를 만들고 파일을 하나 만드는데 반드시 파일 이름 뒤에 .html 로 확장자를 명시해줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Sample HTML</title>
</head>
<body>
</body>
</html>위의 코드처럼 예시를 만들고 Alt + B 버튼을 클릭하면 웹페이지가 실행됩니다.
이렇게 빈 페이지가 실행되지만 탭에 Sample HTML 이 입력된 것을 확인 할 수 있습니다.
'IT > HTML' 카테고리의 다른 글
| [HTML] 빈 페이지 만들기 | html, head, meta, link, title, body | 실용적인 html 태그 | 웹페이지 만들기 | html 기초 (0) | 2021.01.22 |
|---|