개발공부/HTML_CSS

HTML의 기초 공부

show090815 2023. 10. 31. 17:51

HTML이란?

웹사이트의 모습을 기술하기 위한 마크업 언어입니다.
프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함합니다. 보면 아시겠지만 애초에 이름인 HTML의 ML이 마크업 언어라는 뜻입니다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서입니다.


HTML을 공부할 때 필요한 준비물

바로 비쥬얼 스튜디오(visual studio code)입니다. 비쥬얼 스튜디오는 마이크로소프트에서 개발한 텍스트 에디터로, 2015년 4월 29일에 소개되고 2016년 4월 15일에 1.0.0 정식판이 발표되었습니다. Electron 프레임워크를 기반으로 만들었습니다. Visual Studio Team Services(현 Azure DevOps)에 있던 웹 에디터를 발전시켜 Electron 프레임워크를 통해 로컬에서 쓸 수 있게 만든 것에서 출발했습니다. MS의 개발 툴 중 최초로 크로스 플랫폼을 지원하는 에디터이며 윈도우, macOS, 리눅스를 모두 지원합니다.


비쥬얼 스튜디오를 사용하는방법

아래 주소에서 프로그램을 다운로드해서 설치해주세요.
https://code.visualstudio.com/

 

바탕화면에 web이라는 이름의 폴더를 만들고
이 폴더를 Visual Studio Code로 열어주세요. 

그럼 일단 코딩할 준비가 끝난 겁니다.

 

잘 되는지 확인해 볼까요?

 

먼저 내용을 입력하고

자기가 만든파일을 웹브라우저로 열어봅시다.
웹브라우저에서 아래와 같은 단축키를 눌러보세요.

  • 윈도우 : Ctrl + O(알파벳)
  • 맥 : Cmd + O(알파벳) 

그럼 이렇게 파일선택 화면이 나올겁니다.

여기서 자기가 만들어둔 파일을 선택하면 자기가 아까 작성한 내용이 웹브라우저를 통해서 창이 뜰겁니다.

 


HTML을 공부하면서 내가 배운 것

저는 이번에 태그라는 것을 배웠는데요. 태그는 HTML 문서를 이루는 문법적 표시입니다. 이 태그를 이용해서 웹페이지를 자기 마음대로 다룰수 있는거죠. 태그는 굉장히 많은 종류가 있습니다. 제가 배운 태그들은 모두 기초이지만 기초가 가장 중요하다고 생각합니다.


결론

저는 앞으로 제가 배운 내용들을 더 많이 글로 작성하려고 합니다. 오늘은 HTML의 기초만 알아보았는데요. 이제부터는 더 자세하게 공부하여 글을 올려보도록하겠습니다. 제가 공부하는 내용들을 보고 다른 분들도 도움이 되면 좋겠습니다. 피드백할 내용이나 잘못된 내용들은 댓글로 알려주시면 감사하겠습니다. 감사합니다.

 

'개발공부 > HTML_CSS' 카테고리의 다른 글

HTML 목록 <li>와 태그의 중첩  (0) 2023.11.26
HTML <a> 태그  (1) 2023.11.20
HTML <strong> 태그와 <u> 태그  (1) 2023.11.01