오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.
#HTML 작성 기초 #비주얼스튜디오 코드 실행 방법 #html 작성 규칙 #html 문서 확인
어제까지 사전 준비를 마치고... 비장한 마음으로 VSC를 실행시켰습니다^^ 오늘은 전반적인 visual studio code 사용방법을 익히고 html 작성 기본 규칙들을 알게 되었습니다.
작업 순서를 먼저 머릿속으로 정리해 볼게요!
VSC 실행 ==> 새문서 만들기 ==> 문서 이름 지정 ==> 기본 태그 나오게 하기_!+[enter] ==> 언어 코드 변경 ==> title & body 내용 작성 ==> 저장 ==> html 문서 실행&확인
VSC 사용 방법을 익히는데 목적을 두고, HTML 문서를 하나 임시로 만들어 볼까 해요!
1) 새문서를 만들어요.
파일 > 새파일 경로로 들어가 새 파일을 생성해 주세요! VSC에서는 문서 이름을 먼저 지정하도록 되어 있어요.
이름은 ***.html 로 지어주세요. 파일이름은 한글도 가능하지만 확장자를 반드시 html로 지정해 주어야 해요.
저장 위치를 확인해 주세요. 이전 포스팅에서 설정한 위치에 저장되는 것을 확인할 수 있어요.
제가 이름 지정할 때, 오타가 나서 [연습.htlm.] 이랬더니 실행이 제대로 안돼서 헤맸다는...OTL... 뭔가 이상하다 싶으실 때는 반드시! 파일명 오타를 확인해 주세요! (제 짝꿍도 동시에 같이 실수해서 둘이 같이 해맸어요 ㅎㅎㅎ)
2) 기본 태그가 나오게 하고, 웹문서 기본 규칙을 확인합니다.
html로 웹문서를 작성할 때는 기본 구조와 규칙에 맞는 태그들을 먼저 작성을 해야하는데요, VSC에서는 각 문서마다 반복되어지는 기본 태그를 한 번에 불러 올 수 있습니다. 첫 행에 !를 입력하고 enter를 쳐 주세요!
이 태그들은 페이지 내에 실제 표기되는 내용은 아니어서 놓치기 쉽지만, 이 형식과 구조를 맞추어 주어야 의미있는 웹페이지를 만들 수 있습니다. 각 행이 의미하는 바는 다음과 같습니다.
- <!DOCTYPE html> ; 이 선언이 없으면, 최신 문서라고 인식을 하지 않아 검색 노출이 되지 않는다.
- <html lang='en'> ; 웹페이지 내 언어를 표기해 주는 것으로, 한글은 ko로 변경해 주어야 하며, 자동 번역 등에 영향을 준다.
- <charset="utf-8"> ; 인코딩 방식을 표기해 주는 것으로, 이걸 표기하지 않으면 컴퓨터가 웹페이지를 읽는데 시간이 오래 걸린다.
- <title>Doccument</title> ; 웹페이지의 제목으로, 이걸 표기하지 않으면, 검색 키워드로 잡히지 않게 된다.
- <body> </body> ; 실제 웹페이지 내에 들어가는 내용
3) 웹페이지 내용을 작성하고 저장합니다.
- ① <html lang='ko'> ; 웹페이지 내 언어가 한글임
- ② <title>왕초보의 쇼핑몰 제작 도전기</title> : 웹문서 제목
- ③ <body>내가 처음 만든 웹페이지 </body> ; 웹문서 내 내용
- 저장 ; 파일>저장 or [contro] + s
4) html 파일을 실행 시켜 확인합니다.
작업 폴더 내에 저장한 문서_[블로그연습.html]를 찾아 더블클릭하여 실행 시킵니다.
이렇게 처음 웹페이지를 만들어 봤습니다! 이걸 인터넷 공간에 올리면, 누구나 접속할 수 있는 웹페이지가 되는 거겠죠?^^ 아직 갈길이 멀지만... 천리길도 한걸음부터!
여기까지!
VSC를 이용한 html 작성 기초를
알아보았습니다.
감사합니다^^
'쇼핑몰 제작 도전기 > 코딩 - HTML, CSS' 카테고리의 다른 글
| [코딩] 글에 서식을 넣을 수 있어요! ② - html 취소선/위아래첨자/작은글씨/수평선 (2) | 2025.03.11 |
|---|---|
| [코딩] 글에 서식을 넣을 수 있어요! ① - html 굵게/기울이기/밑줄/마킹 (0) | 2025.03.10 |
| [코딩] 제목과 문단을 작성할 수 있어요! - html 제목/문단/줄바꿈 태그 (6) | 2025.03.07 |
| [코딩] 웹프로그래밍, HTML은 어떻게 시작하는 거에요? - 사전 준비 (0) | 2025.03.06 |
| [코딩] 쇼핑몰 제작에 필요한 코딩은 무엇? - 사전 지식 (2) | 2025.03.05 |