2017. 12. 31. 15:38ㆍ화면 속/HTML5
HTML5 를 활용 해 보기 위해 VSCode를 설치했으니,
VSCode를 어떻게 사용할 수 있는지, HTML5가 대체 어떻게 사용되는지
한 번 알아봅시다
▼ 아직 VSCode를 설치하지 않았다면 ▼
2017/12/30 - [광고쟁이의 IT_study/HTML5] - HTMl5활용하기, VSCode 설치 방법
우선VSCode를 실행시켜 줍니다.
시작시의 첫 화면입니다.
'어서 작업 하시지!'하는 느낌의 웰컴 페이지가 있습니다.
어디서 폴더나 파일을 추가해도 상관 없지만,
이 곳 에서 파일을 저장 할 경로를 설정 해 주시면 조금 빠르게 시작할 수 있습니다.
만드는 파일이 저장 될 경로를 지정해 주신 뒤에,
추가하여 작업 할 준비를 1차적으로 끝냅니다.
파일 - 새 파일 로 추가를 하셔도 좋고,
Ctrl + N등의 단축키를 사용하셔도 좋습니다.
'탐색기'영역에서도 바로 만들 수 있으니, 자유롭게 파일을 하나 만들어 줍니다.
새 파일을 만들면 untitled인 파일이 하나 생성 됩니다.
우측 하단에 기본 설정을 제어할 수 있는 공간이 있으니,
인코딩 방식이 utf-8인지 먼저 확인합니다.
인코딩은, 컴퓨터가 알아듣는 글자를
사람이 알아볼 수 있는 글자로 변환 하는 기능이라고 생각하시면 좋을 것 같습니다.
utf-8 외에도 여러 타입이 있지만,
현재 웹에서 가장 많이 사용되고 있는 인코딩 방식은
utf-8입니다. 종종 html 파일을 불러 왔을 때 글자가 제대로 이루어지지 않았다면,
다른 type의 인코딩 방식을 사용하고 있는 것이니, 다양한 방식으로
인코딩 해 보시면 읽을 수 있는 형태로 문자를 확인하실 수 있을 것입니다.
후에, '일반 텍스트'라고 적혀져있는 부분을 클릭합니다.
VSCode가 지원하는 여러 컴퓨터 언어들을 볼 수 있는데,
우리는 HTML을 선택 해 줍니다.
앞의 표식이 눈에 띄는 기분입니다. <> , 부등호가 열리고 닫힌 상태로
표시되어 있는 걸 확인할 수 있습니다.
이 부등호를 활용한 명령어 집합이 바로 tag입니다.
성질을 나타내는 '이름'이라고 보셔도 무방합니다.
옷을 구매하셨을 때 붙어있는 'tag'와 유사한 개념이라고 생각하시면 됩니다.
'이 부분이 무엇이고, 이 것은 어떤 성질을 가지고 있고..' 를
알아볼 수 있게 해주는 것입니다.
이제 HTML문서를 작성할 수 있는 상황까지 왔습니다!
첫번 째 하실 일은 '이게 html문서!'라는 것을 알리는 일입니다.
수많은 웹 개발 언어 중에 컴퓨터가 '이것이 무엇인지'인지하도록 하는 tag입니다.
간단한 tag들은 통째로 외우면서 사용하시는 것이,
다양한 IDE를 사용하는 데 도움이 될 것입니다.
html문서는 위와 같은 형식으로 이루어져 있습니다.
<html> tag를 통해 html문서의 시작과 끝을 정해 주고,
<head> tag를 통해 문서의 기본 설정과 외부 참조물을 불러들여 옵니다.
<body> tag는 실제로 보는 게시물이 될 내용들을 채워넣는 영역입니다.
눈치 채신 분들도 있겠지만, tag는 거의 모든 경우에, 쌍을 이루어 사용됩니다.
형태는 <tag> </tag> 입니다.
tag이름이 단독으로 쓰이면 시작, /tag이름 이 되면 여기까지가 끝이라는 의미 입니다.
<로 시작해서, >로 닫는 것과 비슷한 개념이라고 보시면 됩니다.
이 사이에 있는 것 모두에 영향을 미칩니다.
따라서, 쌍을 이루는 tag는 '반드시' 닫는 태그가 필요합니다.
*VSCode에서는 여는 태그 작성 시 닫는 태그가 자동으로 생성됩니다.
앞서 강조하였던, utf-8 형태의 인코딩 명령어를 추가합니다.
<meta charset = "utf-8">과 같은 형태로 존재하며,
이는 따로 '닫는 tag'가 존재하지 않습니다.
title tag는 그 의미 처럼 이름을 나타내는데, 어디에 나타나게 되는 것인지는
마지막에 보여드리도록 하겠습니다.
위처럼 body tag사이에는 웹 페이지에 작성 될 내용이 들어가게 됩니다.
오늘의 태그는 <h1> tag와 <p> tag 입니다.
아마 <headline>의 h, <paragraph>의 p가 아닐까, 생각해 봅니다.
왜냐하면 글자의 속성을 나타내는 tag이기 때문입니다.
여기까지 작성 해 보셨으면, 어떻게 되는지 확인을 해 봐야 겠죠 :)
파일 - 저장 을 선택하시거나
단축키 Ctrl + S를 통해 바로 저장하실 수 있습니다.
저장 경로에 찾아가 적당한 이름을 붙여 저장해줍니다.
이렇게 저장이 되었다면 한 번, 실행 해 볼까요?
(실행은 크롬으로 하시는 것을 추천 드립니다)
처음으로 만들어 본 html 화면입니다!
알아보셨나요?
title 부분에 작성한 내용이, 가장 위에, 이름으로 표시되고 있습니다.
이 페이지가 어떤 페이지인지 알아볼 수 있는 중요한 영역이기 때문에,
신중하게 적어주시는 게 좋겠습니다.
<h1>은 글자의 굵기와 크기의 변화를 가져왔고,
<p>는 일반적인 문장을 만들어 냈습니다.
우선 가장 기본적인 형태를 만들어 봤으니,
다음엔 tag들에 대해 조금 더 연습해 보도록 하겠습니다.
'화면 속 > HTML5' 카테고리의 다른 글
| HTML5 Tag의 기본, 다양한 HTML의 tag들(with head) (0) | 2018.01.04 |
|---|---|
| HTML5의 특징, 시맨틱 웹(Semantic Web) (0) | 2018.01.02 |
| HTML5 기본 문법, 요소(element), 속성(attribute) (0) | 2018.01.01 |
| HTMl5활용하기, VSCode 설치 방법 (0) | 2017.12.30 |
| HTML5 입문, HTML5란? (0) | 2017.12.30 |