오늘은 웹 개발의 첫걸음이자 가장 기본이 되는 언어
HTML에 대해 알아보려고 합니다.😊😊
HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 언어로,
우리가 브라우저에서 보는 텍스트, 이미지, 링크 등이 HTML 코드로 이루어져 있습니다.
HTML은 웹 페이지의 "뼈대" 역할을 합니다.
그리고 HTML은 대소문자를 구분하지 않습니다 ~
하지만 HTML5에서는 모든 태그와 속성을 소문자로 작성하는 것을 권장으로 하고있습니다.
코드의 일관성을 유지하기랄까요 ...😅😅😅
또한 예전 HTML에서는 복잡한 구조이였지만 ..
HTML5의 버전 업데이트가 생기며 스크랩트의 구조가 보기 쉽게 바뀌었습니다. 🤗🤗
vscode에서 HTML을 검색하게 되면 위에 보는거와 같이 단축키가 이렇게 뜹니다 !
TAB 또는 ENTER키를 누르면 ~
.
.
.
.
.
.
이런식으로 HTML5 문서의 기본 구조가 자동으로 완성이 됩니다 !
《HTML5 기본 구조》
- <!DOCTYPE html>
- HTML5 문서임을 명시하는 선언입니다 - <html>
- 모든 HTML 요소를 감싸는 최상위 태그입니다
- lang 속성을 사용해 문서의 기본 언어를 설정 할수 있습니다.
▶ <html lang = "en" > 은 문서의 기본 언어가 영어임을 알수 있습니다
- <head> 와 <body>태그를 포함합니다. - <head>
- 문서에 대한 메타데이터를 포함하는 부분이고 브라우저나 검색 엔진이 문서를 이해하는데
도움을 줍니다 - <meta>
-문서에 대한 다양한 메타데이터를 정의합니다.
EX) 위에 <meta charset = "UTF-8"> 코드를 보면 UTF-8 인코딩을 사용하도록 설정한다고
보시면 됩니다 🙂🙂 - <title>
-문서의 제목을 정의합니다. - <link>
-외부 리소스를 문서에 연결할 때 사용합니다.
css파일을 연결하는데 많이 사용합니다 ※ css는 따로 올릴 예정입니다 😚😚 - <script>
- 자바스크립트 코드를 포함하거나 외부 자바스크립트 파일을 연결할 때 사용합니다. - <body>
-실제 문서의 내용을 포함하는 부분으로 웹페이지에 표시 되는 텍스트,이미지,링크,동영상 등이 이 안에 위치합니다.
기본구조로는 이렇게 짜여져 있고 ~
HTML5에서는 페이지의 구조를 더 잘 표현하기 위해 여러 태그들이 도입 되었습니다
《HTML5 추가된 태그들》
- <header>
- 페이지나 섹션의 머리글 부분을 정의합니다. - 콘텐츠 구역에 대한 머릿말을 지칭하기도 합니다 - <nav>
-페이지 내의 주요 탐색 링크를 모아 놓는 곳으로 내비게이션 링크들을 감싸는 역할입니다. - <section>
-페이지의 큰 구분이나 콘텐츠 그룹을 나타낼 때 사용됩니다. - <article>
-블로그,뉴스 기사, 게시물들의 묶음 같은 독립적인 하나의 콘텐츠 블록을 나타냅니다 - <aside>
- 사이드 바, 광고, 보충 기사 와 같이 Main 콘텐츠와는 관련이 적어 부가적인 정보를
제공하는 콘텐츠를 포함합니다.
▶ <nav> 들을 그룹화 할때도 사용합니다 - <footer>
-페이지나 섹션의 바닥글 부분을 정의 합니다 . 마찬가지로 콘텐츠 구역의 꼬릿말을
지칭합니다.
이렇게 HTML의 시작부분을 정리해 봤습니다 ! 도움이 잘 되었을까 싶네요 !
다음에 또 찾아 뵙겠습니다 🫡🫡