웹개발에 있어 프런트엔드의 구 3 대장(HTML, CSS, JavaScript)? 이 자리 잡고 있는데 그중 첫 번째인 HTML(HyperText Mark-up Language)를 간략하게 살펴보도록 하겠다.
우선 프런트엔드의 기본 구성을 말하자면 아래와 같다.
1. HTML로 웹페이지의 초석을 잡고 (레이아웃 구성)
2. 초석이된 HTML위에 CSS로 예쁘게 화장^^?을 시켜준다. (레이아웃 꾸미기)
ex)글씨색상을 입혀준다거나 태두리를 넣어준다거나
3. 이쁘게 꾸며진 웹페이지를 JavaScript로 역동적이게 만들어준다.
다시 HTML로 돌아와서
HyperText Mark-up Language 쉽게풀어 설명하자면
Hyper Text는 사용자가 필요한 정보를 자유롭게 찾아갈 수 있는 비순차적 텍스트을 의미하며
Mark-up Language는 하이퍼텍스트를 마크업(표시)하는 컴퓨터 언어인것이다. (여기서 마크업은 태그로 표시하며 다음에는 태그란 무엇이며 태그종류에 대해 간략히 소개하도록 하겠다.)
HTML의 기본구조
1. DOCTYPE
웹 브라우저가 뒤따르는 텍스트를 해석할 수 있도록 페이지가 어떤 HTML 버전으로 쓰였는지 설명하는 요소입니다. 과거에는 반드시 작성해야 할 규칙으로 여겨졌으나 최근에는 특별한 역할을 하지 않고 형식적으로 표기합니다.
2. <html></html>
HTML 코드로 작성된 문서임을 알리는 태그입니다. 웹 브라우저는 태그를 보고, 뒤따르는 HTML 코드를 해석해서 웹에 표현합니다.
3. <haed></head>
HTML 문서의 머리글을 나타내는 태그입니다. 머리글에는 문서 제목(Title), 문서 정보(Meta tags) 등을 작성합니다.
4. <body></body>
HTML 문서의 본문을 나타내는 태그입니다. 본문은 웹 브라우저에 노출되는 모든 콘텐츠를 담는 영역으로 텍스트, 이미지, 비디오, 게임, 오디오 등 다양한 콘텐츠를 포함합니다.
또한 HTML은 비순차적 언어이므로 프로그램 흐름(Flow)에 영향을 받지 않는다.
다만 태그의 위치에 따라 레이아웃구성에는 영향을 받는다.(당연한건가??)
한줄요약 HTML
프런트단 웹페이지를 구성하는데 초석이 되는 태그를 이용한 비순차적 하이퍼텍스트 컴퓨터언어
'web_배우고익히고 > 1.HTML' 카테고리의 다른 글
| <li/> 형식의 Elements (0) | 2019.12.31 |
|---|---|
| dom이란? (0) | 2019.12.30 |
| HTML용어정리(선택자 Class, ID) (0) | 2019.12.22 |
| HTML 용어 정리(Elements,Attributes) (0) | 2019.12.22 |
| 태그(Tag)란? (0) | 2019.12.20 |
